/* color resets */

:root {
   --title-color: #ffffff;
   --sub-title-color: #ffffff;

   --label-color: rgba(255, 255, 255, 0.9);
   --input-text-color: #ffffff;
   --input-placeholder-color: rgba(255, 255, 255, 0.2);

   --highlighter-color: #fe842d;
   --highlighter-hover-color: rgb(255, 106, 0);

   --google-btn-bg-color: #ffffff;
   --google-btn-text-color: #000000;

   --input-field-bg-color: rgba(255, 255, 255, 0.1);
   --input-field-outline-color: rgba(255, 255, 255, 0.1);
}

/* utilities */

.base h1,
h2 {
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
}

.user-entry p {
   font-family: "Roboto", sans-serif;
   font-style: normal;
}

button {
   border: none;
   background: none;
   padding: 0;

   appearance: none;

   cursor: pointer;
}

.option a {
   text-decoration: none;
   background: none;

   color: var(--text-color);

   cursor: pointer;
}

/* custom animation for the modal entry */
@keyframes fade-in {
   from {
      opacity: 0;
      top: 45%;
   }

   to {
      opacity: 1;
      top: 50%;
   }
}

/* modal container (hidden by default) */
.signup-container {
   width: 45.25rem;
   height: 28.375rem;

   position: fixed;
   /* top: 50%; <-- it happens with animation */
   left: 50%;
   transform: translate(-50%, -50%);

   padding: 0;
   margin: 0;

   border: 0.0625rem solid rgba(250, 250, 250, 0.2);
   border-radius: 1.25rem;

   /* glass effect */
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(3.125rem);
   -webkit-backdrop-filter: blur(2.1875rem);

   z-index: 1000;

   animation: fade-in 0.5s ease forwards;

   /* initially hidden */
   display: none;
}

.show-signup-container {
   display: block;
}

/* overlay behind the modal (hidden by default) */
.overlay {
   width: 100%;
   height: 100vh;

   position: fixed;
   top: 0%;

   background: rgba(0, 0, 0, 0.8);

   /* initially hidden */
   display: none;
   opacity: 0;
   z-index: -100;
}

.show-overlay {
   display: block;
   opacity: 1;
   z-index: 999;
}

/* close button */

.close-btn {
   position: absolute;
   top: 1.625rem;
   right: 1.875rem;
}

.material-symbols-rounded {
   color: white;
   width: 1.25rem;
   height: 1.25rem;
}

/* titles and background image */

.base {
   flex-direction: column;

   position: absolute;
   top: 3.0625rem;
   left: 17.8125rem;
   right: 1.625rem;
   bottom: 0;

   user-select: none;
}

.title {
   color: var(--title-color);

   font-size: 1.5625rem;
   font-weight: 800;

   width: 100%;

   text-align: center;

   margin-bottom: 0.375rem;
}

.sub-title {
   color: var(--sub-title-color);

   font-size: 0.9375rem;
   font-weight: 400;

   width: 100%;

   text-align: center;

   margin-bottom: 2.125rem;
}

/* user form */

.user-ip-box {
   flex-direction: column;
   justify-content: left;

   width: 15.625rem;
   height: 20.375rem;

   position: absolute;
   top: 4.6875rem;
   left: 2.75rem;
   bottom: 3.3125rem;
   right: 26.875rem;
}

.mail-label,
.pwd-label {
   color: var(--label-color);

   font-size: 0.9375rem;
   font-weight: 500;

   margin-bottom: 0.3125rem;
}

.pwd-label {
   margin-top: 0.9375rem;
}

/* hide/unhide password when eye-icon is clicked in login forms */
@keyframes eyeToggle {
   from{
      opacity: 0;
      transform: rotateX(180deg);
   }
   to{
      opacity: 1;
      transform: rotateX(0deg);
   }
}
.eye {
   cursor: pointer;
   width: 1.0625rem;
   height: 1.0625rem;

   position: absolute;
   top: 34.35%;
   right: 5%;
}
.eye.animate {
   animation: eyeToggle 0.5s ease-in forwards;
}

.user-entry input {
   width: 15.625rem;
   height: 2.5rem;

   padding: 0.625rem;
   font-size: 0.875rem;

   border: 0.0625rem solid var(--input-field-outline-color);
   border-radius: 0.3125rem;

   color: var(--input-text-color);
   background-color: var(--input-field-bg-color);
}

