body { background:#121212; color:#ddd; font-size:0.8rem; font-weight:400; }
textarea {color:#ccc;}
input {color:#ccc;}
textarea:placeholder-shown {color:#aaa;}
input:placeholder-shown {color:#aaa;}
#particle { position:relative; display:block; width:100vw;height:100vh; overflow:hidden; }
#particle canvas { position:absolute; z-index:1; }
.main { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; overflow:hidden; transition:.4s; }

.login { position:absolute; z-index:1; width:420px; max-width:calc(100vw - 24px); height:auto; top:50%; left:50%; transform: translate(-50%, -50%); overflow:visible; }
.loginForm { position:relative; width:100%; height:100%; }
.loginForm .line { position:absolute; display:block; background:#816632; transition:.3s; opacity:.3; }
.loginForm .line:nth-child(1) { top:0; left:0; width:0; height:1px; }
.loginForm .line:nth-child(2) { top:0; right:0; width:1px; height:0; }
.loginForm .line:nth-child(3) { bottom:0; left:0; width:0; height:1px; }
.loginForm .line:nth-child(4) { bottom:0; top:0; width:1px; height:0; }
.loginStab { width:100%; height:auto; padding:3vh; background:rgba(80,80,80,0.2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(10px); border:1px solid #333; text-align:center; opacity:0; }
.loginLogo { position:relative; margin:0 auto 2vh auto; width:fit-content; }
.loginLogo span { position:absolute; z-index:2; bottom:25px; left:94px; font-size:70%; color:#816632; }
.loginShow { animation: loginComes 1s linear; animation-fill-mode: forwards; }
@keyframes loginComes { 0% { opacity:0; } 100% { opacity:1; } }
.loginGone { animation: loginGones .6s linear; animation-fill-mode: forwards; }
@keyframes loginGones { 0% { opacity:1; } 100% { opacity:0; } }
.loginStab input { width:80%; height:34px; margin:0 auto 1.5vh auto; background-color:transparent; text-align:center; border:1px solid #444; padding:0 .5vw; outline:none; transition:.4s; }
.loginStab input:focus { border:1px solid #666; }
.loginStab input[type=button] { border:0; background:#121212; color:#816632; }
.loginStab input[type=button]:hover { background:#080808; }
.loginStab input:-webkit-autofill,
.loginStab input:-webkit-autofill:hover,
.loginStab input:-webkit-autofill:focus,
.loginStab input:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.loginNote {
    width:80%;
    margin:0 auto 1.5vh auto;
    color:#8a8a8a;
    font-size:76%;
    line-height:1.55;
}

.loginStt {
    min-height:22px;
    width:80%;
    margin:0 auto 1.2vh auto;
    font-size:78%;
    line-height:1.45;
}

.loginForgotBox { display:none; }
.loginForgotBoxOpen { display:block; }

.loginBottom {
    width:80%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.loginLinkBtn {
    color:#8c7140;
    cursor:pointer;
    font-size:74%;
    transition:.2s;
    white-space:nowrap;
}

.loginLinkBtn:hover { color:#b89453; }

.loginLangs { display:flex; align-items:center; justify-content:flex-end; }

.loginLangSelect {
    min-width:68px;
    height:26px;
    border:1px solid #363636;
    background:rgba(18,18,18,.7);
    color:#c19c59;
    font-size:68%;
    font-weight:700;
    letter-spacing:.05em;
    padding:0 8px;
    text-align:center;
    transition:.2s;
}

.loginLangSelect:focus {
    border-color:#7a6130;
    box-shadow:inset 0 0 0 1px rgba(122,97,48,.18);
}

.loginResetMode .loginLogo,
.loginForgotMode .loginLogo {
    margin-bottom:1.4vh;
}

.loginResetMode .loginNote,
.loginForgotMode .loginNote {
    margin-bottom:1.6vh;
}

@media (max-width: 520px) {
    .login {
        width:calc(100vw - 16px);
    }

    .loginStab {
        padding:16px 14px;
    }

    .loginStab input,
    .loginNote,
    .loginStt,
    .loginBottom {
        width:100%;
    }

    .loginBottom {
        flex-wrap:wrap;
        row-gap:8px;
    }
}