html {
    scroll-behavior: smooth !important;
}

body {
    cursor: url('note.png'), url('note 2.jpg'), auto !important;
} 

h1 {
    font-family: "Futura", sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding: 50px;
    text-transform: uppercase;
    text-shadow: 4px 4px #a9a9a9;
}

h2 {
    font-family: "Futura", sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
}

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

p {
    font-family: "Arial", sans-serif;
}




@media screen and (max-width: 960px){
    
    .hero_title {
        font-size: 3.5rem;
    }
    .hero_desc {
        font-size: 2rem;
    }
}

@media screen and (max-width: 640px){
    
    input[type=text] {
    width: 45%;  
}
     input[type=submit] {
    width: 20%;  
}
    .hero_title {
        font-size: 2.5rem;
}
    .hero_desc {
        font-size: 1.5rem;
}
    .topnav {
        display: block;
}
}