/**
 *  GLOBAL STYLES
 */ 

body{
    --color-bg:          #252525; 
    --color-light:           #fff;
}


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


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


.content__wrapper{
    height:                      100dvh;
    width:                       100dvh;
    display:                     flex;
    flex-direction:              column;
    justify-content:             space-between;
    background:                  var(--color-bg);
}

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.25);
        padding:                 2.5vh 0;
        margin-top:              5vh;
        font-size:               2vmin;
        font-family:            "Sankofa Display", sans-serif;
        letter-spacing:          0.5vmin;

        .subtitle{
            text-align:             center;
            color:                  var(--color-light);
            text-transform:         lowercase;
        }

        .select-wrapper{
            display:                flex;
            width:                  100%;
            justify-content:        center;
            margin-top:             0.5vh;

            select{
                font-family:        "Sankofa Display", sans-serif;
                letter-spacing:     0.5vmin;
                color:              var(--color-light);
                width:              100%;
                font-size:          3vmin;
                font-weight:        200;
                text-align-last:    center;
                margin:             0 1rem;
            }
        }
    }
}

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

section.threshold__container{
    --size:                     3.5vmin;
    display:                    flex;
    justify-content:            center;


    .threshold__wrapper{
        display:                flex;
        gap:                    1.25vmin;

        .threshold-cell{
            display:            flex;
            justify-content:    center;
            align-items:        center;
            background:         white;
            opacity:            0.05;
            width:              var(--size);
            height:              var(--size);
            border-radius:      50%;
            transform:          scale(0.66);
            cursor:             pointer;
            transition:         all 500ms;
            
            &.included{
                opacity:        0.35;
            }

            &.active{
                opacity:        0.8;
                transform:      scale(1);
                box-shadow:     0 0 10px 4px #ffffff;
            }
        }
    }

}

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;
            }
        }
    }
}