body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: beige;
}

#contenedorPadre{
    background-color: #99a6ae;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    gap:20px;
    width: 550px;
    height: 407px;
    border-radius: 16px;
    box-shadow: 1px 1px 20px black;
}

#contenedorPadre #botones{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
}

#botonIniciar{
    width: 150px;
    height: 48px;
    border-radius: 12px;
    background-color: rgb(144, 224, 144);
    font-size: medium;
    cursor: pointer;
}

#botonIniciar:hover{
    background-color: rgb(83, 215, 83) ;
}

#botonPausa{
    width: 150px;
    height: 48px;
    border-radius: 12px;
    background-color: rgb(216, 204, 35);
    font-size: medium;
    cursor: pointer;    
}

#botonPausa:hover{
    background-color: rgb(223, 214, 99);    
}

#botonDetener{
    width: 150px;
    height: 48px;
    border-radius: 12px;
    background-color: rgb(216, 35, 35);
    font-size: medium;
    cursor: pointer;    
}

#botonDetener:hover{
    background-color: rgb(215, 93, 93);    
}

button[disabled]#botonPausa,button[disabled]#botonIniciar {
   background-color: #7e8488;
   cursor: not-allowed;
}

label{
    font-size: x-large;
}

input{
    border-radius: 12px;
    text-align: center;
    height: 40px;
    font-size: medium;
    font-weight: 900;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div h2 + div {
    display: grid;
    place-items: center;
    background-color: rgb(115, 255, 0);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid gray;
}

p{
    font-size: x-large;
    font-weight: 900;
}