.user-entry input::placeholder {
   color: var(--input-placeholder-color);
}

.user-entry input:focus {
   outline: none;
}

.option {
   color: var(--input-text-color);

   font-size: 0.6875rem;
   font-weight: 300;

   margin-top: 0.625rem;
}

.option span a {
   font-weight: 500;

   color: var(--highlighter-color);

   margin-left: 0.125rem;
}

@media (hover: hover) and (pointer: fine) {
   .option span a:hover {
      text-decoration: 0.0125rem underline;
   }
}

.sign-up-btn {
   position: relative;
   left: 50%;
   transform: translateX(-50%);

   text-align: center;

   width: 4.375rem;
   height: 1.75rem;

   font-size: 0.625rem;
   font-weight: 800;

   border-radius: 0.3125rem;

   color: var(--input-text-color);
   background-color: var(--highlighter-color);

   margin-top: 1.8125rem;
   margin-bottom: 1.75rem;

   transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
   .sign-up-btn:hover {
      background-color: var(--highlighter-hover-color);
   }
}

.google-opt {
   justify-content: center;
   gap: 0.4375rem;

   width: 11.25rem;
   height: 2.5rem;

   padding: 0.625rem 0.875rem;

   border-radius: 0.3125rem;

   color: var(--google-btn-text-color);
   background-color: var(--google-btn-bg-color);

   margin-top: 1.75rem;
}

.google-opt img {
   width: 1.25rem;
   height: 1.25rem;
}

.google-opt p {
   font-size: 0.875rem;
   font-weight: 500;
}

/* alert message pop up for user */
@keyframes fadeInOut {
   0% {
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   90% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

.messageDiv {
   color: white;

   display: flex;
   align-items: center;
   justify-content: center;

   padding-block: 0.25rem;
   padding-inline: 0.625rem;
   text-align: center;

   border-top-left-radius: 1.25rem;
   border-top-right-radius: 1.25rem;

   font-size: 0.75rem;
   letter-spacing: 0.0313rem;
   font-weight: 400;

   animation: fadeInOut 10s ease forwards;
}

.success {
   background-color: hsl(120, 100%, 25%);
}

.error {
   background-color: hsl(351, 100%, 26%);
}

/* Making the Sign modal responsive for mobiles */

@media screen and (max-width: 26.875rem) {
   .signup-container {
      width: 20.5rem;
      height: 30.75rem;

      border-radius: 0.625rem;
   }

   .overlay {
      background: rgba(0, 0, 0, 0.6);
   }

   .base img {
      display: none;
   }

   .close-btn {
      top: 1rem;
      right: 1.25rem;
   }

   .base {
      top: 2.8125rem;
      left: 5.625rem;
      right: 5.625rem;
      bottom: 25.625rem;
   }

   .title {
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
   }

   .sub-title {
      font-size: 0.625rem;
      margin-bottom: 2.375rem;
   }

   .user-ip-box {
      top: 7.5rem;
      bottom: 2.875rem;
      left: 2.4375rem;
      right: 2.4375rem;
   }

   .mail-label,
   .pwd-label {
      font-size: 0.875rem;
      font-weight: 400;
   }

   .eye {
      top: 34%;
      right: 4%;
   }

   .user-entry input {
      font-size: 0.8125rem;
   }

   .option {
      font-size: 0.625rem;

      /* to improve readability on mobiles */
      letter-spacing: 0.0625rem;
   }

   .sign-up-btn:active {
      background-color: var(--highlighter-hover-color);
   }

   /* alert message in mobile displays */
   .messageDiv {
      position: absolute;
      width: 100%;

      z-index: 1001;

      padding-block: 1rem;
      padding-inline: 0.125rem;

      border-top-left-radius: 0.625rem;
      border-top-right-radius: 0.625rem;

      font-size: 0.6875rem;
      letter-spacing: 0.0437rem;

      animation: fadeInOut 5s ease forwards;
   }
}

@media screen and (max-width: 20rem) {
   .signup-container {
      width: 95%;
      height: 30.75rem;
   }

   .sub-title {
      width: 9.375rem;
   }

   .user-ip-box {
      left: 1.625rem;
      right: 1.625rem;
   }
}