mystyle.css

.container {
    display:grid;
    height:100vh;
    grid-template-columns: 1.4fr 1.2fr 1.6fr 1fr;
    grid-template-rows: 0.2fr 1.6fr 1.3fr 0.6fr;
    grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "footer footer footer footer";
    grid-gap: 3px;
    font-weight:600;
    text-align:center;

}

nav{    
    grid-area: nav;
}

main {
    /*background: yellow;*/
    grid-area: main;
    background-image: url(media/pexels-photo-1034857.jpeg);
    
    
    
}

#sidebar {
    background: grey;
    grid-area: sidebar;
    
    
    overflow: hidden;
}

#sidebar video {
    height: 80vh !important;
}

#sidebar div {
    margin-top: 150%;
}

#content1{
    background: green;
    grid-area: content1;
    background-image: url(media/Banana.png);
    background-size: 100%;
    overflow: hidden;
    
    
}

#content2 {
    background: orange;
    grid-area: content2;

    
    
}

#content3 {
    background: #753905;
    grid-area: content3;
    background-image: url(media/pexels-photo-7194986.jpeg);
    background-size: cover;
    overflow: hidden;

    

}

footer {
    background: grey;
    grid-area: footer;
    background-image: url(media/pexels-photo-3310691.webp);
    background-size: cover;
    overflow: hidden;
    
    
}

@media only screen and (max-width: 500px){
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 0.4fr 2.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
        grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3"
      "footer";
    }
}

nav p {
    float: left;
    font-family: "Verdana", sans-serif;
    color: black;
    font-size: 30px;
    line-height: 70px;  /* height of the website name*/
    padding: 0px 30px; /* left and right is the 2nd value, top/bot the first one */
}

nav ul {
    float: left;
}

nav ul li {
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a{
    display:block;
    font-family: "Verdana", sans-serif;
    color: black;
    font-size: 22px; /* size of menu items*/
    padding: 20px 16px;
    line-height: 35px;
    text-decoration: none;
}

nav ul li ul{
    display:none;
    position: absolute;
    top: 65px;
    background-color: white;
    padding: 3px;
    border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
    display:block;
}


nav ul li ul li{

    width: 200px;
    border-radius: 4px;
}

nav ul li ul li a{
    padding: 12px 16px;
}

nav ul li ul li a:hover{
    background-color: lightgrey;

}


/*THINGS*/

h1 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size:4vw;


}
h2 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 20px;
}
h3 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
}
h4 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
}
h5 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
}
h6 {
    color: black;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
}

p {
    font-family: "Georgia", serif;
}

.imageClass {
    max-width:100%;height:auto;
}
.imageClass2 {
    width:100%;
    height:40px;
}


#myIframe iframe,
#myIframe object,
#myIframe embed {
    position: relative;
    height:50vh;
    width:80vh;
}

span {
    color:yellow;
}





.mysecondbody {

    /*grid-area: "mysecondbody";*/
    
    
    background-image: url(media/pexels-photo-3310691.webp);
    background-size: cover;
}



.bananabody {

    display:grid;
    height:100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 2fr;
    grid-template-areas:
    "nav"
    "mysecondbody";
    grid-gap: 0.2rem;
    font-family:"Verdana", serif;
    font-weight:650;
    text-align:center;



}