* {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", system-ui;
}


/*NAVBAR NAV*/

.navbar a {
  font-weight: bolder;
  text-decoration: none;
  color:whitesmoke;
  margin: 3vh;
  transition: 0.3s;
  border: 3px solid transparent;
  padding: 1.5vh;
}
.nav a:hover{
  color: #ff8a29;
  border: 3px solid #ff8a29;
}
.nav .hideOnMobile{
  border-radius: 20px;
}
.navbar{
  height: 14vh;
  width: 100%;
  background: #101820;
  display: flex;
  justify-content:space-between;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  z-index: 1030;
}
.navbar .brand {
  margin-left: 3rem;
  display: flex;
  align-items: center;
}
.navbar .brand a{
  font-size: 3vh;
}
.navbar .brand img{
  height: 80%;
  border-radius: 50%;
  transition: 0.3s;
  border: #ffff solid 3px;
}
.navbar .links{
  margin-right: 4vh;
  display: flex;
  align-items: center;
}
.navbar .links a{
  font-size: 2vh;
}
.menu-button{
  display: none;
}
.menu-button svg{
  transition: 0.3s;
}
.menu-button svg:hover{
  fill: #2196f3;
  width: 6vh;
}

/*SIDEBAR*/
.sidebar{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 400px;
  z-index: 999;
  background-color: rgb(0, 0, 0);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
}
.sidebar img{
  margin-top: 3vh;
  margin-bottom: 1vh;
  width: 50%;
  border-radius: 50%;
  align-self: center;
  
}
.sidebar h2{
  width: 100%;
  padding: 3vh 0;
  color: whitesmoke;
  text-align: center;
  font-size: 3vh;
}
.sidebar a{
  padding: 3vh;
  margin: 0;
  width: 100%;
  transition: 0.5s;
}
.sidebar .side-links:hover{
  font-weight: bolder;
  color: rgb(110, 160, 250);
  background-color: rgba(0, 0, 0, 0.7);
  padding-left: 6vh;
}
.sidebar hr{
  width: 100%;
  margin-bottom: 2vh;
  height: 0.5vh;
  border: none;
  background-color: whitesmoke;
}
.close-button svg{
  transition: 0.3s;
}
.close-button svg:hover{
  fill: rgb(110, 160, 250);
  height: 8vh;
  width: 8vh;
}

@media (max-width: 1300px){
  .hideOnMobile{
    display: none;
  }
  .menu-button{
    display: block;
  }
}

@media (max-width: 600px){
  .hideLogo{
    display: none;
  }
  .sidebar{
    width: 100%;
  }
  .navbar .brand a{
    padding: 0.5vh;
    margin-left: 0.5vh;
    
  }
  .collaboration .collab-text{
    text-align: center;
  }
}

@media (max-width: 430px){
  
  .navbar .brand a{
    padding: 0.5vh;
    margin-left: 0.5vh;
    font-size: 2.5vh;
  }
}