:root{
    font-size: 62.5%;
}

body{
    font-family: verdana;
}

#container{
    border: 0px solid black;
}

/* =====mobile, phone, and tablet=====*/
/* media query not needed yet, this is for everybody */

header{
    background-color: #229;
}

header h1{
    text-align: center;
    font-size: clamp(4rem, 4vw, 5rem);/*clamp(min, normal, max)*/
    color: rgba(255, 255, 255, .6);
    padding: 12px;
}

/* =====main nav styling===== */
#main_navigation{
    background-color: #922;
}

#main_navigation ul{
    list-style: none;
    display: flex; /* makes the ul a flexbox parent*/
}

#main_navigation li{
    border: 0px solid #FFF;
    margin: 8px;
    width: 30%; height: 45px;
    flex: 1 0 auto; /*flex: grow shrink basis*/
}

#main_navigation a{
    display: block;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, .6);
}

#main_navigation li:nth-child(4), 
#main_navigation li:nth-child(5){
    display: none;
}

/* =====main article styles===== */
article{
    padding: 8px;
}

article header{
    background-color: #292;
}

article header h2{
    text-align: center;
    font-size: clamp(3rem, 3vw, 5rem);/*clamp(min, normal, max)*/
    color: rgba(255, 255, 255, .6);
    padding: 12px;
}

article figure.hero_graphic{
    background-color: #DD2;
    width: 100%; min-height: 40px;
    margin: 8px 0px;
    aspect-ratio: 16 / 9;
}

figure.hero_graphic iframe{
    width: 100%; height: 100%;
}

article p{
    font-size: 2rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.extra_info{
    display: none;
}
/* =====styling for tablet landscape, desktop users===== */
@media (width > 1000px){
/* test media rule
    body{
        display: none;
    }
*/

header h1{
    text-align: left;
}

main{
    display: flex; /*my main is a flex parent*/
    flex-flow: row wrap;
}
/* =====main nav styling===== */
#main_navigation{
    flex: 0 0 300px;
    min-height: 700px;
}

#main_navigation ul{
    flex-direction: column;
}

#main_navigation li{
    width: 70%;
}

#main_navigation li:nth-child(4), 
#main_navigation li:nth-child(5){
    display: block;
}

/* =====main article styles===== */
article{
    flex: 1 0 60%;
}

article header{
    background-color: #292;
    margin: -8px -8px 8px -8px;
}

article figure.hero_graphic{
    width: 40%;
    margin: 8px 8px 8px 0px;
    float: left;
}

.extra_info{
    display: block;
}
} /* end of responsive styling */