/**
 *    LITTLE SONIFICATION HOMEPAGE/INDEX STYLES
 */

body{
    --color-fg:         #000;

    margin:             0;
    min-height:         100dvh;

    main {
        font-family:        "Open sans","Helvetica Neue Light", "Helvetica Neue", sans-serif;
        font-weight:        200;  
        display:            flex;
        justify-content:    center;
        padding:            2rem;

        /* TEXT / FONT STYLES */
        a{
            color:                  var(--color-fg);
            font-weight:            500;
            text-underline-offset:  0.25rem;

            &.minor{
                font-weight:            300;
                text-decoration:        underline dotted;
            }

            &:visited{
                color:                  var(--color-fg);;
            }
        }


        h1{
            position:               sticky;
            top:                    0px;
            background:             rgba(255, 255, 255, 0.9);
            text-transform:         uppercase;
            letter-spacing:         0.1rem;
            font-size:              2.75rem;
            border-bottom:          3px solid var(--color-fg);
            line-height:            1;
            padding-bottom:         0.5rem;


            .small{
                font-size:              small;
                letter-spacing:         0.75rem;
                font-weight:            300;
            }
        }

        h2 {
            text-transform:         lowercase;
            margin-block-start:     0;
            margin-block-end:       0;
        }

        h4{
            opacity:                0.5;
            font-weight:            400;
        }

        p, ul{
            line-height:            1.5;

            li{
                margin-bottom:          0.5rem;
            }
        }

        .header__container{
            display:                    grid;
            grid-template-columns:      auto 1fr;
            column-gap:                 1rem;
            width:                      100%;
 

            .header__outline{
                display:                grid;
                grid-template-rows:     1fr 1fr;
                width:                  100%;
                border-left:            solid 1px var(--color-fg);

                div.underline{
                    border-bottom:     solid 1px var(--color-fg);
                }
            }
        }

        /* LAYOUT */
        .content__wrapper{
            max-width:                  40rem;

            section.projects,
            section.instruments{
                margin-top:                 5vh;
            }



        }
    }

}