:root{
    --clr-1: #61356d;
    --clr-2: #35416d;
    --clr-3: #416d35;
    --clr-4: #6d6135;
}
*, ::after{
    box-sizing: border-box;
}
html{
    font-size: 20px;
}
body{
    height:100vh;
    margin:0;
    font-family: roboto;
    background-color: var(--clr-1);
    color:#fff;
}

main{
    width:100%;
    height:100%;
    flex-direction: column;
}
#title{
    position:relative;
}
h1{
    font-size:2.2rem;
    text-align:center;
}
#explain{
    width:2rem;
    height:2rem;
    margin-left: .4rem;
    border-radius:50%;
    align-content:center;
    text-align:center;
    font-weight:600;
    background-color:var(--clr-2);
    cursor: pointer;
    box-shadow: .1rem .1rem .2rem var(--clr-4);
    border: 1px solid #000;
}
#explain:hover{
    font-size:1.2rem;
}
#explain-text{
    display:none;
    position:absolute;
    width:10rem;
    text-align:center;
    right:0;
    top : 4rem;
    background-color:var(--clr-3);
    border-radius:1rem;
    padding:.5rem;
    border: 1px solid #000;
}
#explain:hover + #explain-text,
#explain:active + #explain-text{
    display:block;
}
#container{
    width: 28rem;
    max-width: 90%;
    height: auto;
    text-align: center;
    background-color: var(--clr-2);
    padding: 1.5rem 2.5rem;
    border-radius: 1.2rem;
    word-wrap: wrap;
    color:#fff;
    box-shadow: 0 .2rem .3rem var(--clr-4);
    border: 2px solid #000;
}
label{
    display:block;
    margin-bottom: 2rem;
}
#text-input{
    width:70%;
    font-size:1rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    background: none;
    box-shadow: 0 .2rem var(--clr-3);
    color:#fff;
}
#text-input:focus{
    outline: 2px solid var(--clr-3);
}
#check-btn{
    border-radius: .7rem;
    margin-left: .2rem;
    width:5rem;
    background-color: var(--clr-3);
    color:#fff;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
#check-btn:hover{
    background-color: #fff;
    color: var(--clr-3);
}
#result{
    width:100%;
    font-size: 1.3rem;
    font-weight: 600;
}
#result, #text-input, #check-btn{
    min-height: 2rem;
    text-align: center;
    border: none;
}



.flex{
    display: flex;
    justify-content:center;
    align-items: center;
}
@media screen and (max-width:920px){
    html{
    font-size:14px;
    }
}
@keyframes animateDot{
    0%, 100%{
    opacity: 1;
    }
    50%{
    opacity: 0;
    }
}
.animated:last-child::after{
    content: '▎';
    margin-left: .1rem;
    animation: animateDot 1s linear infinite;

}