body {
    margin: 0;
    padding: 0;
    color: white;
    background-color: black;
}

/* Background Start */

#background-front {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 67, 115, 0.30) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(.599vw);
}

#background {
    width: 100%;
    height: 100%;
    top: 0;

    background-image: url(../img/background.png);
    

    position: absolute;
    z-index: -2;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Background End */

/* Page Content Start */

#page-content-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    text-align: center;
    font-family: "SF Pro Display";
}

#page-content-container #page-title {
    font-weight: 700;
    font-size: 2.0833vw;
}

#login-form {
    display: flex;
    flex-direction: column;
    text-align: start;
    align-items: center;
}

#login-form #input-container p {
    margin: 0;
    font-size: .7813vw;
    font-weight: 700;
}

#login-form #input-container input {
    padding: 0.9259vh;
    width: 29.1667vh;
    height: 2.3148vh;
    border-radius: .5208vw;
    border: 0;
    background-color: rgba(1, 201, 228, 0.20);
    color: white;
    font-family: "SF Pro Display";
}

#login-form #input-container input.error {
    background-color: rgba(228, 1, 1, 0.20);
}

#input-container input::placeholder {
    color: rgba(255, 255, 255, 0.30);
    font-size: .7552vw;
    font-weight: 400;
    display: flex;
    justify-content: center;
}

#login-form #forgot-password-span {
    width: 30.8333vh;
    font-size: .625vw;
    font-family: "SF Pro Display Thin";
}

#login-form #sign-in-button {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;

    width: 30.0926vh;
    height: 4.1667vh;
    border-radius: .5208vw;
    background: linear-gradient(180deg, rgba(254, 200, 241, 0.90) 0%, rgba(237, 146, 215, 0.00) 40.39%), radial-gradient(137.13% 253.39% at 76.68% 66.67%, #2B8F9C 0%, #01C9E4 100%);
    cursor: pointer;
    box-shadow: 0px 0px 1.5625vw #01C9E4;
}

#login-form #sign-in-button #sign-in-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29.9074vh;
    height: 3.8889vh;
    border-radius: .5208vw;
    background-color: #01C9E4;
    background-blend-mode: overlay, normal;
    font-size: .8854vw;

    gap: .5208vw;
}

#login-form #discord-login-button {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;

    width: 30.0926vh;
    height: 4.1667vh;
    border-radius: .5208vw;
    box-shadow: 0px 0px 1.5625vw #5865F2;
    background: #5865F2;
    
    font-size: .8854vw;
    font-weight: 700;
    cursor: pointer;
    
}

#discord-login-button #discord-logo {
    margin-right: 1.8981vh;
    width: .9896vw;
    height: .7813vw;
    background-image: url(img/discord.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#or-container {
    margin-top: 2.7778vh;
    width: 16.6667vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.50);
    font-size: .7813vw;
    font-weight: 500;
}

#or-container #or-line {
    height: auto;
    width: 50%;
    display: flex;
    justify-content: center;
}

#or-line #line {
    border: .0521vw solid rgba(255, 255, 255, 0.20);
    width: 12.963vh;
}

input:focus {
    outline: none;
}

/* Page Content End */