:root {
  --clr-teal-900: hsl(244, 100%, 13%);
  --clr-teal-700: hsl(180, 100%, 15%);
  --clr-teal-500: hsl(180, 100%, 25%);
  --clr-teal-300: hsl(180, 100%, 35%);
  --clr-teal-100: hsl(180deg 100% 25% / 40%);
  --clr-gold-300: hsl(40, 70%, 85%);
  --clr-gold-500: hsl(40, 70%, 75%);
  --clr-gold-600: hsl(40deg 70% 68%);
  --clr-gold-700: hsl(40, 70%, 55%);
  --clr-neutral-900: hsl(0, 0%, 0%);
  --clr-neutral-700: hsl(0, 0%, 25%);
  --clr-neutral-500: hsl(0, 0%, 50%);
  --clr-neutral-300: hsl(0, 0%, 75%);
  --clr-neutral-200: hsl(0, 0%, 87.5%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-grad-gold: linear-gradient(135deg, #bf953f, #fcf6ba);
  --clr-grad-teal: linear-gradient(to right, teal, #74d6d6);

  --fs-xl: 4rem;
  --fs-700: clamp(1rem, 2vw, 4rem);
  --fs-600: clamp(0.8rem, 1.3vw, 3rem);
  --fs-500: clamp(0.8rem, 1vw, 2rem);
  --fs-400: clamp(0.5rem, 0.85vw, 1.8rem);
  --fs-300: clamp(0.5rem, 0.75vw, 1.5rem);

  --rfs-200: clamp(1.5rem, 1.5vmax, 2rem);
  --rfs-400: clamp(2rem, 1.5vmax, 3rem);
  --rfs-600: clamp(3rem, 2vmax, 4rem);
  --rfs-800: clamp(6rem, 3vmax, 8rem);
  --rfs-xl: 15rem;
}

body {
  font-family: "Ubuntu", sans-serif;
  background-image: linear-gradient(
    to bottom right,
    white 5%,
    teal 70%,
    rgb(1, 15, 77) 100%
  );
  min-height: 100vh;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  width: 40%;
  height: fit-content;
  margin: 1rem auto;
  border-radius: 1.5em;
  box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
}

.title {
  color: #29787a;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
}

form.form1 {
  text-align: center;
}

.input-field:focus {
  border: 2px solid rgba(0, 0, 0, 0.18);
}

.submit {
  width: 50%;
  cursor: pointer;
  border-radius: 5em;
  color: #fff;
  background: linear-gradient(to right, teal, #74d6d6);
  border: 0;
  padding: 2% 8%;
  margin: 1.5% auto;
  font-size: 1.1vw;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}

.already {
  text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
  color: #036c74;
  padding-top: 4%;
  text-align: center;
  padding-bottom: 5%;
}

a {
  text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
  color: #f7cc11;
}

.requiredinfo {
  display: none;
}

.input-field {
  width: 75%;
  color: rgb(38, 50, 56);
  font-weight: 700;
  font-size: 1.1vw;
  padding: 1.5% 4%;
  border-radius: 999px;
  outline: none;
  box-sizing: border-box;
  border: none;
  box-shadow: 2px 3px 5px 0px lightgrey;
  text-align: center;
  margin: 1% auto;
  font-family: "Ubuntu", sans-serif;
}

.main div {
  text-align: center;
  font-weight: 300;
  font-size: 1vw;
  margin-top: 2vw;
}

#termsText {
  font-size: 0.8vw;
  justify-content: center;
  align-items: center;
  margin: 2vw auto;
  display: flex;
  gap: 1rem;
  width: 100%;
}

#termsText div {
  margin-top: 0;
}

*:focus {
  outline: none !important;
  border: none !important;
}

@media screen and (max-width: 1100px) {
  body {
    display: flex;
  }
  .main {
    width: 90vw;
  }

  .input-field,
  .submit {
    font-size: var(--rfs-400);
    line-height: var(--rfs-600);
  }

  .title {
    font-size: var(--rfs-600);
  }

  #termsText,
  .main div,
  p {
    font-size: var(--rfs-200);
  }

  input[type="checkbox"] {
    height: 3vw;
    width: 3vw;
  }
}