hr {
  background: var(--border-color);
  border: solid 1px var(--border-color);

  box-sizing: border-box;
  width: 400px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.auth {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.authMain {
  position: relative;
  margin: auto;

  background: var(--card-color1);
  border-radius: 50px;
  border: solid 8px var(--border-color);

  height: 569px;
  width: 750px;

  text-align: center;
}

.authPhone {
  z-index: 10;
  position: absolute;

  margin: auto;

  height: 569px;
  width: 0;

  text-align: center;

  transition-timing-function: ease;
  transition: left 0.3s;
  transition: right 0.3s;
}

.authPhoneSVG {
  position: absolute;
  margin: auto;
}

.authPhoneContent {
  position: absolute;
  top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 350px;
  height: 330px;
  margin: auto;

  /* gap: 15px; */
}

.authPhoneHeader {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;

  /* gap: 5px; */

  border: solid 4px var(--border-color);
  border-radius: 50px 0 50px 50px;
  background: var(--card-color1);

  height: 40px;
  width: 190px;

  line-height: 30px;

  font-weight: 100;
  font-size: 20px;

  margin-bottom: 15px;
}

.authPhoneImage {
  border-radius: 100%;

  width: 32px;
  height: 32px;

  margin-left: 3px;
  margin-right: 5px;
}

.authPhoneSocials {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;

  /* gap: 10px; */

  font-weight: 100;
  font-size: 20px;
}

.authPhoneSocial {
  margin-right: 5px;
  margin-left: 5px;
}

.authPhoneButton {
  border: solid 2px var(--border-color);
  border-radius: 50px;
  background: var(--card-color1);

  height: 30px;
  width: 190px;

  line-height: 30px;

  font-size: 13px;
  font-weight: 500;

  margin-top: 10px;
}

.authForm {
  position: absolute;
  width: 450px;
}

.authLogin {
  right: 17px;

  top: 60px;
}

.authSignup {
  left: 17px;

  top: 80px;
}

.authText {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: #ffffff;
  border-radius: 5px;
  border: solid 5px var(--border-color);

  box-sizing: border-box;
  width: 400px;
  height: 70px;
  line-height: 100%;
  margin-bottom: 25px;
  padding: 20px;

  /* font-family: 'Bahnschrift'; */
  font-family: 'Baloo 2';
  font-size: 27px;
  font-weight: 300;
  color: #5f5d54;
}

.authText:focus {
  border-color: #5f5d54;
}

.authSubmit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: var(--border-color);
  border-radius: 5px;
  border: solid 5px var(--border-color);

  box-sizing: border-box;
  width: 400px;
  height: 50px;
  line-height: 100%;
  margin-bottom: 25px;

  text-align: center;

  /* font-family: 'Bahnschrift'; */
  font-family: 'Baloo 2';
  font-size: 27px;
  font-weight: 300;
  color: #ffffff;

  cursor: pointer;
}

.authSubmit:active {
  filter: brightness(120%);
}

#authGoogle {
  margin: 15px;
  margin-bottom: 0px;
  font-size: 27px;
  font-weight: 300;
}

.authSubtext {
  margin: 25px;
  margin-bottom: 10px;

  font-size: 17px;
  font-weight: 200;
}

.authSwitch {
  margin-left: 5px;

  font-weight: bolder;
}

.authLink {
  text-decoration: none;

  color: #5f5d54;
}

.authLink:hover {
  cursor: pointer;

  filter: brightness(120%);
}

.authLink:active {
  filter: brightness(80%);
}

.authTextError {
  border-color: var(--warning-color);
}

.authError {
  margin: 25px;
  margin-top: 0;

  font-size: 17px;
  font-weight: 200;
  line-height: 1;
  color: var(--warning-color);
}

@media screen and (max-width: 1270px) and (min-width: 900px),
  screen and (max-width: 900px) and (min-width: 500px),
  screen and (max-width: 500px) {
  .authPhone {
    visibility: hidden;
    right: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
  }

  .authPhoneSVG {
    width: 1px;
    height: 1px;
  }

  .authPhoneContent {
    visibility: hidden;
    right: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
  }

  .authMain {
    border-radius: 50px 0 50px 50px;
  }

  .authLogin,
  .authSignup {
    right: auto;
    left: auto;
  }
}

@media screen and (max-width: 1270px) and (min-width: 900px) {
  .authMain {
    width: 450px;
  }
}

@media screen and (max-width: 900px) and (min-width: 500px) {
  hr {
    width: 44.4vw;
    min-width: 270px;
  }

  .authMain {
    border-width: 0.9vw;

    width: 50vw;
    min-width: 330px;
  }

  .authForm {
    width: 50vw;
    min-width: 330px;
  }

  .authText {
    border-width: 0.6vw;

    width: 44.4vw;
    min-width: 270px;
  }

  .authSubmit {
    border-width: 0.6vw;

    width: 44.4vw;
    min-width: 270px;
  }
}

@media screen and (max-width: 500px) {
  hr {
    width: calc(70px + 40vw);
  }

  .authMain {
    border-width: 4px;

    width: calc(130px + 40vw);
    height: 350px;
  }

  .authForm {
    width: calc(130px + 40vw);
  }

  .authLogin {
    top: 50px;
  }

  .authSignup {
    top: 60px;
  }

  .authText {
    border-width: 2px;

    width: calc(70px + 40vw);
    height: 30px;
    margin-bottom: 15px;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;

    font-size: 18px;
  }

  .authSubmit {
    border-width: 2px;

    width: calc(70px + 40vw);
    height: 30px;
    margin-bottom: 15px;

    font-size: 18px;
  }

  #authGoogle {
    margin: 15px;
    margin-bottom: 0px;
    font-size: 18px;
  }

  .authSubtext {
    margin: 15px;
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 300;
    line-height: 1;
  }

  .authError {
    margin: 15px;
    margin-top: -5px;

    font-size: 13px;
    font-weight: 300;
  }
}