/*Use color/font variables to not repeat unneeded patterns*/
:root{
    --darkestcolor:#ff312;
    --lightestcolor:#ff392;
    --darkcolor:#32fed3;
    --lightcolor:#320fe3;
}



/* Default Styling [MOBILE] */
@font-face {
    font-family:headerFont ;
    src: url(../fonts/OstrichSans-Black.otf);
}
@font-face{
    font-family:bodyFont;
    src:url(/fonts/Metropolis-ExtraLightItalic.otf)
}
body{
    margin:auto;
    background-image:url(../images/backgroundimage-100.jpg);
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    min-width:80%;
}

header{
    min-width:79%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    position:sticky;
    border: 3px #ACB4A0 solid;
    background-color: #ACB4A0;
    font-family: headerFont;
    
}

header h1{
    font-size:3em;
    margin-bottom:5px;
    margin-top:10px;   
}

header nav{
    border-bottom:15px #392A16 solid;
    margin: 0;
    display:flex;
    width:100%;
    background-color:#FFE9C0;
    justify-content: space-around;
    align-items:center;
}
 
header nav a{
    font-size:1rem;
    text-align:center;
   
    color:#392A16;
    text-decoration: none;
    padding:10px;
    width:20%;
    display: block;
   
}
header nav a:hover{
    transition:0.5s;
    text-decoration:underline;
}

.maincontainer{
    width:80%;
    display:flex;
    justify-content: center;
    
}
.homewelcome{
    font-size:1.2em;
    font-weight:600;
}
.homemain{
    
    min-width:80%;
    padding:10px;
    background-color:#392A16;
    margin:0 auto;
 
  
   

}


.homemain aside{
    
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    
   
}
.borderedvideo{
    
    margin-top:15px;
    min-width:10%;
    max-height:70%;
    border:10px #FFE9C0 solid;
}
.homearticle{
    grid-row:1/4;
    grid-column: 1/3; 
    padding:15px;
}

.HomeParagraph{
    padding:7px;
    font-size:1.1rem;
    font-family:bodyFont;
    letter-spacing: 1.2px;;
    line-height:25px;
    
    margin:0;
    background-color:white;
    
}



footer {
    border-top:2px #FFE9C0 solid;
    height:100px;
    width:80%;
    display:flex;
    justify-content: space-evenly;
    align-items:center;
   
   
    
    background-color: #392A16;
    color: white;
    margin:auto;
    text-align:center;
  }
#footerparagraph{
    display:none;
}
footer{
    position:sticky;
    bottom:0px;
}
.iframely-embed{
    
    width:80%;
    margin-top:50px;
}
@media screen and (min-width: 570px) {
    .borderedvideo{
    
        margin-top:15px;
        width:100%;
        height:75vh;
        
        
        
    }
    .homemain aside{
        flex-direction:row;
        margin:0;
        align-items:unset;
    }
    .iframely-embed{
        height:100%;
    }
   
    
}