body {
background: linear-gradient(37deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
background-attachment: fixed;
font-family: 'Roboto', sans-serif;
}


#container {
    display:grid;
    grid-template-columns: 1fr 960px 1fr;
}


#heroimage {
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    background-image:url("laughingmonkey.jpg");
    height:600px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:49% 0%;
    background-attachment: fixed;
    
}

header {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}


#navbar {
    background-color: rgba(0,0,0,0.5);
    grid-column: 1 / -1;
    grid-row: 1 / 3;
}


nav {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  
}


main {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

footer {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
}

.responsive {
    width: 100%;
    height: auto;
}


@media only screen and (max-width:960px) {
    body {
        background: linear-gradient(37deg, rgb(34, 109, 195) 0%, rgb(200, 20, 255) 100%);
        }

    #container {
        grid-template-columns: 1fr 600px 1fr;
    }

    #heroimage {
        background-attachment:scroll;
        
    }
    
}


@media only screen and (max-width:600px) {
    body {
        background: linear-gradient(37deg, rgb(237, 255, 36) 0%, rgb(255, 15, 27) 100%);
        }

    #container {
        grid-template-columns: 1fr;
    }
    
    footer, main, nav, #navbar, header, #heroimage  {
        grid-column: 1 / -1;
    
    }



}