/**
 *  GLOBAL STYLES
 */ 

body{
    --color-bg:          #2a2a2a; 

    --color-light:           #fff;
    --color-dark:           #131313;
    --color-grey:           #6b5c5c;
    --color-dark-offset:    #494949;
    --color-red-dark:       #6f091a;
    --color-red-light:      #c8102e;

}


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:                       70dvh;
    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__wrapper {
        background-position:        center;
        background-size:            105% auto; 
        background-repeat:          no-repeat;
        overflow:                   hidden;
        color:                      var(--color-light);
        height:                     10vh;
        display:                    flex;
        flex-direction:             column;
        justify-content:            end;


        h1.title{
            font-family:            "Sankofa Display", sans-serif;
            margin-block-start:     0;
            margin-block-end:       1rem;
            text-align:             center;
            color:                  var(--color-light);
            font-size:              5vmin;
            font-weight:            300;
            text-transform:         uppercase;
            letter-spacing:         0.5vmin;
            height:                 5dvh;
            display:                flex;
            align-items:            center;
            justify-content:        center;
        }

        .subtitle{
            text-align:             center;
            font-size:              1.5vmin;
        }
    }
}


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


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:              10vmin;
            }
            .subtitle{
                font-size:              2vmin;
            }
        }

    }
}