@import url("./content.css");

.page-desc {
    text-align: center;
    margin-bottom: 2%;
}

.projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-block-start: 1.5em;
}

/* Projects */
.proj {
    text-decoration: none;
    color: var(--chaotic-text);
    border-radius: 15px;
    text-align: center;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.info {
    padding: 5% 15%;
    display: flex;
    flex-direction: column;
    gap: 2%;
}

.desc {
    margin-block: 0;
}

/* Specific Projects */
#yt {
    background-image: url("../../img/works/yt/cover.jpg");
}

#signal-you {
    background-image: url("../../img/works/signal-you/cover.jpg");
}

#calling-card {
    background-image: url("../../img/works/calling-card/cover.jpg");
}

#patch-notes {
    background-image: url("../../img/works/patch-notes/cover.jpg");
}

#homepage {
    background-image: url("../../img/works/homepage/cover.jpg");
}

.proj-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.5em;
    row-gap: 1em;
    margin-block: 1em;
}

.tag {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.tag-name {
    width: max-content;
    margin-block: 0;
}

.proj-tags > .tag {
    border-radius: 50px;
    border-style: none;
    padding: 2px 7px;
    margin-block: 0;
}

/* Project tags */
#gimp {
    background-color: #645b44;
}

#davinci {
    background-color: #2c4865;
}

#kotlin {
    background-color: #bb1be5;
}

#xml {
    background-color: #494949;
}

#and-studio {
    background-color: #299459;
}

#html {
    background-color: #387aff;
}

#css {
    background-color: #00818b;
}

#tailscale {
    background-color: #302c2c;
}

#blog {
    background-color: #b07100;
}


@media screen and (max-width:800px) {
    .projects {
        grid-template-columns: 1fr;
    }
}