@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Montserrat-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

*{padding: 0px; margin: 0px; list-style: none; border: 0px; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-modify: read-only; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: 'Montserrat';}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

* { animation: fade-in 0.5s ease-in-out; }

html { height: 100%; }
body { height: 100%; display: none; min-height: 100vh;}

@media only screen and (min-width: 770px){

    body {
        display: grid;
        place-items: center;
        -webkit-user-select: none;
        transform-origin: 0 0;
        user-select: none;
        background: linear-gradient(to top, #ecf3ff 60%, #bcd5fc);
        background-attachment: fixed;
    }

    #box{
        min-width: 370px;
        width: 500px;
        padding: 0 25px;
    }
}

#box .logo{
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}
#box .logo img{width: 200px;}

#box .campos{background: transparent; width: 100%; font-size: 18px; color: #000000;}

#box .button{text-align: center;}
#box .button .bt{border-radius: 28px; margin: 25px 0; background: #141876; padding: 18px 0; border: 0px; letter-spacing: 2px; cursor: pointer; color: #ffffff; width: 60%;}

#box .filds{
    margin-top: 22px;
    padding: 16px;
    background: #cee0ff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
#box .filds ion-icon {
    font-size: 25px; /* Ajuste o tamanho do ícone conforme necessário */
}

#box .footer{
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

#box .footer span{
    cursor: pointer;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media only screen and (min-width: 370px) and (max-width: 540px){

    body {
        display: grid;
        place-items: center;
        -webkit-user-select: none;
        transform-origin: 0 0;
        user-select: none;
        background: linear-gradient(to top, #ecf3ff 60%, #bcd5fc);
        background-attachment: fixed;
    }

    #box{
        min-width: 370px;
        width: 100%;
        padding: 0 25px;
    }
}

@media only screen and (min-width: 541px) and (max-width: 769px){

    body {
        display: grid;
        place-items: center;
        -webkit-user-select: none;
        transform-origin: 0 0;
        user-select: none;
        background: linear-gradient(to top, #ecf3ff 60%, #bcd5fc);
        background-attachment: fixed;
    }

    #box{
        min-width: 370px;
        width: 540px;
        padding: 0 25px;
    }
}