*{
    box-sizing: border-box;
}
html,body{
    height: 100%;
}
body {
    margin: 0;
    padding: 2rem;
    background-color: hsl(0 0% 0%);
    display: grid;
    gap: 1rem;
    align-items: center;
  /*  position: fixed;
    bottom: 15%;
    left: 50px;*/
}

h1{
    font-family: system-ui, sans-serif;
    color: hsl(0, 0%, 100%);
    text-align: center;
    >span:last-of-type{
        color: hsl(96, 100%, 49%);
    }
}

.countdown{
    --number-color: hsl(0 0% 100%);
    --text-color: hsl(0 0% 25%);
    --dot-color: hsl(0 0% 10%);
    --dot-color-remaining: hsl(96,100%, 49%);
    --dot-color-active: hsl(0 100% 50%);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    width: min(15rem,100%);
    margin-inline: auto;
    container: inline-size;
    >.part{
        aspect-ratio: 1/1;
        display: grid;
        place-items: center;
        >.remaining{
            grid-area: 1/1;
            color: hsl(0, 0%, 100%);
            
            display: grid;
            text-align: center;
            font-size: 2cqi;
            >.number{
                color: var(--number-color);
            }
            >.text{
                padding: 2px;
                color: red; /*var(--text-color);*/
                text-transform: uppercase;
                font-size: 0.4em;
            }
        }
        >.dot-container{
            grid-area: 1/1;
            height: 100%;
            width: 5%;
            rotate: calc(360deg /var(--dots)* var(--dot-idx));
            >.dot{
                width: 100%;
                aspect-ratio: 1/1;
                background-color: var(--dot-color);
                border-radius: 50%;
                transition: background-color .25s;
                &[data-active=true]{
                    background-color: var(--dot-color-remaining);
                    &[data-lastactive=true]{
                        background-color: var(--dot-color-active);
                    }
                }
            }
        }
    }
    
}

@media (max-width: 480px) {
    .countdown{
        background-color:black;
        --number-color: hsl(0 0% 100%);
        --text-color: hsl(0 0% 25%);
        --dot-color: hsl(0 0% 10%);
        --dot-color-remaining: hsl(96,100%, 49%);
        --dot-color-active: hsl(0 100% 50%);
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1rem;
        width: min(15rem,100%);
        margin-inline: auto;
        container: inline-size;
        >.part{
            aspect-ratio: 1/1;
            display: grid;
            place-items: center;
            >.remaining{
                grid-area: 1/1;
                color: hsl(0, 0%, 100%);
            
                display: grid;
                text-align: center;
                font-size: 4cqi;
                >.number{
                    color: var(--number-color);
                }
                >.text{
                    padding: 2px;
                    color: red; /*var(--text-color);*/
                    text-transform: uppercase;
                    font-size: 0.4em;
                }
            }
            >.dot-container{
                grid-area: 1/1;
                height: 100%;
                width: 5%;
                rotate: calc(360deg /var(--dots)* var(--dot-idx));
                >.dot{
                    width: 100%;
                    aspect-ratio: 1/1;
                    background-color: var(--dot-color);
                    border-radius: 50%;
                    transition: background-color .25s;
                    &[data-active=true]{
                        background-color: var(--dot-color-remaining);
                        &[data-lastactive=true]{
                            background-color: var(--dot-color-active);
                        }
                    }
                }
            }
        }
    
    }
}