@import "./css/variables.css";

html
{
    body
    {
        /* layout */
        margin:                 0;
        padding:                0;
        display:                grid;
        grid-template-rows:     auto 1fr auto;
        grid-template-areas:    "header" "main" "footer";
        min-height:             100vh;

        /* style */
        background-color:       var(--black);

        /* default font */
        font-family:            BespokeSerif-Regular;
        font-size:              var(--text-m);

        /* name styling */
        .name
        {
            font-family:        Pencerio-Hairline;
            font-weight:        bold;
        }

        header
        {
            /* Nav Bar */
            nav
            {
                display:            flex;
                flex-direction:     row;
                align-items:        center;
                justify-content:    space-between;
                padding-inline:     var(--space-s);

                @media screen and (max-width: 480px)
                {
                    padding-inline: 0;
                }

                ul
                {
                    list-style-type:    none;
                    display:            flex;
                    flex-direction:     row;
                    align-items:        center;
                    margin:             0;
                    padding:            0;
                    gap:                0;
                }

                .navBtn
                {
                    display:            flex;
                    flex-direction:     row;
                    align-items:        center;
                    padding:            var(--space-xs) var(--space-s);

                    /* Typography */
                    text-decoration:    none;
                    color:              var(--grey-9);

                    span 
                    {
                        color:          var(--color-2);
                    }
                }

                .navBtn:hover
                {
                    color:              var(--grey-2);
                    background-color:   var(--color-2);
                    
                    span 
                    {
                        color:          var(--grey-2);
                    }
                }
            }
        }

        main
        {
            /* PAGE TITLE */
            .pgTitle
            {
                /* layout */
                display:            flex;
                align-items:        center;
                justify-content:    center;
                height:             100%;

                /* typography */
                font-size:          var(--text-4xl);
                font-weight:        bold;
                text-align:         center;
                color:              var(--color-2-2);
            }

            a
            {
                /* layout */
                display:            flex;
                flex-direction:     row;
                align-items:        center;
                justify-content:    center;

                padding:            var(--space-xs);
                gap:                var(--space-xs);

                border:             1px solid currentColor;
                border-radius:      var(--radius-m);
                
                /* typography */
                text-decoration:    none;
                font-weight:        bold;
            }

            a:hover
            {
                background-color:   var(--grey-9);
                color:              var(--grey-1);
            }
            
            svg
            {
                width:  var(--text-l);
                height: var(--text-l);
            }
        }

        footer
        {
            display:            flex;
            justify-content:    flex-end;
            align-items:        center;
            padding:            var(--space-xs) var(--space-s);

            color:              var(--grey-5);

            a
            {
                text-decoration:    none;
                color:              currentColor;
            }

            a:hover
            {
                text-decoration:    underline;
                color:              var(--color-2);
            }
        }
    }
}