/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

*{


    margin: 0;


    padding: 0;


    list-style: none;


    text-decoration: none;


}





header{


    width: 100vw;


    height: 100px;


    border-bottom: solid 1px rgba(16, 16, 16, 0.1);


    font-family: 'Poppins';


}





header .inner{


    width: 1300px; /* This is the inner width of the content inside of your header (80%, etc) */


    height: 100%;


    display: block;


    margin: 0 auto;


}





header .logo{


    display: table;


    height: 100%;


    float: left;


}





header .logo div{


    height: 100%;


    display: table-cell;


    vertical-align: middle;


}





header .logo img{


    height: 50px;


    margin-top: 5px; /* Optical alignment of the logo */


}





header nav{


    float: right;


    height: 100%;


}





header nav li{


    display: table;


    height: 100%;


    float: left;


    margin-right: 30px;


}





header nav li:last-of-type{


    margin-right: 0;


}





header nav span {


    display: table-cell;


    vertical-align: middle;


}





header nav a{


    color: #101010;


}





header nav .button{


    background-color: #1ab26b; /* This HEX is the color of the button */


    color: #FFF;


    padding: 10px 20px;


    border-radius: 4px;


}





header nav .button:hover{


    filter: brightness(1.05);


}