@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

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

:root
{
    font-size: 62.5%;

    --baseColor: 230;
    --appBackground: #121214;
    --primaryBackground: hsla(var(--baseColor), 100%, 63%, 0.13);
    --primaryColor: hsl(var(--baseColor), 100%, 63%);
    --textColor: #FFF; 
}

body
{
    height: 100vh;
    display: grid;

    background-color: var(--appBackground);
    color: var(--textColor);

    font-family: 'Roboto', sans-serif;
}

button
{
    background: transparent;
    border: none;

    cursor: pointer;
}

.Hide
{
    display: none;
}

.Play svg path,
.Pause svg path,
.SoundOn svg path
{
    fill: var(--primaryColor);
}

button svg
{
   width: clamp(4.8rem, 2rem + 12vw ,7.4rem); 
}

main
{
    justify-self: center;
    align-self: end;
}

footer
{
    justify-self: end;
    align-self: end;

    padding: 0 3.2rem 3.2rem;
}

#Timer
{
    display: flex;
    font-size: clamp(4.2rem, 4rem + 10vw, 8.8rem);
    font-weight: bold;
    margin-bottom: 1.6rem;
}

#TimerControls
{
    width: clamp(18rem, 10rem + 30vw, 22.8rem);
    height: clamp(8rem, 5.5rem + 10vw, 10.8rem);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1.6rem;

    border-radius: 9999px;
    background-color: var(--primaryBackground);
}