/*-- Login Styles --*/
.--user_login .header{
    position:fixed;
    width:100%;
    top:0;
    background-color:transparent;
    border-bottom:0;
    padding:0;
}
.login-header{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-bottom:3.125rem;
}
.logo .hataraki-mouse-logo{
    width:clamp(16.25rem,13.16vi + 12.96rem,28.75rem);
}
h2{
    margin-bottom:clamp(.938rem,1.66vi + .55rem,1.875rem);
}
.form-group{
    margin-bottom:1.25rem;
}
.form-group label{
    display:block;
    margin-bottom:0;
}
.form-group input,
.form-group textarea{
    font-size:1rem;
    width:100%;
    padding:.625rem;
    border:.063rem solid var(--primary-color);
}
.password-input-container{
    position:relative;
}
.password-toggle{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    right:.625rem;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    user-select:none;
    width:1.25rem;
    height:1.25rem;
    transition:background-color 0.2s ease;
}
.login-btn{
    width:200px;
    margin:0 auto;
    padding:.625rem;
    background-color:var(--primary-color);
    color:var(--white);
    border:none;
    border-radius:2.5rem;
    cursor:pointer;
}
.login-btn:hover {
    background-color:var(--brown);
}
.login-links{
    margin-top:1.25rem;
}
.login-links a{
    display:block;
    margin:5px 0;
}
.register-info{
    font-size:var(--fs-sm);
    font-style:italic;
    margin-top:.938rem;
    color:var(--purple-sub);
}
.register-info a{
    display:inline-block;
    text-decoration:underline;
}
.login-message{
    padding:.625rem;
    margin-bottom:1.25rem;
}
.login-message.approved,
.success-message{
    background-color:#d4edda;
    color:var(--success-color);
    border:.063rem solid var(--success-color);
}
.login-message.pending,
.login-message.invalid,
.error-message{
    background-color:#f8d7da;
    color:var(--error-color);
    border:.063rem solid var(--error-color);
}
.login-message.logout{
    background-color:#d4edda;
    color:var(--success-color);
    border:.063rem solid var(--success-color);
    animation:fadeIn .3s ease-in;
}
.form-checkbox input{
    width:1.25rem;
    height:1.25rem;
}
.form-checkbox label{
    display:flex;
    align-items:center;
    gap:.625rem;
    width:12.5rem;
    margin-bottom:0;
}
.login-form-wrapper .flex > div:nth-of-type(2){
    display:none;
}
.animated-content {
    position:relative;
    width:100%;
    height:100%;
    min-height:28.125rem;
    background:linear-gradient(25deg,var(--white) 40%,transparent 41%,transparent 59%,var(--white) 60%),linear-gradient(90deg,transparent 45%,var(--gray-dark) 45%,var(--gray-dark) 55%,transparent 55%,transparent 20%,var(--gray-dark) 20%,var(--gray-dark) 30%,transparent 30%),linear-gradient(90deg,var(--gray-dark) 9%,transparent 10%);
    background-size:1rem 1rem;
    background-color:var(--white);
    border-radius:1.25rem;
    overflow:hidden;
    animation:cascade 5s ease-in-out infinite;
}
.animated-mouse{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:100%;
    height:100%;
    z-index:2;
}
.animated-mouse::before{
    content:'';
    display:inline-block;
    position:absolute;
    width:240px;
    height:287px;
    right:0;
    bottom:-1.25rem;
    left:0;
    margin:auto;
    background:url(../img/top/animation_breaking.gif) center / cover no-repeat;
}
.home-link{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.625rem;
    line-height:1;
}
.home-link .home-icon{
    width:1.25rem;
}
/*-- media query 80rem --*/
@media screen and (min-width:80rem){
    .login-form-wrapper .flex{
        flex-direction:row;
        gap:3.75rem;
    }
    .login-form-wrapper .flex > div{
        width:50%;
    }
    .login-form-wrapper .flex > div:nth-of-type(2){
        display:block;
    }
    .form-group{
        display:flex;
        gap:1.25rem;
    }
    .form-group dt{
        flex-shrink:0;
        width:11.25rem;
    }
    .form-group dd{
        flex-basis:auto;
        width:100%;
    }
    .login-header{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
}
/*-- keyrames --*/
@keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes movePattern {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 1rem 1rem, -1rem 0, 1rem -1rem;
  }
}
@keyframes flowDown {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1rem;
  }
}
@keyframes flowDownDiagonal {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0.5rem 1rem;
  }
}
@keyframes cascade {
  0% {
    background-position: 0 -1rem, 0 0, 0 0.5rem;
  }
  100% {
    background-position: 0 1rem, 0 2rem, 0 2.5rem;
  }
}
@keyframes drift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 2rem;
  }
}