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

:root {
    --volume-color:
}

body {
    margin:0;
    height:100dvh;
    
    background-color: rgb(227, 195, 162);
    color: white;

    min-height: 100dvh;
    display: grid;
    place-items: center;

}

/***********************************************
----------------------------------------------
...
______________________________________________
********************************************** */

body > div {
    width: 31em;
    height: 80dvh;
    position: relative;
    
    /* background-color: #9b8964; */
    
    background-image: 
        repeating-linear-gradient(
            0deg,
            #8b6646 0px,
            #8b6646 2px,
            #6b4f33 3px,
            #6b4f33 5px
        ),
        repeating-linear-gradient(
            20deg,
            #523c26 0px,
            #523c26 1px,
            #6b4f33 2px,
            #6b4f33 4px
        ),
        linear-gradient(
            to bottom,
            #6b4f33 0%,
            #5f452d 50%,
            #6b4f33 100%
        ),
        linear-gradient(
            45deg,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0.05) 50%,
            transparent 51%
        );
    
    background-blend-mode: overlay;
    background-size: auto;
    
    box-shadow: 
        inset 0 4px 12px rgba(82,60,38,0.7),
        inset 0 -4px 10px rgba(95,69,45,0.6),
        0 2px 6px rgba(0,0,0,0.2);
}

body > div > section {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: silver;
    width: 26em;
    height: 85dvh;
}

input[type="checkbox"], input[type="radio"] {
    appearance: none;

    display: block;
    width: 2em;
    aspect-ratio: 1;

    background-color: rgb(206, 206, 206);
    border-radius: 50%;
    border: solid 1px grey;

    box-shadow: 
    inset .1em .1em .3em #fff,
    inset -.1em -.1em .3em #000,
    .1em .1em .3em #fff,
    .1em -.1em .3em #000
    ;
    cursor: pointer;
    transition: all 0.2s ease;



    &:checked {
        background-color: rgb(206, 206, 206);
        box-shadow: 
        inset .05em .05em .15em #000,  
        inset -.05em -.05em .15em #fff, 
        .1em .1em .3em #fff,          
        .1em -.1em .3em #000;    
    }
}

img {
    position: absolute;
    top: 1.6em;
    left: calc(50% - 8.5em);
    width: 20em;
    animation: spin 2s linear infinite, slideInTop 1s ease;
    animation-play-state: paused;
    display:none;
}

section:has(label[aria-label="play-pause"] input:checked) img , section:has(label[aria-label="play-pause"] input:checked) div:has(p) p {
    animation-play-state: running;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

section div:has(datalist) div {
    position: absolute;
    height: 0.7em;
    width: 0.5em;
    top: 28.3em;
    left: 20.4em;
    border-radius: 2px;
    background-color: rgb(0, 116, 25);
    transform-origin: left;
    transition:  0.2s ease;
}

@container style(--sound <= 25) {
    section div:has(datalist) div {
        width: 1em;
        background-color: #007419;
    }
}
@container style(--sound >= 25) {
    section div:has(datalist) div {
        width: 2em;
        background-color: #ffff00;
    }
}
@container style(--sound >= 50) {
    section div:has(datalist) div {
        width: 3em;
        background-color: #e4ac12;
    }
}
@container style(--sound >= 75) {
    section div:has(datalist) div {
        width: 4em;
        background-color: #f07604;
    }
}
@container style(--sound = 100) {
    section div:has(datalist) div {
        width: 5em;
        background-color: #e12002;
    }
}

h1 {
    font-size: 1em;
    font-family: 'Courier New', Courier, monospace;
    color: rgb(72, 72, 72);
    position: absolute;

    top: 32.5em;
    left: calc(50% - 3em);
}

label[aria-label="cd-on-off"] {
    position: absolute;

    top: 32rem;
    left: 9%;

    input[type="checkbox"]{
        width: 3em;
    }
}

label[aria-label="display-mode"] {
    position: absolute;

    top: 37.2rem;
    left: 3%;

    input[type="checkbox"]{
        width: 1.5em;
    }
}

input[type="radio"]{
    width: 1.8em;
}

label[aria-label="prev-one"] {
    position: absolute;

    top: 37em;
    left: 36%;
}


label[aria-label="next-one"] {
    position: absolute;

    top: 37em;
    left: 55%;
}


label[aria-label="play-pause"] {
    position: absolute;

    top: 37em;
    left: calc(50% - 1.3em);
}


input[type="range"] {
    appearance: none;
    background: transparent;
    width: 7em;


}

label[aria-label="volume"] {
    width: 5em;
    position: absolute;

    top: 37em;
    left: 72%;
}

input[type="range"] {
    cursor: pointer;

}

/* Aan chatgpt gevraagd hoe je input type range stylet voor verschillende browsers https://chatgpt.com/share/69b2a973-0720-8002-858e-4c57c11bccf6 */
input[type="range"]::-webkit-slider-runnable-track {
    height: 0.4em;
    background: grey;
    border-radius: 1em;
}

input[type="range"]::-moz-range-track {
    height: 0.4em;
    background: grey;
    border-radius: 1em;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: #ddd;
    box-shadow:
        inset .1em .1em .3em #fff,
        inset -.1em -.1em .3em #000,
        .1em .1em .3em #fff,
        .1em -.1em .3em #000;

        margin-top: -0.4em; 

}

input[type="range"]::-moz-range-thumb {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: white;
    border: 1px solid black;
}

section div:has(p) {
    position: relative;
    width: 18em;  
    height: 1.5em;   
    overflow: hidden; 
    background-color: #282828;
    z-index: 99999;

    top: 28em;
    left: 7%;;
    
}

section div:has(p) p {
    font-family: "Bitcount Grid Double";
    color: rgb(1, 195, 1);
    position: absolute;
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%; 
    animation: titlemove 7s linear infinite;
    animation-play-state: paused;
    display: none;
    font-weight: 200;
}

@keyframes titlemove {
    to {
        transform: translateX(-100%);
    }
}

section:has(label[aria-label="cd-on-off"] input:checked) img, 
section:has(label[aria-label="cd-on-off"] input:checked) div:has(p) p {
    display: block;
}

section:has(label[aria-label="cd-on-off"] input:checked) img {
    display: block;
}

@keyframes slideInTop {
    0% {
        transform: translateY(-30em);
        opacity: 0;
    }
    100% {
        transform: translateY(0); 
        opacity: 1; 
    }
}


/* lange strook langs display zijkant */
section > div:nth-of-type(6) {
    position: absolute;
    width: 30em;    
    height: .8em;
    background-color: rgb(163 163 163);
    top: 14.6em;
    left: -14.6em;
    rotate: 90deg;
    box-shadow: 0px 0 6px -1px rgba(0, 0, 0, 0.498);
    z-index: -4;
}

/* display */
section > div:nth-of-type(7) {
    position: absolute;
    width: 25.2em;    
    height: 6em;
    background-color: rgb(128 127 127);
    top: 25.5em;
    left: .8em;
    z-index: -6;
}

/* glazen bg */
section > div:nth-of-type(8) {
    position: absolute;
    width: 25.2em;    
    height: 30em;
    top: 0em;
    left: .8em;
    z-index: 999999;


    background: 
    linear-gradient(
        to bottom,
        #ffffff59 0%,
        #ffffff26 20%,
        #ffffff0d 40%,
        #0000000d 100%
    ),
    linear-gradient(
        to bottom right,
        #ffffff33,
        #00000033
    );

    backdrop-filter: blur(.7px);  

}


section > div:nth-of-type(8)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: linear-gradient(
        to bottom,
        #ffffff1f 0%, 
        #ffffff14 30%,
        transparent 100%
        );

    pointer-events: none;
}

