@font-face {
    font-family: "Sora";
    src: url(/public/fonts/Sora.ttf)
}

:root {
    --white: #F7F8FC;

    --light-grey: #A2A2A2;
    --dark-grey: #444444;

    --danger-main: #FC5050;
    --warning-main: #FBBF24;

    --haiti-main: #1a0e38;
    --haiti-50: #ecedff;
    --haiti-100: #dcddff;
    --haiti-200: #bfbfff;
    --haiti-300: #9d99ff;
    --haiti-400: #8371ff;
    --haiti-500: #724fff;
    --haiti-600: #6930fb;
    --haiti-700: #5c24de;
    --haiti-800: #4a20b3;
    --haiti-900: #3d238c;
    --haiti-950: #1a0e38;

    --emerald-main: #17A25D;
    --emerald-50: #F0FDF6;
    --emerald-100: #DCFCEB;
    --emerald-200: #BCF6D8;
    --emerald-300: #87EEBA;
    --emerald-400: #4CDC94;
    --emerald-500: #26D07C;
    --emerald-600: #17A25D;
    --emerald-700: #167F4B;
    --emerald-800: #17643F;
    --emerald-900: #155235;
    --emerald-950: #052E1C;
}
  
  @keyframes load {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%, 95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%, 59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  
  @keyframes round {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }


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

html,body{
    height: 100%;
    width: 100%;
    background: var(--haiti-main);
    color: var(--white);
    /* every 1rem will be considered 10px */
    font-size: 62.5%;
}

.content {
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    overflow: hidden;
}

::selection{
    background: var(--emerald-main);
    color: var(--white);
}

#loading-overlay {
    position: fixed;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    z-index: 250;
    color: var(--emerald-main);
    font-size: 6.4rem;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: translateZ(0);
    animation: load 1.7s infinite ease, round 1.7s infinite ease;
    right: 0.8rem;
}


#loading-overlay.hidden {
    display:none
}

.copyright {
    margin-bottom: 0.5rem;
    color: var(--white);
    padding: 0 0.5rem 0 0.5rem;
}

#alerts {
    font-size: 2rem;
    position: absolute;
    top: 1em;
    margin: auto;
    z-index: 2;
}
  
.alert {
    z-index: 2;
    border-radius: .5rem;
}

.error{
    border-color: var(--danger-main) !important;
    &:focus{
      border-color: var(--danger-main) !important;
    }
}
  
.alert-danger {
    color: var(--white);
    background-color: transparent;
    background-color: var(--danger-main);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;

    border-color: transparent;
}
  
.close {
    color: var(--white);
    opacity: 1;
    font-size: inherit;
    text-shadow: none;
    
    display: flex;
    align-items: center;
    justify-content: center;

}

.btn-close {
  color: var(--white);
  width: 0.4rem;
  height: 0.4rem;

}
  
.alert-warning {
    color: var(--dark-grey);
    background-color: transparent;
    background-color: var(--warning-main);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;

    border-color: transparent;
}

footer {
    font-size: 1.5rem;
    position: absolute;
    margin: auto;
    bottom: 0;
    padding: 1em;
    z-index: 2;  
    text-align: center;
    width: 100%;
}

@media (max-width: 650px) {
    #alerts {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  
    .right-div, .left-div {
      width: 0 !important;
    }
  
    .content {
      display: flex;
      flex: 1;
      justify-content: center;
    }
  
    .wrapper {
      width: 90%;
    }
  
    .wrapper .title{
      font-size: 2rem !important;
    }
}

@media (max-height: 700px) {
    #alerts {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  
    .right-div, .left-div {
      width: 0 !important;
    }
  
    .wrapper .title{
      font-size: 2rem !important;
    }
  
    .content {
      display: flex;
      flex: 1;
      justify-content: center;
    }
  
    .wrapper {
      height: 70%;
    }
  
    footer {
      position: fixed;
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 1em;
      padding-bottom: 0em;
      z-index: 2;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}