.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 4%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.45);

  position: fixed;
  left: 0; right: 0; top: 0;
  height: 7rem;
  z-index: 500;

   transition: 0.5s ease;
  
}

.header.scrolled{
  background-color: rgba(0,0,0,0.8);
}
.header:hover{
  background-color: rgba(0, 0, 0, 0.8);
}
.header img{
  
  width: 7rem;
}
.header .navigation-bar a{
  margin: 1rem 1.2rem;
  font-size: 1.3rem;
}
.header .socials a{
 margin: 1rem 0.2rem;

}


.header .log-in-btn {
  cursor: pointer;
   font-size: 1.5rem;
  
}

.header .navigation-bar a:hover,
.header .socials a:hover{
  color: var(--accent-color);
  font-size: 1.4rem;
}
.header .log-in-btn:hover{
    color: var(--accent-color);
  font-size: 1.6rem;

}

#menu-btn{
  display: none;
}
.mini-header{
  display: none; 
  padding: 1rem 2%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 0.3rem;

  position: fixed;
   right: 0; top: 7.2rem;
  z-index: 500;

}
.mini-header a{
  padding: 0 0.5rem;

}
.mini-header a:hover{
  font-size: 1.2rem;
  color: var(--accent-color);
}




.login-form-container,
.register-form-container{
  position: fixed;
  inset: 0; 
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%; height: 100%;

  transform: scaleY(0);
  transform-origin: top;
}

/* Will be acced by JS */
.login-form-container.active,
.register-form-container.active{
  transform: scaleY(1);
}



.login-form-container .the-x-btn,
.register-form-container .the-x-btn{
  font-size: 2.5rem;
  color: #fff;
  position: absolute;
  top: 2rem; right: 2rem;
  cursor: pointer;
}

.login-form-container .the-x-btn:hover,
.register-form-container .the-x-btn:hover{
  color: var(--accent-color);
}


.login-form-container .form,
.register-form-container .form{
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 1rem;

   width: 600px;
   max-width: 85%;




}

.login-form-container .form h3,
.register-form-container .form h3{
  text-align: center;
  padding: 0.5rem;
  font-size: 1.5rem;
}
.login-form-container .form .inputBox input,
.register-form-container .form .inputBox input{
  border: 1px solid black;
  padding: 1rem;
  width: 100%;
  font-size: 1.2rem;
  margin: 0.5rem auto;
  border-radius: 0.2rem;
}
.login-form-container .form .login-btn,
.register-form-container .form .register-btn{
  width: 100%;
  color: var(--white);
  padding: 0.5rem 0.5rem;
  font-size: 1.2rem;
  background-color: var(--accent-color);
  margin: 1rem auto;
  cursor: pointer;

   transition: 0.4s ease;
}

.login-form-container .form .login-btn:hover,
.register-form-container .form .register-btn:hover{
  background-color: rgba(234, 124, 0,0.3);
  border: 1px solid var(--accent-color);
  color: #000;
}
.login-form-container .form .checkbox {
    text-align: left;
    font-size: 1.2rem;
    padding: .7rem 0;
}
.login-form-container .form .info{
    text-align: left;
    padding: .15rem 0;
    font-size: 1.2rem;

}
.login-form-container .form .info  span{
  color: var(--accent-color);
  font-weight: 500;
  cursor: pointer;
}
.login-form-container .form .info span:hover{
  text-decoration: underline;
}

/* Pop up message after login/reister */
.toast-message{
  font-size: 1.5rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
  transform: translateX(-50%);
  background-color: var(--background-color);
  color:#000;
  padding: 1rem 2rem;
  border-radius: 0.2rem;

  position: fixed;
  bottom: 4rem;
  left: 50%;
  z-index: 1000;

   
  transition: opacity 0.3s ease;
}
/* .toast-message.show{
  opacity: 1;
} */