@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

body{
    background-color: gray;
    display: grid;
    place-items: center;
    margin-top: 10%;
}

#bloco{
    background-color: rgb(161, 177, 179);
    border-radius: 20px;
    padding: 3%;
    height: 125%;
    width: 27%;
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(49, 49, 49);
}

header{
    text-align: center;
    font-size: 140%;
}

form{
    display: grid;
    grid-template-columns: auto;
    font-size: 140%;
    gap: 3%;
}

#horasTrabalhadas, #horaExtra50, #horaExtra, #valorHora{
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: large;
    color: rgb(39, 38, 37);
    height: 120%;
    border-radius: 12px;
    outline: none;
    border: none;
    margin-bottom: 4%;
}

#valorHora{
    margin-top: 4%;
    color: rgb(39, 38, 37);
}

#botoes{
    margin-top: 6%;
    margin-bottom: 3%;
}
#botaoCalcular{
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: large;
    color: rgb(39, 38, 37);
    height: 150%;
    width: 30%;
    background-color: rgb(233, 110, 29);
    border-radius: 12px;
    outline: none;
    border: none;
}

#resultadoBloco, #diasTrabalhadosNormais, #diasTrabalhadosExtra50, #diasTrabalhadosExtra100, #diasTrabalhadosTotal{
    background-color: rgb(233, 237, 238);
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: large;
    color: rgb(99, 97, 95);
    border-radius: 12px;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}

#diasTrabalhadosNormais, #diasTrabalhadosExtra50, #diasTrabalhadosExtra100, #diasTrabalhadosTotal{
    margin-bottom: 4%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    height: 20%;
    padding-top: 3%;
}
#diasBloco{
    gap: 3%;
}