/* https://color.adobe.com/icy-colors-color-theme-14228848/ */
:root {
    --doc-width: 1280px;
    --doc-height: 100vh;
  
    --background-color: #C9DFF2;
    --font-color: #100F03;
  
    --header-font-size: 5.25rem;
    --body-font-size: 1.5rem;
    /* --header-font-fam:; */
    /* --hbody-font-fam:; */

    --radio-dial-bg: #A3BFD9;
    --dial-colour: #fff;
}
  
* {
    margin: 0;
    box-sizing: border-box;

}

/* ********* LAYOUT  **********/

#bg{
    width: 1280px;
    height: 720px;
    position: absolute;
    opacity: 0.15;
    z-index: -100;
}

body {
    background-color: var(--background-color);
    color: var(--font-color);
    
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: var(--body-font-size);
    /* font-style: normal; */
    /* border: 1px solid magenta; */
}

main {  
    margin-top: 2cqmax;
    /* width: var(--doc-width); */
    /* height: var(--doc-height); */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid blue; */
    
}

h1 {
    font-size: var( --header-font-size);
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

h2, h3, p {
    font-weight: 100;
    margin-top: 0.125rem;
    text-align: center;
}

#date-val {
    margin-bottom: 1rem;
}
#temp-val {
    width: 8rem;
    height: 8rem;
    font-size: 8rem;
    /* margin-top: 12rem; */
    /* border: 1px solid #222; */
}

#UI {
    display: flex;
    align-items: center; /* Align sliders vertically */
    justify-content: center;
    gap: 0rem; /* Add spacing between sliders */
    width: 100%;
    max-width: 800px;
    padding-left: 2rem; 
    padding-right: 2rem; 
    margin: 1rem auto;
    /* margin-left: 2rem;
    margin-right: 2rem; */
    /* border: 1px solid blue; */
}
/********* SLIDER *******/

.temp-slider-container {
    width: 100%;
    max-width: 900px;
    /* flex: 1;  */
    /* Make the horizontal slider take available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    
    background-color: var( --radio-dial-bg);
    background-image: url('../img/myRuler.svg');
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: contain; /* Ensure the image covers the div */
    box-shadow: 0 0 8px 8px rgba(255, 255, 255, 0.4);
    /* box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.2), 2px 2px 8px rgba(255, 255, 255, 0.01); */
    /* border: 1px solid magenta; */
}

#temp-slider {
    width: 100%; /* Ensures horizontal slider spans container */
    max-width: 720px;
    height: 12rem;
    background: transparent; 
    /* border: 1px solid magenta; */
    
}

.slider {
    -webkit-appearance: none;
    background: transparent;
    outline: none;
    transition: opacity 0.2s;
    z-index: 2; /* Place below the buffering indicator */
}


.slider, #bufferingIndicator {
    grid-column: 1;
    grid-row: 1;
}

.slider:hover {
    /* opacity: 0.7; */
    cursor: pointer;
}

#temp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.5rem;
    height: 10rem;
    background: var(--dial-colour);
    opacity: 0.8;
    cursor: pointer;
    border-radius: 0.25rem;
    box-shadow: 0 0 8px 0 rgba(255,255,255,0.3);
    z-index: 0;
 
}

#temp-slider::-moz-range-thumb {
    width: 6px;
    height: 10rem;
    background: var(--dial-colour);
    opacity: 0.8;
    cursor: pointer;
    border-radius: 0.25rem;
    box-shadow: 0 0 8px 0 rgba(255,255,255,255.3);
    z-index: 0;
}

#volume-control-container {
    /* width: auto;  */
    height: 200px;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
    /* border: 1px solid blue; */
}

#volume-control {
    transform: rotate(-90deg);
    width: 120px; /* Adjust the height of the vertical slider */
    height: 2rem;
    background: transparent; /* Ensure transparency matches your design */
    margin-bottom: 3rem;
    background-color: var( --radio-dial-bg);
}

#volume-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.5rem;
    height: 1.8rem;
    background: var(--dial-colour);
    opacity: 0.8;
    cursor: pointer;
    /* border-radius: 50%; */
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
    z-index: 0;
    transition: transform 0.3s ease; /* Smooth animation for knob */

}

#volume-control::-moz-range-thumb {
    width: 0.5rem;
    height: 1.8rem;
    background: var(--dial-colour);
    opacity: 0.8;
    cursor: pointer;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
    z-index: 0;
    transition: transform 0.3s ease; /* Smooth animation for knob */
}


#volume-control-container > p {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 1rem; /*Space below the slider */
    /* border: 1px solid red; */
}

#buffering-indicator {
    position: absolute;
    font-size: 3rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FEFAE9;
    opacity: 0.0;
    transition: opacity 0.25s;
    z-index: 1; /* Ensure it is on top of the slider */
}

/**************************  MUTE BUTTON ************************** */

button {
    width: 9rem;
    height: 2rem;
    appearance: none; /* Removes default button styles in modern browsers */
    -webkit-appearance: none; /* Removes WebKit-specific styles (e.g., Safari, Chrome) */
    -moz-appearance: none; /* Removes Mozilla-specific styles (e.g., Firefox) */
    border: none; /* Removes any border */
    color: #100F03;
    margin-top: 0.75rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6);
    cursor: pointer;
}


/* *********** MOBILE STYLES *************** */
@media (max-width: 600px) {
    h1 {
        font-size: 3.6rem;
        font-weight: 600;
        margin-bottom: 1rem;
        text-align: center;
        }

    .temp-slider-container {
        background-repeat: no-repeat;
        background-position: 0 90%; /* Center the image */
       
    }

    /* Styles for screens narrower than 600px */
    #temp-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: var(--dial-colour);
        width: 1rem;
        height: 11rem;
        opacity: 0.6;
        border-radius: 0.5rem;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
        border: 1px solid transparent;
    }

    #temp-slider::-moz-range-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: var(--dial-colour);
        width: 2rem;
        height: 1rem;
        opacity: 0.6;
        border-radius: 0.5rem;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
        border: 1px solid transparent;
    }

    #temp-val {
        width: 8rem;
        height: 8rem;
        font-size: 6rem;
        /* margin-top: 12rem; */
        /* border: 1px solid #222; */
    }
    

    /* *** Volume *** */

    #volume-control-container {
      display: none;
    }

   .fnt-wght {
    font-weight: 300;
   }

    /* #volume-control::-webkit-slider-thumb {
        width: 1.5rem;
        height: 3.5rem;

    } */

    /* #volume-control::-moz-range-thumb {
        width: 1.5rem;
        height: 1.8rem;
    } */  

}