@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

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

:root {
    font-size: 62.5%;
}

body {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#container {
    width: 100%; height: 100%;
    display: flex;
}




#header_block {
    background-image:url("fm-media/fm7.jpg");
    background-size: cover;
    background-position: center;
    height: 20vh;
}

header {
    text-align: left;
    position: flex;
    display: block;
    width: 55px; height: 200px;
    
}

#announcements {
    background-color:rgb(243, 176, 31);
    height: 5vh;
    padding: 12px;
}



#main_navigation {
    background-color: gold;
    width: 700px; height: 736px;
    
}



#main_navigation p {
    border: 2px solid rgb(165, 12, 12);
    background-color: gold;
    margin: 8px;
    width: 300px; height: 36px;
    font-size: 200%;
    text-align: left;
    color: black;
    
}

li a {
    text-decoration: none;
    color: black;
}

#main_navigation a {
    display: block;
    width: 100%; height: 100%;
    background-color:gold;
    
}

#main_navigation a:hover {
    background-color:rgb(243, 176, 31);
    color: black;
}

#main_navigation p:hover {
    border-color:black;
}



#blocks {
    background-color: rgb(162, 0, 255);
    width: 2220px; height: 736px;
}

figure.hero_graphic {
    display: inline-block;
    width: 350px; height: 350px;
    margin: 7px;
    background-color: coral;
    
}

figure > h1 {
    
    background-color:rgb(245, 169, 141, 0.7);
    width:350px ; height: 75px;
    position: absolute;
    font-size: 300%;
    text-align: center;
    padding: 1%;
}

figure.video {
    text-align:center;
    border: 4px solid coral;
}

footer {
    background-color: blue;
    height: 6vh;
 
    margin-bottom: 5px;
   
    padding: 24px 0px;
    color:rgb(245, 243, 243);
     
}


@media (width > 1000px) {
    #header_block {
        background-image:url("fm-media/fm7.jpg");
        background-size: cover;
        background-position: center;
        height: 20vh;
    }
    
    header {
        text-align: left;
        position: flex;
        display: block;
        width: 55px; height: 200px;
        
    }
    
    #announcements {
        background-color:rgb(243, 176, 31);
        height: 5vh;
        padding: 12px;
    }
    
    
    
    #main_navigation {
        background-color: gold;
        width: 700px; height: 736px;
        
    }
    
    
    
    #main_navigation p {
        border: 2px solid rgb(165, 12, 12);
        background-color: gold;
        margin: 8px;
        width: 300px; height: 36px;
        font-size: 200%;
        text-align: left;
        color: black;
        
    }
    
    li a {
        text-decoration: none;
        color: black;
    }
    
    #main_navigation a {
        display: block;
        width: 100%; height: 100%;
        background-color:gold;
        
    }
    
    #main_navigation a:hover {
        background-color:rgb(243, 176, 31);
        color: black;
    }
    
    #main_navigation p:hover {
        border-color:black;
    }
    
    
    
    #blocks {
        background-color: rgb(162, 0, 255);
        width: 2220px; height: 736px;
    }
    
    figure.hero_graphic {
        display: inline-block;
        width: 350px; height: 350px;
        margin: 7px;
        background-color: coral;
        
    }
    
    figure > h1 {
        
        background-color:rgb(245, 169, 141, 0.7);
        width:350px ; height: 75px;
        position: absolute;
        font-size: 300%;
        text-align: center;
        padding: 1%;
    }
    
    figure.video {
        text-align:center;
        border: 4px solid coral;
    }
    
    footer {
        background-color: blue;
        height: 6vh;
     
        margin-bottom: 5px;
       
        padding: 24px 0px;
        color:rgb(245, 243, 243);
         
    }
}