/* 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) */
.signin-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-signin-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-signin {
   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;
}

.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-in-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-in-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;
}

/* Making the Sign modal responsive for mobiles */

@media screen and (max-width: 26.875rem) {
   .signin-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-signin {
      width: 101%;
      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;
   }

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

   .option {
      font-size: 0.625rem;

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

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

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

   .sub-title {
      width: 9.375rem;
   }

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