@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(45deg, greenyellow, dodgerblue);
    font-family: "Dosis", serif;
}

.container{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3.125rem 3.125rem;
    background: #fff;
    border: 1rem solid rgb(20, 56, 51);
    border-radius: 0.625rem;
    font-size: 1.3rem;
}

.container__nivel{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 60%;
    max-width: 80%;
    min-height: 70vh;
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
    border: 0.5rem double rgb(20, 56, 51);
    border-radius: 1rem;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.3rem;
    padding: 2rem;
}

.container__nivel__conteudo{
    padding: 1rem;
    height: 100%;
    animation: fadeIn 1.5s;
}


.btnVoltar, .container__voltar{
    position: absolute; 
    text-align: left; 
    top: 10px;
    left: 5px; 
}

.btnVoltar:hover{
    color: #27c712;
    cursor: pointer;
}



.palavra__nivel{
    margin-top: 2rem;    
    min-width: 6rem;
    font-size: 2rem;
    border-bottom: 0.22rem solid rgb(11, 214, 109);
}

h1{
    border-left: 0.313rem solid rgb(20, 56, 51);
    padding: 0.625rem;
    margin-bottom: 3.75rem;
    font-weight: bold;
    padding-left: 0.625rem;
}


h1.destaque{
    font-size: 2.5rem;
    font-weight: bold;
    color: #010501;
    padding: 0.625rem;
    border-left: 0.313rem solid #27c712;
    border-right: 0.313rem solid #27c712;
    margin-bottom: 3rem;
}


input#campoTentativa {
    font-size: 1.2rem;
    border: 2px solid #1e90ff;
    border-radius: 0.5rem;
    width: 80%;
    max-width: 300px;
    text-align: center;
    outline: none;
    transition: 0.3s;
}


input#campoTentativa:focus {
    border-color: #09e72a;
    box-shadow: 0 0 10px rgb(21, 68, 10);
}


.container__nivel__conteudo__inputs{
    display: flex;
    align-items: center;
    flex-direction:column;
    gap:1rem;
}

.container__nivel__conteudo__lista{
    text-align: left;
    list-style:decimal;
    margin: 2rem;
}


li{
    margin: 2rem;   
}

.container__nivel__conteudo__resultados {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: green;
    color: #fff;
    width: 100%;
    border-radius: 0.5rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background 0.5s ease-in-out;
}


.container__nivel__conteudo__resultados.erro {
    background-color: red;
}

.container__nivel__conteudo__final{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background 0.5s ease-in-out;
}


.btnOpcao{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    font-size: large;
    min-width: 100%;
    min-height: 2rem;
    background: rgba(49, 240, 14, 0.3);
    border-radius: 0.313rem;
    border: 0.063rem solid rgba(49, 240, 14, 1);
    box-shadow: 0px 0px 2px 2px rgb(9, 58, 8);
    font-family: "Dosis", serif;
}

.btnOpcao:hover, .btn__nivel:hover, .btn__checarVerbo:hover, .btn__proximoVerbo:hover{
    background: rgb(230, 255, 225);
    box-shadow: 0px 0px 2px 2px rgb(34, 151, 241);
    cursor: pointer;
}


.btn__nivel, .btn__checarVerbo, .btn__proximoVerbo{
    padding: 0.425rem 0.725rem;
    font-size: large;
    font-weight: bold;
    background: rgb(192, 238, 183);
    border-radius: 0.313rem;
    border: 0.013rem solid rgba(49, 240, 14, 1);
    box-shadow: 0px 0px 2px 2px rgb(9, 58, 8);
    font-family: "Dosis", serif;
}


a{
    text-decoration: none;
    color: black;
    min-width: 100%;
}

a::after{
    color: black;
    text-decoration:none;
}

.link__menu:hover{
    color: #27c712;
    cursor: pointer;
}

.invisivel{
    display: none;
}