styles.css

body {
    background-color:#9b9b9b;
}
*{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    color:white;
}
ul {
    border: solid 2px #000000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #056df4;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
  }
  
li {
 float: left;
}
  
li a {
    font-weight: 900;
    color:#16161f;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
li a:hover {
    background-color: #013d81;
    color:#9b9b9b;
  }
.hidden {
    opacity: 0;
    transition: all ease-out 1s;
    transform: translateY(-100px);
}
.visible {
    opacity: 1;
    transform: translateY(10px);
}
#logo {
    transition-delay: 500ms;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.centered {
 display:grid;
 align-items: center;
 place-items: center;
}