@font-face {
  font-family: 'Regular';
  src: url(fonts/Sansita-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Medium';
  src: url(fonts/Sansita-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Bold';
  src: url(fonts/Sansita-Bold.ttf) format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Regular', sans-serif;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#login-title {
  position: absolute;
  top: 17%;          /* vertically center */
  left: 0%;          /* stick to right */
  transform: translateY(-50%);
  z-index: 1;
  width: 100%;
  height: 15%;
  border: 2px transparent;
  border-radius: 15px;
  font-family: 'Bold';
  font-size: 4.25vw;
  color: rgb(70, 70, 70);
  background-color: transparent;
  text-align: center;
  z-index: 3;
} 

#create-title {
  position: absolute;
  top: 15%;          /* vertically center */
  right: 5;          /* stick to right */
  transform: translateY(-50%);
  z-index: 1;
  width: 100%;
  height: 15%;
  border: 2px transparent;
  border-radius: 15px;
  font-family: 'Bold';
  font-size: 5vw;
  color: white;
  background-color: transparent;
  text-align: center;
  z-index: 3;
} 

.back-box-create {
  position: absolute;
  top: 50%;          /* vertically center */
  right: 17%;          /* stick to right */
  transform: translateY(-50%);
  z-index: 1;
  width: 33%;
  height: 75%;
  border-top-right-radius: 1.25vw;
  border-bottom-right-radius: 1.25vw;
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2); /* A soft, common card shadow */
  background-color: #0075c2;
}

.back-box-login {
  position: absolute;
  top: 50%;          /* vertically center */
  left: 17%;          /* stick to right */
  transform: translateY(-50%);
  z-index: 1;
  width: 33%;
  height: 75%;
  border-top-left-radius: 1.25vw;
  border-bottom-left-radius: 1.25vw;
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2); /* A soft, common card shadow */
  background-color: white;
}

#username {
  position: absolute;
  top: 40%;          /* vertically center */
  left: 20%;          /* stick to right */
  transform: translateY(-50%);
  text-align: left;        /* typed text */
  padding-left: 1vw;      /* spacing from left border */
  padding-top: 0;
  padding-bottom: 0.2em;
  width: 60%;
  height: 10%;
  border-radius: 1.4vw;
  border-style: solid;
  border-width: 0.37vw;
  border-color: #ff3131;
  font-family: 'Bold';
  font-size: 1.5vw;
  color: #ff3131;
  background-color: white;
  z-index: 5;
}

#username::placeholder {
  color: #ff3131;
  opacity: 50%;
}

#username:focus {
  outline: none;
  border-color: #ff3131;
}

#password {
  position: absolute;
  top: 52.5%;          /* vertically center */
  left: 20%;          /* stick to right */
  transform: translateY(-50%);
  text-align: left;        /* typed text */
  padding-left: 1vw;    /* spacing from right border */
  padding-top: 0;
  padding-bottom: 0.2em;
  width: 60%;
  height: 10%;
  border-radius: 1.4vw;
  border-style: solid;
  border-width: 0.37vw;
  border-color: #ff3131;
  font-family: 'Bold';
  font-size: 1.5vw;
  color: #ff3131;
  background-color: white;
  z-index: 5;
}

#password::placeholder {
  color: #ff3131;
  opacity: 50%; /* make sure it’s not dimmed */
}

#password:focus {
  outline: none;
  border-color: #ff3131;
}

#loginBtn {
  position: absolute;
  top: 75%;          /* vertically center */
  left: 30%;          /* stick to right */
  transform: translateY(-50%) scale(1);
  text-align: center;
  padding-bottom: 0.25em;
  width: 40%;
  height: 10%;
  border-radius: 1.4vw;
  border-style: solid;
  border-width: 0.37vw;
  border-color: #ff3131;
  font-family: 'Bold';
  font-size: 1.95vw;
  color: white;
  background-color: #ff3131;
  transition: transform 0.2s ease;
  z-index: 5;
}

#loginBtn:hover {
  transform: translateY(-50%) scale(1.1);
}

#createpage {
  position: absolute;
  top: 75%;          /* vertically center */
  left: 12.5%;          /* stick to right */
  transform: translateY(-50%) scale(1);
  text-align: center;
  padding-bottom: 0.25em;
  width: 75%;
  height: 10%;
  border-radius: 1.4vw;
  border-style: solid;
  border-width: 0.37vw;
  border-color: white;
  font-family: 'Bold';
  font-size: 1.5vw;
  color: white;
  background-color: #0075c2;
  transition: transform 0.2s ease;
  z-index: 5;
}

#createpage:hover {
  transform: translateY(-50%) scale(1.1);
}

#message {
  position: absolute;
  top: 90%;
  left: 12.5%;
  width: 75%;
  height: 5%;
  border-style: solid;
  border-width: 0.37vw;
  border-color: transparent;
  text-align: center;
  font-family: 'Bold';
  font-size: 1vw;
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(15px);
  }

  to {
      opacity: 1;
      transform: translateY(0);
  }
}