*{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      list-style: none;
      list-style-type: none;
}



    /* Navbar container */
#nav{
  width: 100%;
  background: ghostwhite;
  border-bottom: 2px solid rgb(31, 146, 158);  
}
nav {
      width: 96%;
      margin: auto;
      color: white;
      display: flex;
      line-height: 3rem;
}
/*End of Navbar container*/





/*Logo*/
.logo{
      display: flex;
      font-weight: bold;
      flex: 1.4;
      color: rgb(31, 146, 158);
}
.logo img{
      width: 3rem;
/*      margin: -10px 0px 0px 0px;*/
}
@media only screen and (max-width: 334px){
 .logo img{
      width: 1.8rem;
/*      margin: -10px 0px 0px 0px;*/
}     
}
.logo a{
      text-decoration: none;
}
/*End of Logo*/






/* Navigation bar */
.Nav-nav {
      display: flex;
      gap: 3rem;
      flex: 0.6;
}
.Nav-nav a {
      color: #0f1724;
      text-decoration: none;
      transition: background 0.3s;
      font-size: 18px;
      font-weight: 540;
}
.Nav-nav a:hover {
        text-decoration: underline;
        color: brown;
        transition: all 0.2s ease-in-out;
}

/* Mobile menu */
@media (max-width: 850px) {
.Nav-nav {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 88px;
        left: -1200px;
        background: rgb(31, 146, 158);
        display: flex;
        flex-direction: column;
        transition: left 0.5s ease-in-out;
        z-index: 1000;
}
.Nav-nav a{
      margin: 20px 0px 0px 10px;
      line-height: 0.1rem;
      color: brown;
      font-weight: bold;
      text-shadow: 4px 4px 8px white;
}
.Nav-nav.show {
       left: 0;
}
}
/*End of Navigation bar*/





/*Sign up-in*/
.logosUn a{
        text-decoration: none;
        color: black;
        background: rgb(31, 146, 158);
        margin: 0px 0px 0px 20px;
        text-align: center;
        border-radius: 2px;
        font-weight: bold;
        padding: 10px 10px 10px 10px;
}
.logosUn a:hover{
        text-decoration: underline;
        color: white;
        background: brown;
        margin: 0px 0px 0px 20px;
        text-align: center;
        border-radius: 2px;
        font-weight: bold;
        padding: 6px 10px 6px 10px;
        transition: all 0.2s ease-in-out;
}
.logosDeux a{
        text-decoration: none;
        color: black;
        background: rgb(31, 146, 158);
        margin: 0px 0px 0px 20px;
        text-align: center;
        border-radius: 2px;
        font-weight: bold;
        padding: 6px 10px 6px 10px;
}
.logosDeux a:hover{
        text-decoration: underline;
        color: white;
        background: brown;
        margin: 0px 0px 0px 20px;
        text-align: center;
        border-radius: 2px;
        font-weight: bold;
        padding: 6px 10px 6px 10px;
        transition: all 0.2s ease-in-out;
}

/*End of Sign up-in*/




/*Icon*/
#Nav-hamburger{
      line-height: 3rem;
      display: none;
      color: brown;
      font-size: 30px;
      margin: 0px 0px 0px 10px;
      cursor: pointer;
}
@media only screen and (max-width: 850px){
      #Nav-hamburger{
      display: block;
}
}
@media only screen and (max-width: 334px){
      #Nav-hamburger{
      display: block;
      color: brown;
      font-size: 26px;
      margin: 0px 0px 0px 4px;
} 
}
/*End of Icon*/