* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

 /* UTILITY */
 button {
   cursor: pointer;
 }
 button:active {
   transform: scale(0.9);
 }

:root {
    --PRIMARY-COLOR: #673b20 ;
    --LIGHT-PRIMARY: #673b20d9 ;
    --SECONDARY-COLOR: #e6a52d;
    --WHITE: white;
    --DARK-BG: #252525;
    --DARK-COLOR: gray;
    --BORDER-COLOR: rgba(128, 128, 128, 0.209);
    --NAVBAR-COLOR: gray;
}

 body {
    min-height: 100vh;
    font-family: system-ui;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
 }

 .dark_mode {
    background-color: var(--DARK-BG);
    color: var(--DARK-COLOR);
 }

 .toggle_display {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
 }

 #light_mode {
    display: none;
 }

 header{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   margin-top: 2rem;
 }

header h2 {
   color: var(--PRIMARY-COLOR);
}

 main {
   flex-grow: 1;
   display: flex;
   justify-content: center;
   gap: 10px;
 }

.container {
   display: flex;
   height: fit-content;
   width: fit-content;
   border: 1px solid var(--BORDER-COLOR);
   border-radius: 10px;
}

 .logo_section {
   height: 500px;
   width: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background-color: var(--PRIMARY-COLOR);
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }

 .logo_section figure {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   flex-direction: column;
   gap: 30px;
   padding: 20px;

   & figcaption {
      font-size: 1.5rem;
      color: var(--SECONDARY-COLOR);
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;

      & svg {
         margin-top: 5px;
      }
   }
 }

.form_section {
   width: 400px;
   height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.form_section form {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
   padding: 20px;
   gap: 20px;

   /* SUBMIT BUTTON */
   & button {
      width: 100%;
      padding: 10px;
      letter-spacing: 1px;
      display: grid;
      place-content: center;
      border: none;
      outline: none;
      border-radius: 6px;
      background-color: var(--PRIMARY-COLOR);
      color: var(--SECONDARY-COLOR);
      font-size: 1rem;
      font-weight: 600;
   }
}

.input_label_div {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;

   /* LABELS */
   & label {
      font-weight: 500;
      color: var(--PRIMARY-COLOR);
   }

   /* INPUTS */
   & input {
      padding: 10px;
      border-radius: 6px;
      outline: none;
      border: 2px solid var(--BORDER-COLOR);
      font-size: 1rem;
   }

   & input:focus {
      outline: 1px solid var(--PRIMARY-COLOR);
   }
}

.switch_signing {
   color: var(--PRIMARY-COLOR);
   padding: 10px;
   border-radius: 5px;
   background-color: var(--BORDER-COLOR);
   width: 50%;
   display: grid;
   place-content: center;
   font-weight: 600;
   cursor: pointer;
}

.switch_signing:active {
   transform: scale(0.9);
}

.notif_container {
   position: fixed;
   top: 10%;
   right: -500%;
   background-color: var(--PRIMARY-COLOR);
   color: var(--SECONDARY-COLOR);
   display: flex;
   align-items: center;
   padding: 10px;
   border-radius: 15px;
   gap: 20px;
   width: 600px;
   transition: all 1s linear;
}

.notif_container svg {
   max-width: 20px;
   max-height: 20px;
}
.show_notif {
   display: inline-flex;
   right: 5%;
   transition: right 1s linear ;
}

.progress {
   width: 0;
   height: 4px;
   background-color: var(--SECONDARY-COLOR);
   position: absolute;
   bottom: 0;
   left: 10px ;
   border-radius: 10px;
}

.move {
   width: 96%;
   transition: width 5s linear;
}

@media (max-width: 700px) {
   .logo_section {
      display:none;
   }

   .form_section {
      width: 350px;
   }

   .notif_container {
      width: 300px;

      & svg {
         width: 40px;
         height: 40px;
      }
   }
}

@media (max-width: 770px ) {
   .container {
     max-width: 90%;
     margin-top: 2rem;
   }

}