@import "./variables.css";

body
{
    background: url("../assets/images/csProjectImages/Circuit_Unsplash.jpg") lightgray 50% / cover no-repeat;
    background-blend-mode: multiply, normal;
}

.project1
{
    .projectPic
    {
        padding-top:    10em;
    }

    img
    {
        max-width:      600px;
        border-radius:  var(--radius-m);
    }
}

.project2
{
    .projectPic
    {
        padding-bottom:        10em;
        align-self:            flex-start;
    }

    img
    {
        max-width:      600px;
        border-radius:  var(--radius-m);
    }
}

.project3
{
    .projectPic
    {
        padding-top:        10em;
    }

    img
    {
        max-width:          300px;
        border-radius:      var(--radius-m);
    }
}

.project4
{
    .projectPic
    {
        padding-top:    8em;
        padding-inline: 2em;
    }

    img
    {
        max-width:      500px;
        border-radius:  var(--radius-m);
        /* transform:      rotate(180deg); */
    }
}

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

@media screen and (max-width: 1025px)
{
    .project
    {
        display:            flex;
        flex-direction:     column-reverse;
        justify-content:    center;
        align-items:        center;
        gap:                var(--space-xl);
        padding:            var(--space-xl) 15%;

        .projectPic
        {
            display:            flex;
            justify-content:    center;
            align-items:        center;
            align-self:         center;
            height:             100%;
            aspect-ratio:       2/1;
            overflow-y:         hidden;

            border-radius:      var(--radius-m);
            box-shadow:         0px 5px 10px 2px var(--black-25);
        }

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

        img
        {
            align-self: flex-start;
        }
    }

    .project1
    {
        padding-top:    0;
        flex-direction: column;

        .projectPic
        {
            padding-top:    0;
        }

        img
        {
            max-width:      100%;
            border-radius:  var(--radius-m);
        }
    }

    .project2
    {
        .projectPic
        {
            padding-bottom: 0;
            align-self:     center;
        }

        img
        {
            align-self:     center;
            max-width:      100%;
            border-radius:  var(--radius-m);
        }
    }

    .project3
    {
        flex-direction: column;

        .projectPic
        {
            padding-top:        0;
            padding-inline:     0;
        }

        img
        {
            align-self:         center;
            max-width:          100%;
            border-radius:      var(--radius-m);
        }
    }

    .project4
    {
        padding-top:    0;
        
        .projectPic
        {
            padding-top:    0;
            padding-inline: 0;
        }

        img
        {
            align-self:     center;
            object-fit:     cover;
            max-width:      100%;
            border-radius:  var(--radius-m);
        }
    }
}