/* css reset rule */
@media (min-width: 1024px){

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height:100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px;
    width: 90vw;
    margin: 0 auto;
    background-color: #F9C784;;
    border: 6px solid #FC7A1E;
    color:#ff6c03;
    font-size: 1.2em;
    
}

header{
    background-color:#FC7A1E;
    min-height: 10vh;
}
header h1{
    color: #F9C784;
    font-size: 2.0em;
    text-align: center;
    

}
.nav_container{
    font-size: 1.1em;
    text-align:center;
    background-color:#F9C784;
    min-height:6vh;
    padding-top: 10px;
    padding-bottom:5px;
    
   
}

.nav_container nav{
    text-align: center;
    border:2px red solid;
     width: 100%;

}
 nav a{ padding:5px;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    text-decoration: none;
   
    


}
 a{
    box-shadow: 2px 2px 10px #FC7A1E;
    text-decoration: none;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
}



.hero{
    height:50vh;
    background-color:purple;
    
}
.hero figure{
    border: 2px solid black;
    height: 100%;
    background-image: url(../images/clouds.jpg);
    background-size:cover;
    background-position: top center;
    background-repeat: no-repeat;
    

    
}
.intro{
    min-height: 15vh;
    background-color: #F9C784;
    gap: 2px;
    font-size:1.2em;

    
}
.intro p{
    padding: 10px;
   
    text-align: left;
    
    
}
 
 main ul li{
    border: 1px solid orange;
    border-radius: 6px;
    padding: 4px;
     box-shadow: 2px 2px 4px #FC7A1E;
     list-style-type: none;
   
 }
.goals {
    
    background-color:#F9C784;
    min-height:12vh;
    border-left: 0;
    border-right: 0;

}
.goals h2{
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 4px;
}
.goals ul{
    display:flex;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 4px;
    border: 2px
}
.labs {
    min-height: 15vh;
    background-color:#F9C784;

    border-left: 0;
    border-right: 0;

}
.labs h2 {
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 8px;

}
.labs ul{
    display:flex;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;

}
 li a{
    line-height:2;
    
}
.hobby{
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;
}
.hobby h2{
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 8px;
}
.hobby ul {
    display:flex;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;
}

footer{
    min-height: 10vh;
    background-color: #f8d29f;
    box-shadow: 10 10 16 #FC7A1E;
    border: 2px solid red;
    position: relative;
    gap: 10px;
    border-radius: 10px;
}
footer h3{
    text-align: center;
    padding: 10px;

}
footer nav {
    width: 100%;
    text-align: center;
}
 
}
/* tablet  */
@media (min-width: 768px) {
    body{
        width:100vw;
      
    }
    .nav_container{
    font-size: 1em;
    text-align:center;
    background-color:#F9C784;
    min-height:6vh;
    display:flex;

}
.nav_container nav{
   display:flex;
}
.goals{
    min-height: 12vh;
}

.goals ul{
    flex-flow: row wrap;
    text-align: center;
    
}
.goals ul li {
    flex-flow: row wrap;
    flex: 1 0 40%; 

}
.labs{
    min-height: 12vh;
}

.labs ul{
    flex-flow: row wrap;
    text-align: center;
}
.labs ul li {
    flex-flow: row wrap;
    flex: 1 0 40%; 

}

footer nav a {
font-size: .7em;
}
}


/* phone size */
@media (max-width: 765px) {

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height:100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px;
    width: 100vw;
    margin: 0 auto;
    background-color: #F9C784;;
    border: 6px solid #FC7A1E;
    color:#ff6c03;
    font-size: 1em;
    
}

header{
    background-color:#FC7A1E;
    min-height: 10vh;
}
header h1{
    color: #F9C784;
    font-size: 1.3em;
    text-align: center;
    

}
.nav_container{
    font-size: .7em;
    text-align:center;
    background-color:#F9C784;
    min-height:6vh;
   
    
   
}

.nav_container nav{
    text-align: center;
     width: 100%;
     padding: 8px;
     display:flex;
     flex-flow: row wrap;   

}
 nav a{ padding:5px;    
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    text-decoration: none;
   
    


}
 a{
    box-shadow: 2px 2px 10px #FC7A1E;
    text-decoration: none;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
}



.hero{
    height:50vh;
    background-color:purple;
    
}
.hero figure{
    border: 2px solid black;
    height: 100%;
    background-image: url(../images/clouds.jpg);
    background-size:cover;
    background-position: top center;
    background-repeat: no-repeat;
    

    
}
.intro{
    min-height: 15vh;
    background-color: #F9C784;
    gap: 2px;
    font-size:1.2em;

    
}
.intro p{
    padding: 10px;
   
    text-align: left;
    
    
}
 
 main ul li{
    border: 1px solid orange;
    border-radius: 6px;
    padding: 4px;
     box-shadow: 2px 2px 4px #FC7A1E;
     list-style-type: none;
   
 }
.goals {
    
    background-color:#F9C784;
    min-height:12vh;
    border-left: 0;
    border-right: 0;

}
.goals h2{
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 8px;
}
.goals ul{
    display:block;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;
    border: 2px
}
.labs {
    min-height: 15vh;
    background-color:#F9C784;

    border-left: 0;
    border-right: 0;

}
.labs h2 {
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 8px;

}
.labs ul{
    display:block;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;

}
 li a{
    line-height:2;
    
}
.hobby{
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1em;
    padding: 2px;
}
.hobby h2{
    text-align: center;
    border-bottom: 1px solid #FC7A1E;
    padding: 8px;
}
.hobby ul {
    display:flex;
    gap: 30px;
    justify-content: space-evenly;
    font-size: 1.2em;
    padding: 8px;
}

footer{
    min-height: 10vh;
    background-color: #f8d29f;
    box-shadow: 10 10 16 #FC7A1E;
    border: 2px solid red;
    border-radius: 10px;
    font-size: .7em;
    
}
footer h3{
    text-align: center;
    padding: 10px;

}
footer nav {
    width: 100%;
    text-align: center;
    display:flex;
    flex-flow: row wrap;
    
}
footer nav a {
    margin: 10px;
   
    
}
}
/* min-height: 100svh;  100% of the small| viewpport height */


    


    
    /* examples of how to create colored squares */
    /* 20 px top and bottom; auto left and right. */
    /* width:400px; aspect-ratio: 4/1; *
}/
#box2 {
    box-sizing: border-box;
    width:400px; aspect-ratio: 4/1;
    margin: 20px auto;
    background-color:aquamarine
    /* 20 px top and bottom; auto left and right. */