*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}

.app{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fffc00;

}
.app .top{
    flex:1;
    background-color: #fffc00;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app .bottom{
    flex:2;
    background-color: #f7f8f9;
    border-radius: 1rem 1rem 0 0;
    padding: 1rem 2rem;
}
.app h2{font-weight: normal;font-size: 1.1rem;margin-top: 7px;}

.app form{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;


}
.app form .input{
    display: flex;
    flex-direction: column;
}
.app form input{
    width: 100%;outline:none;border:none;
    box-shadow:0 1px 4px 0 rgba(0,0,0,.1);
    border-radius: 14px;
    padding: 15px 24px;
    margin: 10px 0 1rem 0;
}

.app button{
    outline:none;
    border: none;
    border-radius: 10px;
    background-color: #fffc00;
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    color:black;
}

.app h2{font-weight: normal;font-size: 1.1rem;margin-top: 7px;}

    .tru{
    display:none;
    flex-direction:column;
}
.tru .profil{
    width:100%;
    display:flex;
}
.tru .profil img{
width: 50px;
margin-right:10px;

}
.tru .profil .right{
    display:flex;
    flex-direction:column;
}
.tru .profil .right #pseudo{font-weight:bold;}

#terminal{
 width:100%;
 flex-direction:column;
 background:black;
 color:white;
margin:1rem 0;
padding:7px;
font-size:.7rem;
}
                .input-shake {
            animation: shake 0.3s;
            border: 2px solid red;
        }

        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }
        
         .fade {
            transition: opacity 250ms ease-in-out;
        }

        .hidden {
            display: none;
        }

        .visible {
            display: flex;
            opacity: 1;
        }

        .hidden-to-visible {
            display: flex;
            opacity: 0;
        }

        .fade.visible {
            opacity: 1;
        }
        #captcha{
            display:none;
        }
        .blinking {
    color: #0f0;
    font-weight: bold;
    animation: blink 1s step-start 0s infinite;
    
}

button{color:black;}
#captcha{text-decoration:none;}

@keyframes blink {
    0% { color: #0f0 }
    50% { color:#0e0 }
    100% { color:#0f0 }
}