@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root {
  /* spacing (base 8) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  
  /* font-size (base 4) */
  --fs-1: 12px;
  --fs-2: 16px;
  --fs-3: 20px;
  --fs-4: 24px;
  --fs-5: 32px;
  --fs-6: 40px;
  --fs-7: 48px;

  /* radius (base 8) */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-4: 32px;
  --radius-5: 40px;

  /* colors */
--pry-clr: #2872a1;
--pry-clr-fade: #cbdde9;
--sec-clr: #f2f2f2;

/* EXTRA COLORS */
--bg-clr-1: #568259;
--bg-clr-2: #ffc482;
--bg-clr-3: #07020d;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: var(--bg-clr-3);
  line-height: 1.6;
}
section > div {
  height: 100vh;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  border-bottom: 1px solid darkgrey;
}
.flexbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #72bd77;
}
.grid-inner {
  display: grid;
  place-items: center;
  background-color: #ffc482;
}
.positioning-inner {
  background-color: var(--pry-clr-fade);
}
.flexbox-inner,
.grid-inner,
.positioning-inner {
  position: relative;
}
.positioning-inner .form-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.centering {
  position: absolute;
  text-align: center;
  top: 7%;
  left: 50%;
  transform: translate(-50%);
  text-decoration: underline;
  font-weight: 700;
  font-size: clamp(0.875rem, 5vw, 1.5rem);
}

.form-wrapper {
  width: 100%;
  max-width: clamp(17rem, 10rem + 40vw, 22rem);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 1.02rem + 1.6vw, 1.5rem);
  border-radius: clamp(0.375rem, 0.2rem + 1vw, 0.5rem);
  overflow: hidden;
  border: 1px solid lightgrey;
  box-shadow: 0 0 clamp(0.938rem, 0.5rem + 2.5vw, 1.25rem) var(--bg-clr-3);
}
.form-title {
  text-align: center;
  font-size: clamp(1.5rem, 0.8rem + 4vw, 2rem);
  background: var(--pry-clr);
  padding: clamp(0.5rem, -0.2rem + 4vw, 1rem) 0;
  font-weight: 700;
  color: #fff;
}
.wrapper-inner {
  padding: 0 clamp(0.25rem, -0.1rem + 2vw, 0.5rem);
}
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: clamp(1.3rem, 1.02rem + 1.6vw, 1.5rem);
}
.row {
  position: relative;
  max-width: 100%;
  display: flex;
  border: 1px solid lightgrey;
  overflow: hidden;
  border-radius: 0.375rem;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  border: none;
  outline: none;
  font-size: clamp(0.75rem, 0.662rem + 0.5vw, 0.813rem);
  padding: 0 var(--space-2);
  transition: box-shadow 300ms ease;
}
input[type="text"]:focus,
input[type="password"]:focus {
  box-shadow: inset 0 0 3px #2872a1;
}
i {
  background-color: var(--pry-clr);
  padding: var(--space-2) 0.75rem;
  color: #fff;
  font-size: clamp(0.813rem, 0.55rem + 1.5vw, 1rem);
}
.remember {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
}
.remember label {
  font-size: 0.875rem;
  font-weight: 600;
}
.btn {
  max-width: 100%;
  padding: clamp(0.375rem, 0.2rem + 1vw, 0.5rem) 0;
  display: flex;
  justify-content: center;
  background-color: var(--pry-clr);
  color: var(--sec-clr);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px #a1d5f5;
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.form-forgot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}
.form-forgot p,
.form-forgot a {
  font-size: clamp(0.813rem, 0.725rem + 0.5vw, 0.875rem);
  font-weight: 600;
}
.form-forgot a:hover {
  text-decoration: none;
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .form-wrapper {
    max-width: clamp(22rem, 16.972rem + 16.72vw, 25rem);
    gap: clamp(1.5rem, 0.662rem + 2.79vw, 2rem);
    border-radius: clamp(0.5rem, 0.249rem + 0.84vw, 0.65rem);
  }
  .wrapper-inner {
    padding: 0 clamp(0.5rem, -0.338rem + 2.79vw, 1rem);
  }
  form {
    gap: clamp(1rem, 0.162rem + 2.79vw, 1.5rem);
    padding-bottom: clamp(1.5rem, 0.662rem + 2.79vw, 2rem);
  }
  .row {
    border-radius: clamp(0.25rem, 0.124rem + 0.42vw, 0.325rem);
  }
  input[type="text"],
  input[type="password"] {
    font-size: clamp(0.813rem, 0.5rem + 1.04vw, 1rem);
    padding: 0 clamp(0.5rem, -0.338rem + 2.79vw, 1rem);
  }
  i {
    font-size: clamp(1rem, 0.162rem + 2.79vw, 1.5rem);
    padding: clamp(0.5rem, 0.332rem + 0.56vw, 0.6rem) clamp(0.75rem, 0.331rem + 1.39vw, 1rem);
  }
  .remember label {
    font-size: clamp(0.875rem, 0.498rem + 1.25vw, 1.1rem);
  }
  .btn {
    padding: clamp(0.5rem, 0.165rem + 1.11vw, 0.7rem) 0;
  }
  .form-forgot p,
  .form-forgot a {
    font-size: clamp(0.875rem, 0.498rem + 1.25vw, 1.1rem);
  }
}


@media screen and (min-width: 769px) {
  .form-wrapper {
    max-width: 25rem;
    gap: 2rem;
    border-radius: 0.65rem;
  }
  .wrapper-inner {
    padding: 0 1rem;
  }
  form {
    gap: 1.5rem;
    padding-bottom: 2rem;
  }
  .row {
    border-radius: 0.325rem;
  }
  input[type="text"],
  input[type="password"] {
    font-size: 1rem;
    padding: 0 1rem;
  }
  i {
    font-size:1.5rem;
    padding: 0.6rem 1rem;
  }
  .remember label {
    font-size: 1.1rem;
  }
  .btn {
    padding: 0.7rem 0;
  }
  .form-forgot p,
  .form-forgot a {
    font-size: 1.1rem;
  }
}