*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

body{
    background-color: rgb(250, 175, 175);
}

h1{
    text-align:center;
    padding-top: 40px;
    font-size: 40pt;
    font-weight: bolder;
    font-family: 'Dancing Script', cursive;
    color:purple
}

/*------------ Container principal ----------- */

form{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 700px;
    align-items: center;
    justify-content: space-evenly;
}

@media (max-width:920px){
    form{
        flex-direction: column;
        height: 1200px;
    }
}

/*----------- coluna da esquerda -----------*/

.esquerda{
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:920px){
    .esquerda{
        width:90%;
    }
}

/*---------- TextArea ---------*/

.item1{
    height: 60%;
}

@media (max-width:920px){
    .item1{
        height: 60%;
    }
}

#entrada{
    width: 100%;
    height: 100%;
    color: black;
    background-color: rgb(234, 251, 73);
    border-radius: 10px;
    padding: 5px;
    border-style:double;
    border: solid 5px rgb(236, 56, 176);
    box-shadow: 20px 10px 10px rgb(195, 0, 255);
    resize: none;
    

}

/*---------- Botões ---------*/

.item2{
    height: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-width:920px){
    .esquerda .item2{
        height: 30%;
    }
}
/*----------- Select ----------- */

.metodo{
    background-color: yellow;
    border: solid 2px purple;
    padding: 5px;
    
}

/*---------- Tipo de Cifra --------*/

.passo{
    display: flex;
    justify-content: center;
    align-items: center;

}

/*---------- Fieldsets--------*/

.tipo, .field_tipodecodigo{
    border: none;
    margin-bottom:5px;

}

/*-------- Botão -------*/

.btns{
    width: 100%;
    display: flex;
    justify-content: center;
}

.enviar{
    width: 30%;
    margin-bottom: 5px;
    height: 30px;
    background-color: yellow;
    border: solid 2px purple;
    border-radius: 10px;
    box-shadow: 5px 5px 2px rgb(224, 91, 91);
}

.enviar:hover{
    cursor:pointer;
    background-color: purple;
    box-shadow:5px 5px 2px yellow;
    color:yellow;
    transition: .5s;
    border-color: rgb(224, 91, 91);

}

/**coluna da direita**/

.direita{
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:920px){
    .direita{
        width:90%;
    }
}

/*--------- Mensagem a ser exibida ---------------*/
.resposta{
    width: 100%;
    height: 100%;
    color: black;
    background-color: rgb(234, 251, 73);
    border-radius: 10px;
    padding: 5px;
    border-style:double;
    border: solid 5px rgb(236, 56, 176);
    box-shadow: 20px 10px 10px rgb(195, 0, 255);
    resize: none;

}