@import "./variables.css";

body
{
    background: radial-gradient(75% 200% at 20% 25%, #0c0c0c 50%, #0c0c0c00 100%), url(/src/assets/images/Computer_Unsplash.jpg) darkgray 50% / cover no-repeat;
    background-blend-mode: hard-light, difference;
}

header
{
    background-color: var(--black-75);
}

/* INDEX PAGE */
.indexContent
{
    display:   flex;
    flex-direction: row;
    align-items: center;
    padding-inline: 10%;

    @media screen and (max-width: 480px)
    {
        justify-content: center;
    }

    .left
    {
        display:        flex;
        flex-direction: column;
        gap:            var(--space-s);
        max-width:      100%;

        @media screen and (min-width: 480px)
        {
            max-width: 75%;
        }

        h1
        {
            /* layout */
            padding: 0;
            margin:  0;

            /* typography */
            font-size:      var(--text-3xl);
            color:          var(--color-2);
        }
        
        h2
        {
            /* layout */
            padding: 0;
            margin:  0;

            /* typography */
            font-size:          var(--text-2xl);
            text-wrap:          wrap;
            text-wrap-style:    balance;
        }

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

        p
        {
            /* layout */
            padding: 0;
            margin:  0;

            /* typography */
            text-wrap:          wrap;
            text-wrap-style:    balance;
        }

        .social
        {
            display:        flex;
            flex:           row;
            align-items:    center;
            gap:            var(--space-s);

            a
            {
                /* typography */
                font-size:          var(--text-m);
                color:              var(--color-1);
            }

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

            .resumeBtn
            {
                /* layout */
                padding:            var(--space-xs) var(--space-s);
                gap:                var(--space-xs);
                
                /* style */
                background:         none;

                /* typography */
                color:              var(--color-2);
                font-size:          var(--text-m);

                svg
                {
                    width:          var(--text-xl);
                    height:         var(--text-xl);
                }
            }

            .resumeBtn:hover
            {
                background-color: var(--color-2);
                color:            var(--grey-1);
            }
        }
    }

    .right
    {
        flex: 1;
    }
}