.body {
    width: 100%;
    height: 100vh;
    font-family: Gabarito,'Helvetica Neue', sans-serif;
    background-image: url(../Images/Background.png);
    background-size: cover;
    background-position-x: left;
    background-position-y: top;
    display: grid;
    margin: 0;
}


/*:root {
    --color1-: #008c9acc;*/ /* Menu */
    /*--color2-: #bdc92c;*/ /* Hover Menu */
    /*--color3-: #4c306b;*/ /* Header */
    /*--color4-: #b00233;*/ /* Title */
/*}*/


.login {
    display: flex;
    justify-content: left;
    align-self: center;
    margin-left: 6%;
}

    .login .box {
        width: 25%;
        position: relative;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
    }

        .login .box::before {
            content: ' ';
            position: absolute;
            top: 0;
            width: 0;
            height: 100%;
            text-decoration: none;
            border-radius: 8px;
            transform: scaley(0.2);
            transition: all 1s;
        }

        .login .box::after {
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            transform: scaley(0);
            transition: 1s;
            filter: blur(30px);
        }

        .login .box:hover:before,
        .login .box:hover:after {
            transform: scaley(0.8);
            width: 92%;
        }

        .login .box::before,
        .login .box::after {
            background: linear-gradient(315deg, var(--color1-), var(--color3-))
        }

        .login .box .content {
            padding: 20px 40px;
            background: rgba(255, 255, 255, 0.616);
            border-radius: 8px;
            z-index: 1;
            transition: 0.3s;
            color: #2c2c2c;
            display: grid;
        }

            .login .box .content p {
                font-size: 20px;
                color: #2b2b2b;
                font-weight: 10;
                margin: 0;
            }

            .login .box .content .a {
                margin-top: 10px;
                padding: 5px 5px 0 5px;
                background-color: var(--color3-);
                width: 30%;
                border-radius: 3px;
                color: #ffffff;
                text-decoration: none;
                transition: 0.3s;
                justify-self: center;
                text-align: center;
                min-width: 50%;
            }

input {
    font-size: 17px;
    font-family: Gabarito;
    width: 100%;
    background-color: rgb(250, 250, 250);
    border: none;
    border-bottom-style: solid;
    border-bottom-color: var(--color3-);
    border-width: 5px;
    padding: 5px;
    border-radius: 5px;
}

@media screen and (max-width: 1000px) {
    .login .box {
        width: 50%;
    }
}

@media screen and (max-width: 550px) {
    .login .box {
        width: 90%;
    }
}