header{
    background-color:cadetblue;
    color:white;
    text-align: center;
    border-bottom: solid 1px black;
    font-size:larger;
    height: 80px;
}
ul li{
    display: flex;
    flex-direction: row;
    flex: auto;
}
html{
    background-color: cornsilk;
}
nav{
    background-color:#79a5e2;
    height: auto;
    font-size: larger;
    
}
nav a:hover{
  background: black;
  color: blue;
}
ul{
    display:flex;
    flex-direction:row;
    padding:0;
    margin:0;
    height: auto;

}
ul li{
border-right: solid;
border-bottom: solid;
    
}
ul li:nth-child(1){
    border-left: solid;
}
ul li a{
    display:flex;
    text-align: center;
    flex: auto;
    justify-content: center;
    
}
section{
    display:flex;
    flex-direction: row;
    border-bottom:  1px solid;
    border-right: solid 1px;
}
article{
    flex-basis: 100%;
}
p{
    text-align: center;
}
h2{
    text-align: center;
}

.a2{
    border-right:  1px solid;
    border-left:solid 1px;

}
footer{
    text-align: center;
    border:  1px solid;
    background-color:#8df0f0;
}
a{
    color:black;
}
@media screen and (min-width: 768px){
    

body{
    display:flex;
    flex-direction:column;
    max-width:75rem;
}
main{
    display:flex;
    flex-wrap: wrap;
}
nav{
    flex-direction: row;
}
nav a{
    flex:auto;
}
article{
    flex: 50%
}
    }
@media screen and (min-width: 1200px){
    article{
        flex:35%;
    }
}
@media screen and (min-width: 767px){
    nav{
        flex-direction: row;
    }
    article{
        flex: 75%;
    }
    
    body{
        display:flex;
        flex-direction:column;
    }
}
.floatRight{
float: right;
    
}