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

:root {
    font-size: 62.5%;

    --txt-main-color: #323238;
    --card-bg-color: #E1E1E6;
    --btn-select-color: #ffffff;
    --card-bg-select-color: #02799D;

    --page-darkmode-color: #121214;
    --txt-darkmode-color: #FFFFFF;
    --btn-darkmode-fill-color: #C4C4CC;
    --card-bg-darkmode-color: #29292E;
    --card-bg-darkmode-select-color: #0A3442;
    --card-bg-darkmode-select-fill-color: #FFFFFF;

    --range-light-bg-color: #FFFFFF;
    --range-ligh-ball-color: #FFFFFF;
}

header {
    position: absolute;
    top: 6.4rem;
    right: 6.4rem;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
}

main {
    display: flex;
    align-items: center;
    gap: 19.2rem;
}

#timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
}

.time {
    display: flex;
    font-size: 12.6166rem;
    font-family: 'Roboto', sans-serif;
    line-height: 14.8rem;
    color: var(--txt-main-color);
}

.buttons {
    display: flex;
    gap: 4rem;
}

.controlButton {
    transition: transform 0.3s ease-in-out;
}

.controlButton:hover {
    transform: scale(1.1);
}

#sounds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 3.2rem;
}

.soundButton {
    width: 13.8rem;
    background: var(--card-bg-color);
    border-radius: 2.4rem;
    height: 15.2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.2rem;

    transition: background-color 0.5s ease;
}

.soundButton svg path {
    transition: fill 0.5s ease;
}

.soundButton.selected {
    background-color: var(--card-bg-select-color);
}

.soundButton.selected svg path {
    fill: var(--btn-select-color);
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.volume-control {
    width: 9rem;
}

  input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
 }
 
 input[type="range"]:focus {
   outline: none;
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--range-light-bg-color);
    border-radius: 0.5rem;
    height: 0.4rem;  
 }
 
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
    appearance: none;
    margin-top: -0.6rem; 
 

    background-color: var(--range-ligh-ball-color);
    height: 1.6rem;
    width: 1.6rem;
    border-radius: 9999999rem;
 }
 

 input[type="range"]::-moz-range-track {
    background-color: var(--range-light-bg-color);
    border-radius: 0.5rem;
    height: 0.4rem;
 }
 
 input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -0.6rem; 
 

    background-color: var(--range-ligh-ball-color);
    height: 1.6rem;
    width: 1.6rem;
    border-radius: 9999999rem;
 }

/***** DARK MODE *****/
.hide {
    display: none;
    opacity: 0;
}

body.darkMode {
    background-color: var(--page-darkmode-color);
}

.time.darkMode {
    color: var(--txt-darkmode-color);
}

.controlButton.darkMode svg path {
    fill: var(--btn-darkmode-fill-color);
}

.soundButton.darkMode svg path {
    fill: var(--btn-darkmode-fill-color);
}

.soundButton.darkMode {
    background-color: var(--card-bg-darkmode-color);
}

.soundButton.selected.darkMode {
    background-color: var(--card-bg-darkmode-select-color);
}

.soundButton.selected.darkMode svg path {
    fill: var(--card-bg-darkmode-select-fill-color);
}







/*variaveis pra cor, cramp, talvez efeitos e ver nos projetos passados se falta algo que aprendi*/

/*verificar se nao falta nada, rever tudo*/

/*cramp por ultimo*/


/*rever se nao esqueci de fazer nada que foi ensinado*/




/*refatorar fazendo funções aonde se repete codigo*/

/*ver se separa melhor os trem*/


/*ver funcionalidade de resetar o timer ao clicar duas vezes no botao de parar ou algo assim*/



/*converter pra dark mode, ajeitar as novas funcionalidades de volume e depois refatorar/rever td
e ver possiveis melhorias para os controles do time*/




/*finalizar e rever tudo!!!*/