@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Quicksand', sans-serif;
    /*background-color: #121316;*/
    /*color: #222222;*/
    /*background-color: #FFFFFF;*/
    background-color: #000212;
    color: #CFCFD0;
}
section {
    border-radius: 0.5em;
    background: radial-gradient(140% 107.13% at 50% 10%,transparent 37.41%,#63e 69.27%,#fff 100%);
}
/*********************************************
**********************************************
**********     H E A D E R    **************
**********************************************
*********************************************/



/*********************************************
**********************************************
**********     Section TIMER    **************
**********************************************
*********************************************/

#timerWarpper {
    border-radius: 0.5em;
}

#startBtn, #resetBtn, #lapBtn {
    background-color: transparent;
    padding: 10px;
    margin: 5px 2px;
    border-radius: 5px;
    cursor: pointer;
}
#startBtn {
    border: 0.125em solid #0CA678;
    border-radius: 0.5em;
    box-shadow: 0 0.375em 0 #0CA678;
    background-color: #63E6BE;
    font-weight: bold;
}
#startBtn:hover {
    transition: all 0.2s ease-in-out;
    background-color: #0CA678;
}

#resetBtn {
    border: 0.125em solid #9C36B5;
    border-radius: 0.5em;
    box-shadow: 0 0.375em 0 #9C36B5;
    background-color: #E599F7;
    font-weight: bold;
}
#resetBtn:hover {
    transition: all 0.2s ease-in-out;
    background-color: #9C36B5;
}
#lapBtn {
    border: 0.125em solid #146EBE;
    border-radius: 0.5em;
    box-shadow: 0 0.375em 0 #146EBE;
    background-color: #74C0FC;
    font-weight: bold;
}
#lapBtn:hover {
    transition: all 0.2s ease-in-out;
    background-color: #146EBE;
}
/*********************************************
**********************************************
**********   C O U N T D O W N  **************
**********************************************
*********************************************/

#time {
    border: 0.125em solid #222222;
    border-radius: 0.5em;
}
#hours, #minutes, #seconds {
    border-radius: 0.5em;
    border: 0.125em solid #c9d1d9;
}
#startButton, #resetButton, #stopButton {
    border-radius: 0.5em;
    font-weight: bold;
    padding: 10px;
    margin: 5px 2px;
    cursor: pointer;
}
#startButton {
    background-color: #63E6BE;
    box-shadow: 0 0.375em 0 #0CA678;
    border: 0.125em solid #0CA678;
}
#startButton:hover {
    background-color: #0CA678;
    transition: all 0.2s ease-in-out;
}
#resetButton {
    background-color: #E599F7;
    box-shadow: 0 0.375em 0 #9C36B5;
    border: 0.125em solid #9C36B5;
}
#resetButton:hover {
    background-color: #9C36B5;
    transition: all 0.2s ease-in-out;
}
#stopButton {
    background-color: #FF8787;
    box-shadow: 0 0.375em 0 #E03131;
    border: 0.125em solid #E03131;
}
#stopButton:hover {
    background-color: #E03131;
    transition: all 0.2s ease-in-out;
}
/*********************************************
**********************************************
********        F O O T E R         **********
**********************************************
*********************************************/
footer{
    color: #FFFFFF;
}
#logoFooter {
    color: #74C0FC;
}
#linkButtonFooter {
    border: 0.125em solid #222222;
    border-radius: 0.5em;
    background-color: transparent;
    font-weight: bold;
}

/*********************************************
**********************************************
********    R E S P O N S I V E    ***********
**********************************************
*********************************************/

@media (min-width: 768px) {
    #headerNav ul {
        display: flex;
    }

    #headerNav button {
        display: none;
    }
}