:root {
    --corner-radius: 20px;
}

body {
    background: linear-gradient(-315deg, var(--aq-main-colour), var(--aq-secondary-colour));
    height: 100%;
}

#login-div {
    background-color: white;
    padding: 120px 70px;
    border-radius: var(--corner-radius);
    box-shadow: rgb(0 0 0 / 46%) 0px 10px 46px 0px;
}

#logo-div {
    padding-right: 50px;
}

#logo {
    width: 500px;
}

#padlock-logo {
    width: 160px;
}

header {
    display: none;
}

#renderMainBody {
    height: 100vh;
}

.login-button {
    border-radius: var(--corner-radius);
    height: 45px;
}

@media only screen and (max-width: 768px) {
    #login-div {
        padding: 50px;
    }

    #logo-div {
        padding: 0px 5px 20px 5px;
    }

    #logo {
        height: 100px;
        width: auto;
    }
}

#microsoft-login {
    background-color: #f1f1f1;
    border-color: #7a7a7a;
    color: black;
}

    #microsoft-login > i {
        font-size: 18px;
    }

    #microsoft-login:hover {
        background-color: #7a7a7a;
    }