html {
  width: 100%;
  height: 100%;
}

* {
  font-family: sans-serif;
}

body {
  margin: 0%;
  background-image: url(./Images/LoginBG.jpg);
  background-size: 100% 100%;
}

.formbg {
  position: relative;
  text-align: center;
  padding-top: 15%;
}

.signin {
  width: 100%;
  position: absolute;
}

h1 {
  font-family: sans-serif;
  font-weight: 100;
  color: rgb(255, 255, 255);
}

input {
  border: solid transparent 1px;
  border-radius: 25px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.412);
  transition: 0.8s;
  color: white;
  padding: 10px;
  width: 20%;
}

input::placeholder {
  color: whitesmoke;
  font-size: 17px;
}

input:hover {
  background-color: transparent;
  border: solid rgb(255, 255, 255) 1px;
  transition: 0.8s;
}

.signup input:invalid {
  border: 1px solid red;
}

.btn {
  border: solid transparent 1px;
  border-radius: 25px;
  font-size: 18px;
  background-color: rgb(0, 140, 255);
  transition: 0.8s;
  color: white;
  padding: 10px;
  width: 21%;
  cursor: pointer;
}

h6 {
  font-size: 11px;
  color: whitesmoke;
  font-family: sans-serif;
}

.swap {
  background-color: transparent;
  border: none;
  color: rgb(7, 7, 7);
  cursor: pointer;
}

.signup {
  width: 100%;
  position: absolute;
}

.reveal {
  display: block;
}

.hide {
  display: none;
}

.active.fade-left {
  animation: fade-left 1s ease-in;
}

.active.fade-right {
  animation: fade-right 1s ease-in;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}