@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital@0;1&family=Lexend+Mega:wght@100..900&display=swap');

:root {
    --cor-primaria: #e9f2a6; /* Cor 1 */
    --cor-secundaria:#65A603 ; /* Cor 2 */
    --cor-terciaria: #fcffec; /* Cor 3 */
}

*{
    padding: 0;
    margin: 0;
}

body {
    width: 100vw;
    position: relative;
    background-color: var(--cor-primaria);
}

header img {
    margin-top: 15px;
    height: 50px;
}

main {
    background-color: var(--cor-primaria);
    width: 60vw;
    flex-direction: column;
}

.letrinhas {
    width: 30%;
    margin-left: 60px;
    margin-top: 20%;
}

.textoDigitado {
    font-family: "Kantumruy Pro", sans-serif;
    resize: none;
    margin-top: 10%;
    margin-left: 60px;
    margin-right: 10%;
    font-size: 24px;
    padding: 30px;
    background-color: var(--cor-primaria);
    border: none;
    color: var(--cor-secundaria);
}

.botoesMain {
    margin-left: 60px;
    margin-top: 2px;
    margin-bottom: 20px;
    gap: 5px;
}

.encriptar, .descriptar {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: none;
    background-color: var(--cor-secundaria);
    color: var(--cor-terciaria);
    cursor: pointer;
    font-size: 20px;
    font-family: "Kantumruy Pro", sans-serif;
}

.lock, .unlock {
    height: 20px;
}

.encriptar:hover, .descriptar:hover {
    background-color: var(--cor-terciaria);
    color: var(--cor-secundaria);
    transition: 0.3s;
    border: var(--cor-secundaria) 1px solid;
}


aside {
    width: 40vw;
    flex-direction: column;
    align-items: center;
}

.bonecoSVG {
    background-color: var(--cor-terciaria);
    width: 60%;
    border-radius: 26px 26px 0px 0px;
    padding: 5px;
    padding-top: 15px;
}

.nenhuma {
    background-color: var(--cor-terciaria);
    width: 60%;
    border-radius: 0px 0px 26px 26px;
    padding: 5px;
    padding-bottom: 60px;
}

.botaoCopiar {
    display: none;
    background-color: var(--cor-terciaria);
    border: var(--cor-secundaria) solid 2px;
    margin-top: 20px;
    width: 300px;
    border-radius: 30px;
    margin: 20px;
    height: 30px;
    color: var(--cor-secundaria);
    font-family: "Kantumruy Pro", sans-serif;
    font-size: 20px;
    cursor: pointer;
}

.botaoCopiar:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-terciaria);
    transition: 0.3s;
}

.exibirTexto {
    font-family: "Kantumruy Pro", sans-serif;
    border: none;
    display: none;
    resize: none;
    width: 300px;
    font-size: 20px;
    margin: 18px;
    color: #495057;
    border-radius: 20px;
    padding: 10px;
    background-color: var(--cor-terciaria) ;
    text-align: center;
}

.copiaTexto {
    background-color: var(--cor-terciaria);
    border-radius: 30px;
}

footer{
    text-align: center;
    background-color: var(--cor-secundaria);
    color: var(--cor-terciaria);
    width: 100vw;
    font-family: "Lexend Mega", sans-serif;
    font-size: 15px;
    padding: 20px;
    bottom: 0;
}

aside, .botoesMain {
    flex-wrap: wrap;
}

.componentesPrincipais, main, .botoesMain, aside {
    display: flex;
}