/**
 *  GLOBAL STYLES
 */ 

body{
    --color-bg:          #c1c1c1; 
    --color-light:      #fff;
    --color-vinyl:      #222222;
    --rgb-theme-01: 244, 103, 199;
    --rgb-theme-02: 190, 82, 255;
    --rgb-theme-03: 139, 119, 255;
    --rgb-theme-04: 0, 170, 194;
    --rgb-theme-05: 154, 162, 0;
    --rgb-theme-06: 248, 121, 23;
    --rgb-theme-07: 240, 177, 3;
    --rgb-theme-08: 204, 61, 51;
    --rgb-theme-09: 41, 152, 80;
    --rgb-theme-10: 0, 100, 230;
    --rgb-theme-11: 236, 67, 67;
    --rgb-theme-12: 207, 111, 182;
    --color-theme-01: rgb(var(--rgb-theme-01));
    --color-theme-02: rgb(var(--rgb-theme-02));
    --color-theme-03: rgb(var(--rgb-theme-03));
    --color-theme-04: rgb(var(--rgb-theme-04));
    --color-theme-05: rgb(var(--rgb-theme-05));
    --color-theme-06: rgb(var(--rgb-theme-06));
    --color-theme-07: rgb(var(--rgb-theme-07));
    --color-theme-08: rgb(var(--rgb-theme-08));
    --color-theme-09: rgb(var(--rgb-theme-09));
    --color-theme-10: rgb(var(--rgb-theme-10));
    --color-theme-11: rgb(var(--rgb-theme-11));
    --color-theme-12: rgb(var(--rgb-theme-12));
}


main, button {
    font-family:                "Space Grotesk", sans-serif;
    font-optical-sizing:        auto;
    font-style:                 normal;
    font-weight:                300;  
    background:                 transparent;
}


/**********************/
/*** CONTENT STYLES ***/
/**********************/

.content__wrapper{
    height:                      100dvh;
    width:                       70dvh;
    display:                     flex;
    flex-direction:              column;
    justify-content:             space-between;
    background:                  #000;
}

section.title__container{
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    padding-bottom:             calc(var(--margin-std) * 0.25);

    .title-info__wrapper{
        background:             rgba(0, 0, 0, 0.55);

        padding:                1.25vh 0;
        margin-top:             2.5vh;
        color:                  var(--color-light);
        text-align:             center;


        #title{
            font-family:            "Staatliches", sans-serif;
            font-size:               2vmin;
            text-align:             center;
            text-transform:         lowercase;
            letter-spacing:         0.15vmin;
        }


        #location{
            font-family:            "Staatliches", sans-serif;
            font-size:          3.5vmin;
            font-weight:        200;
            text-align-last:    center;
            /* margin:             0.25vh 0; */
            letter-spacing:     0.2vmin;

        }

        #date{
            font-size:          1.5vmin;
        }

    }
}

section.chart__container{
    margin:                     var(--margin-std);
}

section.track__container{
    --size:                     6vmin;
    display:                    flex;
    justify-content:            center;

    .track__wrapper{
        display:                flex;
        gap:                    2vmax;
        margin-top:             -5vmin;

        .track-cell{
            width:              var(--size);
            display:            flex;
            flex-direction:     column;
            cursor:             pointer;
            transition:         all 300ms;

            .ring-control{
                height:             var(--size);
                background-color: rgba(0, 0, 0, 0.75);
                border-radius:      50%;
            }

            .ring-control-path,
            .ring-control-icon{
                opacity:            0.45;    
                transition:         all 300ms;     
            }

            .metric-label,
            .track-label{
                opacity:            0;
                margin:             0  -0.5vmin;
                font-size:          1.05vmin;
                color:              #fff;
                text-align:         center;
                transition:         all 300ms;   
            }

            .metric-label{
                margin-top:         0.5vmin; 
            }
            .track-label{
                font-style:         italic;
            }

            &:hover{
                transform:          scale(1.15);

                .metric-label,
                .track-label,
                .ring-control-icon,
                .ring-control-path{
                    opacity:        1;
                    /* fill:    #fff; */
                }
                .track-label{
                    opacity:        0.65;
                }
            }


        }
    }

}

section.controls__container{
    --button-width:             5dvh;
    display:                    grid;
    grid-template-columns:      1fr;
    grid-template-rows:         1fr;
    height:                     15dvh; 
    color:                      var(--color-light);
}



/******************************/
/*** MOBILE / TABLET STYLES ***/
/******************************/

@media (max-width: 768px)  {

    section.title__container{
        .title__wrapper {
            h1.title{
                font-size:              5vmin;
            }
            .subtitle{
                font-size:              2vmin;
            }
        }
    }
}