:root {
    --colorShadow: #0000009a;
    --backConteiner: #57595a;
    --backShadow: #1d1d22be;
    --button: #1a1818;
    --buttonHover: #0b0b0caf;
    --background: #222;
    --fontColor: #FFFFFF;

}

body {
    background-color: var(--background);
}

#conteiner {
    background-color: var(--backConteiner);
    color:var(--fontColor);
    font: normal bolder 20px 'work sans';
    width: 400px;
    height: 600px;
    text-shadow: 1px 1px 3px #00000094;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: auto;
    border-radius: 20px;
    box-shadow: 10px 8px 1px var(--backShadow);
}
#altura , #peso{
    margin: 12px 12px;
    width: 200px;
    height: 25px;
    display: table;
    box-shadow: 3px 3px 4px var(--backShadow);
    border: 0;
}
#sexo{
    padding-bottom: 20px;
}

#title{
    font: normal bolder 2em 'work sans';
    color: var(--fontColor);
    padding-top: 20px;
    text-align: center;
    background-color:var(--backShadow);
    width: 100%;
    height: 50px;
    
}
#calculato{
    width: 100px;
    height: 40px;
    font: normal bolder 20px 'work Sans';
    color: var(--fontColor);
    text-shadow: 1px 1px 3px #00000050;
    border-radius: 8%;
    background-color: var(--button);
    box-shadow: 4px 4px 0px var(--backShadow);
    border: 0px;
}
#calculato:hover {
    background-color: var(--buttonHover);

}
#calculato:active{
    background-color: var(--button);
    box-shadow: 2px 2px 0px var(--button);
    position: relative;
    top: 3px;
}
#result {
    color: black;
    font: normal lighter 20px 'work sans';
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.329);
    text-align: center;
    width: 250px;
    height: 60px;
    background-color: #FFFFFF;
    box-shadow: 3px 3px 1px var(--backShadow);
    border-radius: 5px;
}