@mobile_view: ~"(max-width: 850px)";

* {
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --bg_final_pos: 200px;
    @media @mobile_view {
        --bg_final_pos: 150px;
    }
}

@keyframes background_animation {
    from {
        background-position-x: 0;
        background-position-y: 0;
    }
    to {
        background-position-x: var(--bg_final_pos);
        background-position-y: var(--bg_final_pos);
    }
}
body {
    margin: 30px;
    background-color: rgb(30, 255, 0);
    background-image: url("/svgs/backgrounds/projects.svg");
    background-size: 200px 200px;
    animation-name: background_animation;
    animation-duration: 3.33333s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    @media @mobile_view {
        background-size: 150px 150px;
        animation-duration: 2.66666s;
    }
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 30px;
    &::-webkit-scrollbar {
        display: none;
    }
    a { //card
        all: unset;
        flex-shrink: 0;
        aspect-ratio: 400 / 375;
        margin-right: 30px;
        border-radius: 20px;
        background-color: white;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        width: 400px;
        @media @mobile_view {
            width: 300px;
            margin-right: 20px;
            border-radius: 10px;
        }
        .banner {
            height: 46.6%;
            width: 100%;
            border-radius: 0;
            flex-shrink: 0;
        }
        .title {
            margin-top: 2.6%;
            margin-left: 2.6%;
            margin-bottom: 2.6%;
            flex-shrink: 0;
            @media @mobile_view {
                font-size: 1.5em;
            }
        }
        .description {
            margin-top: 0;
            margin-left: 2.6%;
            margin-right: 2.6%;
            margin-bottom: 2.6%;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            font-style: italic;
            flex-grow: 1;
        }
        .date {
            margin-top: 0;
            margin-bottom: 1.3%;
            margin-right: 2.6%;
            display: flex;
            justify-content: end;
            color: gray;
        }
    }
}