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

.proj-hero {
    height: 25%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: 1em 10%;
    border-radius: 15px;
    padding-block: 2%;
}

h2 {
    text-align: center;
    margin-inline: 10%;
}

main {
    padding: 0;
}

.header {
    display: flex;
    background-color: var(--chaotic-n1-800);
    border-radius: 9px 9px 0 0;
    padding: 0 2%;
}

.links {
    display: flex;
    justify-content: start;
    align-content: center;
    width: 50%;
    flex-wrap: wrap;
    column-gap: 0.5em;
    row-gap: 0;
}

.links > .tag {
    border-radius: 50px;
    border-style: none;
    padding: 4px 9px;
}

/* Link tags */
#github.tag {
    background-color: #0d1117;
    color: #f0f6fc;
}

#website.tag {
    background-image: none; 
    background-color: #18111c;
    color: #cab4ee;
}

#codeberg.tag {
    background-color: #007dbd;
    color: #cce5ff;
}

.proj-tags {
    display: flex;
    justify-content: end;
    align-content: center;
    width: 50%;
}

.proj-main {
    padding: 1.15em;
}

.proj-main > p > a {
    text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

body#yt {
    background-image: url("../../img/works/yt/bg.jpg");
}

@media screen and (max-width:800px) {
    h1 {
        font-size: 1.75em;
    }

    h2 {
        font-size: 1.25em
    }

    .proj-tags {
        display: none;
    }

    .links {
        width: 100%;
        justify-content: center;
        row-gap: 1em;
        padding: 1em;
    }
}