title {
    background-color: #333;
}
header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    font-family: courier;
    font-size:20px;
}
body {
    background-color: #94ffeb;
    font-family: courier;
    font-size:20px;
}
@media screen and (min-width: 400px) {
    body {
        background-color: #ccf2ff;
    }
}
@media (min-width: 600px) {
body {
        background-color: #e6ffcc;
          }
}
@media screen and (min-width: 800px) {
    body {
        background-color: #d9ccff;
    }
}
@media (min-width: 992px) {
body {
        background-color: #ccfff2;
          }
}
@media (min-width: 1200px) {
body {
        background-color: #ccffcc;
          }
}

h1{
    border-style:solid;
    border-color:black; 
    background-color: #dddddd;
    margin:0;
    padding:0;
    width:100%;  
    color:black; 
}
ul{

    list-style: none;
    text-align:right;
    margin-top:0px ;
    padding: 0;
    width: 100%;
    position:absolute;
    top:0;
    right:0;

}
ul > li{
    display: inline-block;
    padding: 20px 10px 20px 10px;
}
ul > li> a{
    text-decoration: none;
    color: black;
}
ul > li >a:hover{
    color: #c1c1c1;
}
p {
    text-align: center;
    font-style: courier;
}


table{
    font-family: courier;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}