body, html {
    height: 100%; /* Ensures the html and body elements cover the full viewport height */
    margin: 0; /* Removes default body margin */
}

/* Schermi grandi o ad alta risoluzione */
@media screen and (min-width: 1690px) {
    body {
        margin: 0;
        padding: 0;
        background-image: url(../logo/imglogin_organizadores_screen.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .log-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        height: 100dvh;
        width: 30rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(201,203,203,0.2);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

        .log-box > div {
            display: grid;
            grid-template-rows: 12rem 3rem 8rem 4rem  3rem 4rem;
            width: 100%;
        }

            .log-box > div > div {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

            .log-box > div > div > div {
                width: 100%;
                height: 100%;
            }

    .log-title {
        font-family: var(--fuente);
        font-size: 2rem;
        color: var(--colorWhite);
    }

    .log-logo {
        height: 6rem;
        width: 14rem;
    }

    .log-text {
        height: 3rem;
        width: 100%;
        border: none;
        border-bottom: 0.1rem solid var(--colorWhite);
        background-color: var(--colorWhite);
        font-size: 1rem;
        padding-left: 0.5rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-text::-webkit-input-placeholder {
            color: var(--colorGray);
        }

        .log-text:-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text::-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text:-ms-input-placeholder {
            color: var(--colorGray);
        }


    .log-button {
        display: block;
        height: 3rem;
        width: 100%;
        border: none;
        background-color: var(--colorgreen);
        font-family: var(--fuenteLight);
        font-size: 1.2rem;
        color: var(--colorWhite);
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .log-forget-pwd {
        font-family: var(--fuente);
        font-size: 1rem;
        color: var(--colorWhite);
        text-decoration: none;
    }

        .log-forget-pwd:hover {
            text-decoration: underline;
            color: var(--colorWhite);
        }


    .log-button-new-count {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 10rem;
        border: none;
        background-color: var(--color1);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        color: var(--color4D);
        text-decoration: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-button-new-count:hover {
            color: var(--color4D);
            text-decoration: none;
        }

}

/* Schermi Desktop o Portatili */
@media screen and (min-width: 1280px) and (max-width: 1689px) {
    body {
        margin: 0;
        padding: 0;
        background-image: url(../logo/imglogin_organizadores_screen.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .log-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        height: 100dvh;
        width: 30rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(201,203,203,0.2);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

        .log-box > div {
            display: grid;
            grid-template-rows: 12rem 3rem 8rem 4rem 3rem 4rem;
            width: 100%;
        }

            .log-box > div > div {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

                .log-box > div > div > div {
                    width: 100%;
                    height: 100%;
                }

    .log-title {
        font-family: var(--fuente);
        font-size: 2rem;
        color: var(--colorWhite);
    }

    .log-logo {
        height: 6rem;
        width: 14rem;
    }

    .log-text {
        height: 3rem;
        width: 100%;
        border: none;
        border-bottom: 0.1rem solid var(--colorWhite);
        background-color: var(--colorWhite);
        font-size: 1rem;
        padding-left: 0.5rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-text::-webkit-input-placeholder {
            color: var(--colorGray);
        }

        .log-text:-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text::-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text:-ms-input-placeholder {
            color: var(--colorGray);
        }


    .log-button {
        display: block;
        height: 3rem;
        width: 100%;
        border: none;
        background-color: var(--colorgreen);
        font-family: var(--fuenteLight);
        font-size: 1.2rem;
        color: var(--colorWhite);
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .log-forget-pwd {
        font-family: var(--fuente);
        font-size: 1rem;
        color: var(--colorWhite);
        text-decoration: none;
    }

        .log-forget-pwd:hover {
            text-decoration: underline;
            color: var(--colorWhite);
        }


    .log-button-new-count {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 10rem;
        border: none;
        background-color: var(--color1);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        color: var(--color4D);
        text-decoration: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-button-new-count:hover {
            color: var(--color4D);
            text-decoration: none;
        }
}

/* Tablet in modalità horizontal */
@media screen and (min-width: 737px) and (max-width: 1279px) {
    body {
        margin: 0;
        padding: 0;
        background-image: url(../logo/imglogin_organizadores_phone.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 100%;
    }

    .log-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        height: 100dvh;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(201,203,203,0.2);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

        .log-box > div {
            display: grid;
            grid-template-rows: 12rem 3rem 8rem 4rem 3rem 4rem;
            width: 100%;
        }

            .log-box > div > div {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

                .log-box > div > div > div {
                    width: 100%;
                    height: 100%;
                }

    .log-title {
        font-family: var(--fuente);
        font-size: 2rem;
        color: var(--colorWhite);
    }

    .log-logo {
        height: 6rem;
        width: 14rem;
    }

    .log-text {
        height: 3rem;
        width: 100%;
        border: none;
        border-bottom: 0.1rem solid var(--colorWhite);
        background-color: var(--colorWhite);
        font-size: 1rem;
        padding-left: 0.5rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-text::-webkit-input-placeholder {
            color: var(--colorGray);
        }

        .log-text:-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text::-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text:-ms-input-placeholder {
            color: var(--colorGray);
        }


    .log-button {
        display: block;
        height: 3rem;
        width: 100%;
        border: none;
        background-color: var(--colorgreen);
        font-family: var(--fuenteLight);
        font-size: 1.2rem;
        color: var(--colorWhite);
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .log-forget-pwd {
        font-family: var(--fuente);
        font-size: 1rem;
        color: var(--colorWhite);
        text-decoration: none;
    }

        .log-forget-pwd:hover {
            text-decoration: underline;
            color: var(--colorWhite);
        }


    .log-button-new-count {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 10rem;
        border: none;
        background-color: var(--color1);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        color: var(--color4D);
        text-decoration: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-button-new-count:hover {
            color: var(--color4D);
            text-decoration: none;
        }
}

/* Tablet in modalità verticale */
@media screen and (min-width: 481px) and (max-width: 736px) {
    body {
        margin: 0;
        padding: 0;
        background-image: url(../logo/imglogin_organizadores_phone.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 100%;
    }

    .log-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        height: 100dvh;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(201,203,203,0.2);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

        .log-box > div {
            display: grid;
            grid-template-rows: 12rem 3rem 8rem 4rem 3rem 4rem;
            width: 100%;
        }

            .log-box > div > div {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

                .log-box > div > div > div {
                    width: 100%;
                    height: 100%;
                }

    .log-title {
        font-family: var(--fuente);
        font-size: 2rem;
        color: var(--colorWhite);
    }

    .log-logo {
        height: 6rem;
        width: 14rem;
    }

    .log-text {
        height: 3rem;
        width: 100%;
        border: none;
        border-bottom: 0.1rem solid var(--colorWhite);
        background-color: var(--colorWhite);
        font-size: 1rem;
        padding-left: 0.5rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-text::-webkit-input-placeholder {
            color: var(--colorGray);
        }

        .log-text:-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text::-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text:-ms-input-placeholder {
            color: var(--colorGray);
        }


    .log-button {
        display: block;
        height: 3rem;
        width: 100%;
        border: none;
        background-color: var(--colorgreen);
        font-family: var(--fuenteLight);
        font-size: 1.2rem;
        color: var(--colorWhite);
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .log-forget-pwd {
        font-family: var(--fuente);
        font-size: 1rem;
        color: var(--colorWhite);
        text-decoration: none;
    }

        .log-forget-pwd:hover {
            text-decoration: underline;
            color: var(--colorWhite);
        }


    .log-button-new-count {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 10rem;
        border: none;
        background-color: var(--color1);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        color: var(--color4D);
        text-decoration: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-button-new-count:hover {
            color: var(--color4D);
            text-decoration: none;
        }
}

/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {

    body {
        margin: 0;
        padding: 0;
        background-image: url(../logo/imglogin_organizadores_phone.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height: 100%;
    }

    .log-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
        height: 100dvh;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(201,203,203,0.2);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

        .log-box > div {
            display: grid;
            grid-template-rows: 12rem 3rem 8rem 4rem 3rem 4rem;
            width: 100%;
        }

            .log-box > div > div {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

                .log-box > div > div > div {
                    width: 100%;
                    height: 100%;
                }

    .log-title {
        font-family: var(--fuente);
        font-size: 2rem;
        color: var(--colorWhite);
    }

    .log-logo {
        height: 6rem;
        width: 14rem;
    }

    .log-text {
        height: 3rem;
        width: 100%;
        border: none;
        border-bottom: 0.1rem solid var(--colorWhite);
        background-color: var(--colorWhite);
        font-size: 1rem;
        padding-left: 0.5rem;
        color: var(--colorBlack);
        font-family: var(--fuenteLight);
        font-weight: 300;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-text::-webkit-input-placeholder {
            color: var(--colorGray);
        }

        .log-text:-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text::-moz-placeholder {
            color: var(--colorGray);
        }

        .log-text:-ms-input-placeholder {
            color: var(--colorGray);
        }


    .log-button {
        display: block;
        height: 3rem;
        width: 100%;
        border: none;
        background-color: var(--colorgreen);
        font-family: var(--fuenteLight);
        font-size: 1.2rem;
        color: var(--colorWhite);
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

    .log-forget-pwd {
        font-family: var(--fuente);
        font-size: 1rem;
        color: var(--colorWhite);
        text-decoration: none;
    }

        .log-forget-pwd:hover {
            text-decoration: underline;
            color: var(--colorWhite);
        }


    .log-button-new-count {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 10rem;
        border: none;
        background-color: var(--color1);
        font-family: var(--fuenteLight);
        font-size: 0.9rem;
        color: var(--color4D);
        text-decoration: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }

        .log-button-new-count:hover {
            color: var(--color4D);
            text-decoration: none;
        }
}