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; height:fit-content; top:50%; left:50%; transform: translate(-50%, -50%); transition:.3s; overflow:hidden; }
.loginForm { position:relative; width:100%; height:100%; transition:.3s; }
.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:100%; padding:24px 24px 18px; 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 12px 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 12px;
    color: #7d7d7d;
    font-size: 76%;
    line-height: 1.55;
}

.loginBottom {
    width: 80%;
    margin: 2px auto 0;
    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: 72px;
    height: 26px;
    border: 1px solid #363636;
    background: rgba(18,18,18,.7);
    color: #c19c59;
    transition: .2s;
    font-size: 68%;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 0 8px;
    text-align: center;
}

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

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

.loginForgotBox {
    display: none;
}

.loginForgotBoxOpen {
    display: block;
}

.loginResetMode .loginLogo,
.loginForgotMode .loginLogo {
    margin-bottom: 14px;
}

.loginResetMode .loginNote,
.loginForgotMode .loginNote {
    margin-bottom: 14px;
}