.visible{
  visibility: visible;
}

.hidden{
  visibility: hidden;
}

.none{
  display: none;
}

#auth{
  display: flex;
  flex-direction: column;
}

#auth h3{
  text-align: center;
  padding: 0 0 2vh 0;
}

.auth-wrapper{
  margin: 3em auto;
  padding: 2.5em 5em 1em 5em;
  background-color: honeydew;
  border: 1px solid lightgreen;
  border-radius: 0.5em;
  width: 30vw;
}

.auth-wrapper.error{
  padding: 2.5em 5em 0 5em;
}

.auth-wrapper.logged{
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0px;
  border-radius: 0;
  height: 0;
}

.auth{
  
}

.auth form{
  display: flex;
  flex-direction: column;
}

.auth form input, .auth form button, .disconnect button{
  text-align: center;
  margin-bottom: 1vh;
  font-size: large;
  border-radius: 0.4em;
  padding: 0.3em;
}

.eyeClose .eye {
  content: url(./eyeClose.svg);
}

.eye{
  position: absolute;
  /*translate: -110%;*/
  translate: 25% 170%;
  width: 1.75em;
  /*padding: 0.5vh 0.2vw;*/
  content: url(./eye.svg);
}

.auth form button{
  font-size: x-large;
  background-color: aliceblue;
  transition: background-color 0.5s;
}

.auth form button:hover{
  background-color: antiquewhite;
  transition: background-color 0.5s;
}

.error{
  display: flex;
  flex-direction: column;
  color: red;
  font-size: 1em;
  text-align: center;
  height: 2.5em;
}

.disconnect{
  position: absolute;
  right: 5vw;
  top: 2vh;
}

.disconnect button{
  background-color: lavenderblush;
  transition: background-color 0.5s;
}

.disconnect button:hover{
  background-color: red;
  transition: background-color 0.5s;
}