html {
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

body {
    height: auto;
    min-height: 100vh;
    width: 100vw;
    position: absolute;
    overflow-x: hidden;
}

h1 {
    font-family: 'Quicksand', sans-serif;
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

.login-button {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #006096;
    background-color: #C2F2FF;
    border-width: 0;
    border-radius: 40px;
}

.login-button:hover {
    background-color: #BCECFF;
    text-decoration: none;
}

.saber-mais {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5rem;
    color: white;
    background-color: #006096;
    border-width: 0;
    border-radius: 40px;
}

.mean-result {
    font-family: 'Roboto';
    font-size: 0.75rem;
    color: white;
    border-color: white;
    border-style: solid;
    background-color: transparent;
    border-width: 1;
    border-radius: 1rem;
    display: inline-block;
    text-align: center;
    height: 2.2rem;
}

::-webkit-scrollbar {
    width: 8px;
    -webkit-appearance: none;
}

::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(35, 31, 32, 0.1); 
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: white; 
}

.slide-enter {
    transform: translate(100%);
}
.slide-enter.slide-enter-active {
    transform: translate(0%);
    transition: transform 1s ease-in-out;
}
.slide-exit {
    transform: translate(0%);
}
.slide-exit.slide-exit-active {
    transform: translate(-100%);
    transition: transform 1s ease-in-out;
}

.slide-back-enter {
    transform: translate(-100%);
}
.slide-back-enter.slide-back-enter-active {
    transform: translate(0%);
    transition: transform 1s ease-in-out;
}
.slide-back-exit {
    transform: translate(0%);
}
.slide-back-exit.slide-back-exit-active {
    transform: translate(100%);
    transition: transform 1s ease-in-out;
}

.fade-enter {
    opacity: 0;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0;
    transition: opacity 300ms ease-in;
}

 input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #C1EAF9 inset !important;
}