@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

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

body {
    min-height: 100dvh;
    background: linear-gradient(135deg, #123651, #0d5496, #346597, #3976b2);
}

#blocks {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100dvh;
}

#login-container {
    display: grid;
    padding: 20px;
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    background-color: #f9f9f9;
    grid-template-columns: 1fr 1fr;
    width: clamp(300px, 90vw, 800px);
    height: clamp(400px, 90dvh, 800px);
    gap: 20px;
}

#welcome {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    padding: 20px;
    position: relative;
    border-radius: 30px;
    background-color: #0d5496;
}

#welcome p {
    color: white;
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 300;
}

#backgroundLogin {
    width: auto;
    height: 95%;
    display: block;
    opacity: 0.35;
    position: absolute;
    right: -50%;
    mix-blend-mode: difference;
}


#login-container #login {
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 40px 0px 0px 0px;
}

#login-container #login .infos {
    width: 80%;
    padding: 15px;
    font-size: 16px;
    margin: 10px 0px;
    border-radius: 15px;
    border: 1px solid #18476b;
}

#login-container #login .infos::placeholder {
    color: #18476b;
}

#login-container #login .infos:focus {
    outline: 1px solid #18476b;
}

#login-container #login #password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

#login-container #login #password-container #password-icon {
    right: 50px;
    top: -5px;
    width: 25px;
    position: absolute;
    cursor: pointer;
}

#login-container #login #password-container #password-icon img {
    width: 100%;
}

#login-container #login #entrar {
    border: none;
    width: 50%;
    height: auto;
    color: white;
    padding: 18px 0px;
    border-radius: 15px;
    background-color: #18476b;
    margin: 20px 0px 5px 0px;
    cursor: pointer;
    transition: 0.3s ease;
}

#login-container #login #entrar:hover {
    transform: scale(1.1);
}

#login-container #login #ajuda {
    color: #18476b;
    font-weight: 300;
    font-size: 13px;
    margin: 15px 0px 0px 0px;
}

#login-container #login #ajuda a {
    color: #18476b;
    font-weight: 600;
    text-decoration: none;
}

#login-container #login #esqueceu {
    color: #18476b;
    font-weight: 300;
    font-size: 13px;
    text-decoration: none;
}

#login-container #login #pp {
    display: flex;
    transition: 0.25s;
    width: 100%;
    gap: 10px;
    align-items: center;
    position: absolute;
    bottom: 0;
    font-weight: 300;
    justify-content: center;
    font-size: 14px;
}

#login-container #login #pp img {
    width: 15px;
}

#login-container #login img {
    margin: 30px 0px;

    width: 30%;
}

#login-container #login form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login-container #login #conectado {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #18476b;
}

#login-container #login #conectado input {
    transform: scale(1.2);
    border: 1px solid #18476b;
}

#login-container #login #conectado input:checked {
    background: #18476b;
}

.avisoChar {
    color: rgb(180, 12, 12);
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    display: none;
}

.avisoLog {
    color: rgb(180, 12, 12);
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    display: none;
}


#background .ball {
    position: fixed;
    width: 40vh;
    height: 40vh;
    border-radius: 100%;
    padding: 0;
    box-shadow: 0px 0px 120px 50px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ea7a4e 1%,

            #c36b69 2%,

            #9c5b83 5%,

            #754c9e 12%,

            #4646af,

            #0d20ae,

            #121d76);
    opacity: 0.5;
    z-index: 0;
}


#background .ball.x1 {
    offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
    offset-rotate: 0deg;
    animation: mover 6s linear infinite;
}

#background .ball.x2 {
    offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
    offset-rotate: 0deg;
    animation: mover 3s linear infinite;
}

#background .ball.x3 {
    offset-path: path("M12,0 A12,12 0 1,1 12,24 A12,12 0 1,1 12,0");
    offset-rotate: 0deg;
    animation: mover 3s linear infinite;
}

#background .ball.x4 {
    offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
    offset-rotate: 0deg;
    animation: mover 7s linear infinite;
}

#background .ball.x5 {
    offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
    offset-rotate: 0deg;
    animation: mover 3s linear infinite;
}

#background .ball.x6 {
    offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
    offset-rotate: 0deg;
    animation: mover 5s linear infinite;
}

#background .ball.x7 {
    offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
    offset-rotate: 0deg;
    animation: mover 6s linear infinite;
}

#background .ball.x8 {
    offset-path: path("M-12,0 A-12,-12 0 1,1 -12,-24 A-12,-12 0 1,1 -12,0");
    offset-rotate: 0deg;
    animation: mover 3s linear infinite;
}

#background .ball.x9 {
    offset-path: path("M12,0 A12,12 0 0,0 12,24 A12,12 0 0,0 12,0");
    offset-rotate: 0deg;
    animation: mover 7s linear infinite;
}

@keyframes mover {
    0% {

        offset-distance: 0%;

    }



    50% {

        offset-distance: 50%;

    }



    100% {

        offset-distance: 100%;

    }
}


@media only screen and (max-width: 600px) {
    #blocks {
        align-items: flex-start;
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
}

@media only screen and (max-width: 600px) {
    #login-container {
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: none;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login {
        padding: 100px 0px 24px 0px;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login #pp {
        position: static;
        margin-top: 20px;
        padding-bottom: 8px;
    }
}

@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
    }
}

@supports (-webkit-touch-callout: none) {

    body,
    #blocks,
    #background {
        min-height: -webkit-fill-available;
    }
}

@supports (-webkit-touch-callout: none) {
    #background .ball {
        position: absolute;
    }
}


@media only screen and (max-width: 600px) {
    #blocks {
        align-items: flex-start;
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
}

@media only screen and (max-width: 600px) {
    #login-container {
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: none;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login {
        padding: 100px 0px 24px 0px;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login #pp {
        position: static;
        margin-top: 20px;
        padding-bottom: 8px;
    }
}

@media only screen and (max-width: 600px) {
    #login-container {
        width: 85%;
        min-width: 320px;
        height: 90vh;
        min-height: 90vh;
        min-height: fit-content;
        max-width: 500px;
        grid-template-columns: 100%;
        overscroll-behavior-y: contain;
    }
}

@media only screen and (max-width: 600px) {
    #login-container img#backgroundLogin {
        top: 90px;
        left: 80px;
        width: 100%;
        opacity: 0.1;
        position: absolute;
        z-index: -1;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #backgroundLoginCopy {
        position: absolute;
        height: fit-content;
        width: fit-content;
        display: block;
        top: 40px;
        left: 40px;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #backgroundLoginCopy p {
        font-size: 20px;
        color: #18476b;
        font-weight: 500;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #welcome {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login {
        padding: 100px 0px 0px 0px;
    }
}

@media only screen and (max-width: 600px) {
    #login-container #login .infos {
        border-radius: 10px;
    }
}