@font-face {font-family: "SF Pro Rounded"; src: url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.eot"); src: url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.woff") format("woff"), url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ead4092f880f75ff0883ced1856b2c37.svg#SF Pro Rounded") format("svg"); }
@font-face {font-family: "SF Pro Display"; src: url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.eot"); src: url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.woff") format("woff"), url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/3cff9206b4c8d578245ef1aaeeaf9e84.svg#SF Pro Display") format("svg"); }
@font-face {font-family: "SF Pro Display Thin"; src: url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.eot"); src: url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.woff") format("woff"), url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/70c38766a71f8f7f0a477605da15fcd3.svg#SF Pro Display") format("svg"); }

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);
    
    filter: blur(.599vw);
    backdrop-filter: blur(.599vw);
    -webkit-filter: blur(.4167vw);

    position: absolute;
    z-index: -2;

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

/* Background End */

/* Pages Content Start */

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

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

#page-content-container #sign-up-container {
    border-radius: 1.0417vw;
    display: flex;
    flex-direction: row;

    width: 98.7963vh;
    height: 72.7778vh;
    border: .1042vw solid #1f646d;
    background-color: rgba(31, 100, 109, 0.46);
}

#sign-up-container.complete {
    background-image: url(img/SignUpCompleteBg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}

#sign-up-container.complete #center-content {
    width: 30.0926vh;
    height: 100%;

    display: flex;
    justify-content: center;
    flex-direction: column;
}

#sign-up-container.complete #center-content span {
    text-align: center;
    font-size: 3.7037vh;
    color: white;
    opacity: 0.7;

    margin-bottom: 6.6667vh;
    margin-top: 6.6667vh;
}

#center-content #lets-go-button {
    background-image: url(img/LetsGoButton.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 4.1667vh;

    border-radius: .5208vw;
    box-shadow: 0px 0px 1.5625vw #01C9E4;

    cursor: pointer;
}

#sign-up-container #page-seperate {
    width: 50%;
    height: 72.7778vh;

    display: flex;
    flex-direction: column;
}

#sign-up-container #page-seperate.left-page {
    border-top-left-radius: 0.89vw;
    border-bottom-left-radius: 0.89vw;
    background-image: url(../img/background.png);
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
}

#sign-up-container #page-seperate.right-page {
    border-top-right-radius: 0.89vw;
    border-bottom-right-radius: 0.89vw;
    background-color: rgba(31, 100, 109, 0.46);
    backdrop-filter: blur(2.3177vw);
    justify-content: center;
    align-items: center;
}

#page-seperate.left-page #with-border {
    width: 44.7222vh;
    height: 68.1481vh;
    border: .0521vw solid rgba(255, 255, 255, 0.12);
    border-radius: .9375vw;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Left Page Start */

#with-border #panelLogo {
    margin-top: 1.5625vw;
    background-image: url(img/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 2.5521vw;
    height: 2.2917vw;
    cursor: pointer;
    position: absolute;
    color: transparent;
    text-align: center;
    align-items: center;
    text-shadow: 0px 0px 1.5625vw #1dd6ef;
    font-size: 1.0417vw;
}

#with-border #left-description {
    margin-top: 28.3333vh;
    text-align: center;
    font-size: 2.0833vw;
    width: 40.2778vh;
}

#with-border #left-footer {
    position: absolute;
    bottom: 9.1146vw;
    color: rgba(255, 255, 255, 0.49);
    font-family: 'SF Pro Display Thin';
    font-size: .7813vw;
}

/* Left Page End */

/* Right Page Start */

#page-seperate.right-page #x-button {
    margin-right: 1.0417vw;
    margin-top: 1.0417vw;
    gap: .5208vw;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    padding: .5208vw;
    background: linear-gradient(180deg, rgba(1, 201, 228, 0.90) 3.34%, rgba(1, 201, 228, 0.00) 57.67%), radial-gradient(137.13% 253.39% at 76.68% 66.67%, #205C64 0%, #01C9E4 100%);
    background-blend-mode: overlay, normal;
    box-shadow: 0px 0px .2604vw 0px #FFACE4 inset, 0px -0.0521vw .4167vw 0px #9375B6 inset;
    border-radius: 1.5625vw;
    cursor: pointer;
    resize: both;
}

#light-right-page {
    position: absolute;
    width: 49.3519vh;
    pointer-events: none;
}

#light-right-page.top-light {
    top: 0;
    border-top-right-radius: .9375vw;
}

#light-right-page.bottom-light {
    bottom: 0;
    border-bottom-right-radius: .9375vw;
}

#page-seperate.right-page #right-page-content {
    width: 16.9271vw;
    height: auto;

    display: flex;
    flex-direction: column;
    text-align: start;
}

#right-page-content #page-title {
    font-size: 2.0833vw;
}

#right-page-content #page-description {
    margin-top: 1.5625vw;
    font-size: .7813vw;
    font-family: "SF Pro Display Thin";
    opacity: 0.69;
}

#right-page-content input {
    padding: .5208vw;
    width: 16.0063vw;
    height: 1.2917vw;
    border-radius: .5208vw;
    border: 0;
    background-color: rgba(1, 201, 228, 0.20);
    color: white;
    font-family: "SF Pro Display";
}

#right-page-content input.error {
    background-color: rgba(173, 173, 173, 0.20);
}

#right-page-content input::placeholder {
    color: rgba(255, 255, 255, 0.30);
    font-size: .7552vw;
    font-family: "SF Pro Display Thin";
}

#right-page-content #server-type-selection {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#server-type-selection #selectable-item {
    width: 8.0729vw;
    height: 2.2917vw;

    font-family: "SF Pro Display Thin";
    color: rgba(255, 255, 255, 0.30);
    font-size: .7552vw;

    border-radius: .5208vw;
    background-color: rgba(1, 201, 228, 0.20);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;

    transition: 0.3s;
}

#right-page-content #sign-up-button {
    margin-top: 2.0833vw;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;

    width: 16.9271vw;
    height: 2.3438vw;
    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;
}

#right-page-content #sign-up-button #sign-up-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.8229vw;
    height: 2.1875vw;
    border-radius: .5208vw;
    background-color: #01C9E4;
    background-blend-mode: overlay, normal;
    font-size: .8854vw;

    gap: .5208vw;
}

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

    width: 16.9271vw;
    height: 2.3438vw;
    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.0677vw;
    width: .9896vw;
    height: .7813vw;
    background-image: url(img/discord.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#or-container {
    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: 7.2917vw;
}

input:focus {
    outline: none;
}

/* Rigth Page End */

/* Pages Content End */