* {
    margin: 0; 
    padding: 0;
  }

nav {
    color:#8FC3D9;
    width:100%;
    background-color: #151517;
    font-family: Instrument sans, sans-serif;
    font-weight: 400;
    box-shadow: 0px 1px 0px 0px rgba(143, 194, 217, 0.60); 

  }

  nav .navbar {
    margin: 0rem 0rem 4rem 8rem;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    padding: 1rem 0rem 1rem 0rem;


  }

  nav #logo {
    position:relative;

  }

  
  nav ul {
    display:flex;
    flex-direction: row;
    align-items:center;

  }

  nav ul li {
    display:block;
    list-style:none;
    text-decoration: none;
    padding: 0px 24px 0px 24px;
    color: #F1F6F8;
  }
  
  nav a {
    color: #F1F6F8;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  
  nav a:hover {
    background-color: #0B5C7F;
    height:100%;
      }
  
  nav .button-nav {
          font-size:.8rem;
          font-weight:300;
          font-weight: 300;
          color: #F1F6F8;
          border-radius: 50px;
          cursor: pointer;
          background-color: transparent;
          padding: 14px 28px;
          margin: 0rem 8rem 0rem 0rem;
          border: 1px solid #f1f6f8;
      }

nav .button-nav:hover {
        background-color: #F1F6F8;
        color:black;
          }

 


@media (max-width: 600px) {

/* mobile navigation */

nav .navbar {
flex-direction: column;
margin: 2rem;
display:flex;
flex-direction: column;
align-items:center;
padding: 1rem 0rem 1rem 0rem;

}


nav ul, li {
flex-direction: column;
font-weight:500;
margin:1rem;
justify-content: space-evenly;

} 

  

}