body{
    display: grid;
    justify-content: center;
    place-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

/* Header */

header{
    font-size: larger;
}

header h1{
    font-weight: 600;
}

/* Main Container */

#mainContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}


/* Section general */

.generalContainer{
    display: grid;
    justify-content: center;
    align-items: center;
    height: 55vh;
    width: 300px;
}

/* Contador de tiempo */

.displayContainer{
    margin: 10px;
}

.timeRemaining{
    display: flex;
    justify-content: center;
    
}

.timeRemaining span{
    font-weight: 400;

}

@media (max-width: 600px) {
    #mainContainer,
    .generalContainer {
        padding-bottom: 40px !important;
    }
    #mainContainer,
    .generalContainer {
        padding-bottom: 40px !important;
    }
    .timeRemaining span {
        font-size: 70px;
    }
    .footer1{
        font-size: 10px;
    }
}

@media (min-height: 600px) {
    #mainContainer,
    .generalContainer {
        padding-bottom: 40px !important;
    }
    .timeRemaining span {
        font-size: 150px;
    }
    .footer1{
        font-size: 16px;
    }
    .footer1 span{
        font-weight: 400;
        margin-top: 20px;
        font-size: 14px;
    }
}


@media (max-width: 1280px) {
    #mainContainer,
    .generalContainer {
        padding-bottom: 40px !important;
    }
    .timeRemaining span {
        font-size: 100px;
    }
    .footer1 span{
        font-weight: 400;
        margin-top: 20px;
        font-size: 10px;
    }
}



@media (max-width:880px){
    #mainContainer,
    .generalContainer {
        padding-bottom: 40px !important;
    }
    .timeRemaining span {
        font-size: 60px;
    }
    .footer1{
        font-size: 14px;
    }
}

/* Inputs de tiempo */

.inputsContainer{
    margin: 10px;
}

.inputsTimer{
    display: flex;
    justify-content: center;
}

.inputsTimer input{
    margin-inline: 2px;
    height: 50px;
    width: 60px;
    text-align: center;
    text-indent: 10px;
    border: 1px;
    border-radius: 8px;
    border-style: solid;
}

/* Botones para controlar el temporizador */

.btnContainer{
    margin: 10px;
}

.controlBtn {
    display: flex;
    justify-content: center;
}

.controlBtn button{
    margin-inline: 2px;
    height: 40px;
    width: 70px;
    font-style: italic;
    font-weight: 700;
    border-radius: 8px;
    border: 1px;
    border-style: solid;
}

/* Footer */

.footerContainer{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 334px;

}

.footer1{
    text-align: center;
    color: rgba(0, 138, 138, 0.799);

}

.footer1 span{
    font-weight: 400;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 138, 138, 0.799);
    text-align: center;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 1px;
}