body {
    background-color: #F2FFEA;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Libre Bodoni", serif;

    color: #162D06;
}

.welcome-logo {

    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    h1 {
        position: absolute;
        left: 10000000px;
    }

    .welcome-background {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        position: absolute;
        left: -8px;
        right: -8px;

        .background-photo {

            position: relative;
            height: 100vh;
            min-width: 100%;

            img {
                min-width: 100%;
                height: 100vh;
                object-fit: cover;
            }
        }
    }

    .framed-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;

        background-color: #F2FFEA;
        border-radius: 25px;

        .logo-inside-frame {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            width: min(calc(100vw * 0.4427), 850px);
            height: min(calc(100vw * 0.2604), 500px);
            aspect-ratio: 1.7 / 1;

            min-width: 400px;
            min-height: 350px;

            border-radius: 10px;
    
            .login-form {

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;
                margin-top: clamp(25px, 5vw, 0px);

                .login-form-username, .login-form-password {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    width: 300px;

                    color: #162D06;

                    label {

                        font-family: "Libre Bodoni", serif;
                        font-weight: normal;

                        font-size: clamp(13px, 2.5vw, 20px);
                    }

                    input {
                        background-color: white;
                        border-radius: 10px;
                        padding: 10px;
                        border: none;
                        font-size: clamp(6px, 2.5vw, 12px);

                        color: #162D06;
                        font-family: "Libre Bodoni", serif;
                        font-weight: normal;

                        box-shadow: 2px 2px 10px 2px rgba(2, 101, 19, 0.154);
                    }
                }

                .login-button {
                    
                    font-family: "Libre Bodoni", serif;

                    margin-top: clamp(20px, 5vw, 50px);
                    background-color: #8DC892;
                    box-shadow: 2px 2px 10px 2px rgba(2, 101, 19, 0.154);
                    border-radius: 25px;

                    padding: 5px;
                    padding-left: 50px;
                    padding-right: 50px;
                    padding-top: 7px;
                    padding-bottom: 7px;

                    border: none;

                    color: #162D06;
                    font-weight: bold;

                    font-size: clamp(9px, 2.5vw, 15px);

                    &:hover {
                        transform: scale(1.1);
                        transition: 0.25s;

                        font-size: clamp(12px, 2.5vw, 17px);
                        cursor: pointer;

                        background-color: #a5eb77;

                        background-image: linear-gradient(to bottom, rgba(75, 106, 55, 0.65), rgba(75, 106, 55, 0.65)),url(/MEDIA/background/backgroundleafes.png);
                        background-size: 100%;

                        color: white;
                    }
                }

                .gobackbutton {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 15px;
                    

                    a {
                        padding: 7px;
                        padding-right: 10px; 
                        padding-left: 10px;
                        background-color: #F39994;
                        border-radius: 25px;

                        color: #162D06;
                        text-decoration: none;
                        font-weight: bold;

                        font-family: "Libre Bodoni", serif;

                        font-size: clamp(9px, 2.5vw, 15px);

                        i {
                            display: none;
                            margin-right: 7px;
                            font-size: clamp(9px, 2.5vw, 15px);
                        }
                    }

                    &:hover {
                        a {
                            transform: scale(1.2);
                            transition: 0.25s;

                            background-color: #a5eb77;

                            background-image: linear-gradient(to bottom, rgba(75, 106, 55, 0.65), rgba(75, 106, 55, 0.65)),url(/MEDIA/background/backgroundleafes.png);
                            background-size: 200%;

                            color: white;
                        } 

                        i {
                            display: inline;
                        }
                    }
                }
            }
        }
    }

}