/* skewed stukje boven display */
section > div:nth-of-type(9) {
    position: relative;
    background-color: rgb(88, 85, 83);
    width: 25.2em;    
    height: 2.5em;
    top: 23em;
    left: 2em;
    transform: skew(-45deg);
    z-index: 0;
    overflow: hidden;

    /* box-shadow: 10px 10px -1px 10px rgba(255, 255, 255, 0.696); */
    box-shadow: 
        inset 1px 8px 10px -5px rgba(0, 0, 0, 0.3),
        inset 6px 0 8px -6px rgba(0, 0, 0, 0.2);   ;

    clip-path:
    polygon(
        0% 0%, 
        90.2% 0%, 
        100% 100%, 
        0% 100%
    );

}

/* stukje naast display */
section > div:nth-of-type(10) {
    position: absolute;
    background-color: rgb(118, 118, 118);
    width: 3.3em;    
    height: 26.5em;
    top: 0em;
    left: 0em;
    z-index: -5;

}

/* lid */
section > div:nth-of-type(11) {
    position: absolute;
    background-color: rgb(148, 148, 148);
    width: 31em;    
    height:.6em;
    top: -.1em;
    left: -2.5em;
    z-index: 999999;
}

section > div:nth-of-type(12) {
    position: absolute;
    background-color: rgb(215, 215, 215);
    width: 4.5em;    
    height: 4.5em;
    border-radius: 50%;
    top: 9.3em;
    left: 12.1em;

    box-shadow: 
    inset 0.3em 0.3em 0.6em rgba(0,0,0,0.4),
    inset -0.3em -0.3em 0.6em rgba(255,255,255,0.5);
    /* z-index: 9; */
}

section > div:nth-of-type(13) {
    position: absolute;
    background-color: rgb(155, 155, 155);
    width: 2.2em;    
    height: 2.2em;
    border-radius: 50%;
    top: 10.4em;
    left: 13.2em;
    /* z-index: 9; */
    box-shadow: 
    0.1em 0.1em 0.2em rgba(0,0,0,0.4),  
    inset 0 -0.1em 0.1em rgba(0,0,0,0.2); 
}

/* control panel */
section > div:last-child {
    position: absolute;
    width: 26em;  
    height: 9.3em;   
    background-color: #bababa;
    z-index: -2;

    top: 30em;
    left: 0;

    box-shadow: 
        0px 2px 10px 0 #00000066,  
        inset 0px 2px 6px #00000033,  
        inset 0px -2px 6px #00000026;
}



section:has(label[aria-label="prev-one"] input:checked) img:nth-of-type(2),
section:has(label[aria-label="prev-one"] input:checked) p:nth-of-type(2) {
    display: none;
}

section:has(label[aria-label="next-one"] input:checked) img:nth-of-type(1),
section:has(label[aria-label="next-one"] input:checked) p:nth-of-type(1) {
    display: none;
}
/* section:has(label[aria-label="display-mode"] input:checked) img {

}  */