@import "./variables.css";

header
{
    width:              100%;
    position:           fixed;

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

.bg1
{
    background: radial-gradient(109.69% 109.69% at -9.69% 50.13%, #540A0A 0%, rgba(13, 13, 13, 0.00) 100%);

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

.bg2
{
    background: radial-gradient(106.69% 106.69% at 106.69% 50.25%, #004360 0%, rgba(13, 13, 13, 0.00) 100%);

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

.labelSection
{
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    align-self:     stretch;
}

h1
{
    /* layout */
    display:            flex;
    padding:            var(--space-m) 0;
    justify-content:    center;
    align-items:        center;
    align-self:         stretch;

    /* typography */
    text-align:         center;
    font-size:          var(--text-2xl);
    font-family:        BespokeStencil-Bold;
}

.project
{
    display:            flex;
    flex-direction:     row;
    padding-inline:     5%;
    justify-content:    space-evenly;
    align-items:        flex-start;
    gap:                var(--space-xl);
    height:             auto;

    .projectPic
    {
        display:            flex;
        justify-content:    center;
        align-items:        center;
        align-self:         flex-end;
        height:             10em;
        overflow-y:         hidden;
    }

    img
    {
        width:  100%;
    }

    .description
    {
        /* layout */
        display:        flex;
        flex-direction: column;
        align-items:    flex-start;
        max-width:      50%;
        padding:        var(--space-m) 0;
        gap:            var(--space-s);

        /* typography */
        text-wrap-mode:     wrap;
        text-wrap-style:    pretty;

        h2
        {
            align-self: stretch;
            margin:     0;
            padding:    0;

            /* typography */
            font-size:      var(--text-xl);
            font-style:     normal;
            font-family:    BespokeSerif-Bold;
        }

        p
        {
            align-self: stretch;
            margin:     0;
            padding:    0;
            
            filter:     opacity(80%);
            font-size:  var(--text-m);
        }
    }

    .buttons
    {
        display:        flex;
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            var(--space-m);

        a
        {
            text-wrap: nowrap;
        }
    }
}

a
{
    color:  var(--grey-9);
}