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;
    
}
/* For mobile*/
img, video, embed {
   max-width:100%;
   height:auto;
}
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;
}
.floatRight{
float: right;
    
}

@media screen and (min-width:767px){
    
    body {
        display: flex;
        flex-direction: column;
        max-width: 75rem;
    }
    nav{
        
        flex-direction: column;
        
    }
     section{
    flex-direction: column;
    flex-wrap: wrap;
    }
     article {
        flex: 50%;
         flex-direction: column;
    }
    section p {
        column-count: 1;
        column-gap: 20px;
        column-rule: 1px solid rgb(255, 105, 0);
    }
    ul{
        display:flex;
        flex-direction: column;
    }
    
    
}
/* Larger devices like computer monitors*/
@media screen and (min-width: 1200px){
    nav{
        display:flex;
        flex-direction:column;
    }
    section p{
        column-count:2;
        column-gap: 10px;
        column-rule: 1px solid rgb(255, 105, 0);
        flex-wrap:wrap;
        
    }
     article {
        flex: 50%;
         flex-direction: column;
    }
    
    
    
    
}
/* Tablet screen */
@media screen and (min-width: 768px){
    section p {
        column-count: 1;
        
    }
    body {
        display: flex;
        flex-direction: column;
        max-width: 75rem;
    }
    nav{
        flex-direction:column;
        
    }
    
}
table,td,th{
  padding:10px;
  border-spacing:15px;
  border:solid 4px;
  border-collapse:collapse;
}
td
{
  border: solid 4px;
}
th
{
border-top: solid;
  border-bottom:solid 4px;
}
tr:nth-child(2n) {
   background-color:coral;
}
tr:hover  {
    background-color: #364454;
    color: white;
}
@media screen and (min-width:992px){
  td, th{
    display:table-cell;
    
    }
    section p{
        display: flex;
        flex-direction:column;
        column-count: 1;
        flex-wrap:wrap
        
    }
    nav{
        display:flex;
        flex-direction:column;
    }
    
    
    
    
    
}
@media screen and (min-width: 767px){
     td, th{
    display:table-cell;
    }
    section p{
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        flex: 50%;
    }
    nav{
        display:flex;
        flex-direction:column;
    }
    caption{
        color:blue;
    }
    
}
#tfooter{
    text-align: center;
}
