* {
    margin: 0;padding: 0;border: 0;box-sizing: border-box;
}

body {
    background-color: aliceblue;
    position: absolute;
    left: 5vw;
    width: 90vw;
}

header {
    background-color: gray;
    height: 30vh;
    background-image: url(fm7.jpg);
    background-size: cover;
}
.logo {
    border: 10px solid white;
    width: 25vh; height: 25vh;
    position: relative;
    top: 20px;
    left: 20px;
    background-image: url(bfm-logo.webp);
    background-size: contain
}

.announcements {
    background-color: orange;
    height: 4vh;
}

.nav_blocks {
    display: flex;
    flex-flow: row-wrap;
    height: 100vh;
    
}

.nav_bar {
    background-color: yellow;
    width: 20vw;
}
.nav_bar a {
    display: inline-block;
    
}

.nav_bar>a:hover {
    background-color: rgb(250, 170, 1);
     
}

.nav_bar>a:nth-child(1),
.nav_bar>a:nth-child(2),
.nav_bar>a:nth-child(3),
.nav_bar>a:nth-child(4),
.nav_bar>a:nth-child(5),
.nav_bar>a:nth-child(6),
.nav_bar>a:nth-child(7){
    border: 2px solid orangered;
    width: 20vw;height: 7vh;
    
    text-decoration: none;
    font-size: 1.5em;
}
.six_blocks {
    background-color: green;
    width: 70vw;
    display: flex;
    flex-flow:wrap;
}
.six_blocks>div:nth-child(1),
.six_blocks>div:nth-child(2),
.six_blocks>div:nth-child(3),
.six_blocks>div:nth-child(4),
.six_blocks>div:nth-child(5),
.six_blocks>div:nth-child(6) {
    border: 5px solid teal;
    width: 34.9vw; height: 33.33vh;
}
.six_blocks>div:nth-child(1){
    background-image: url(fm2.jpg);
    background-size:  34.9vw 33.33vh;
}

video {
    width: 34.9vw; height: 30.33vh;
    border: 10px solid orange;
    
}
span {
    border: solid;

}
.six_blocks>div:nth-child(3) {
    background-image: url(dfm-map.png);
    background-size:  34.9vw 33.33vh;
}
.six_blocks>div:nth-child(4) {
    background-image: url(fm4.jpg);
    background-size:  34.9vw 33.33vh;
}
.six_blocks>div:nth-child(5) {
    background-image: url(fm5.jpg);
    background-size:  34.9vw 33.33vh;
}
.six_blocks>div:nth-child(6) {
    border: 5px solid white;
    background-image: url(snap-logo.jpg);
    background-size:  34.9vw 33.33vh;
}
footer {
    background-color: orange;
    height: 8vh;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
    body {
        background-color: red;
    }
    .nav_blocks {
        display: inline;
    }
    
    .nav_bar {
    
        width: 90vw; height: 26vh;
    }
    
    .six_blocks {
        background-color: green;
        width: 90vw;height: 152vh;
    
    } 
    .six_blocks>div:nth-child(1),
    .six_blocks>div:nth-child(2),
    .six_blocks>div:nth-child(3),
    .six_blocks>div:nth-child(4),
    .six_blocks>div:nth-child(5),
    .six_blocks>div:nth-child(6) {
    border: 5px solid teal;
    width: 90vw; height: 25.3vh;
    display: inline-block;
}  
}
  
/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    body {
        background-color: yellow;
    }
    .nav_blocks {
        display: inline;
    }
    
    .nav_bar {
        width: 90vw; height: 26vh;
        background-color: darkgray;
    }
    
    .six_blocks {
        width: 90vw; height: 76vh;
    
    }
    .six_blocks>div:nth-child(1),
    .six_blocks>div:nth-child(2),
    .six_blocks>div:nth-child(3),
    .six_blocks>div:nth-child(4),
    .six_blocks>div:nth-child(5),
    .six_blocks>div:nth-child(6) {
    
    width: 44vw; height: 25.3vh;
    display: inline-block;
}
}
  
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
    body {
        background-color: blue;
    }
    .nav_blocks {
        display: inline;
    }
    
    .nav_bar {
        width: 90vw; height: 26vh;
        background-color: darkgray;
    }
    
    
    .six_blocks {
        width: 90vw; height: 50vh;
    }
    .six_blocks>div:nth-child(1),
    .six_blocks>div:nth-child(2),
    .six_blocks>div:nth-child(3),
    .six_blocks>div:nth-child(4),
    .six_blocks>div:nth-child(5),
    .six_blocks>div:nth-child(6) {
    width: 29.5vw; height: 25vh;
}
}
  
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
    body {
        background-color: green;
    }
}