/**
 *  GLOBAL STYLES
 */ 

body {
    --color-bg:          #ddded1;  
    --color-fg:          #383838;  
    --color-light:      #fff;
}

main, button {
    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-fg);
    color:                       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(146, 146, 146, 0.25);
            padding:                0.75vmin 0;
            margin-top:             3.0vh;
            text-align:             center;

            #title{
                color:                  var(--color-bg);
                font-family:            "Homemade Apple", cursive;
                font-size:              2.5vmin;
                text-align:             center;
                text-transform:         lowercase;
                letter-spacing:         0.15vmin;
                margin-top:             1.25vmin;
                @media (max-width: 768px) { font-size:  5vmin;  }
            }
        }

        .voice-clock-group{
            display:                flex;
            justify-content:        center;
            margin-top:             0.25vh;
            filter:                 url(#handdrawn);

            .voice-clock-toggle{
                margin:             0rem 1vmin;
                cursor:             pointer;
                display:            flex;
                flex-direction:     column;
                align-items:        center;

                .clock-toggle{
                    font-size:          2.75vh;
                    aspect-ratio:       1 / 1;
                    width:              3.5vh;
                    display:            flex;
                    justify-content:    center;
                    align-items:        center;
                    border-radius:      50%;
                    transition:         all 200ms;

                    &:hover{
                        background:     var(--color-bg);
                        color:          var(--color-fg);

                        svg{
                            circle {
                                stroke: var(--color-fg);
                            }
                        }
                    }
                }

                .voice-marker{
                    height:             1px;
                    margin-bottom:      7.5px;
                    background-color:   var(--color-bg);
                    width:              50%;
                    display:            flex;
                    justify-content:    center;
                    opacity:            0;

                    &.active{
                        opacity:        1;
                    }
                }
            }
        }
    }

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

}