/* GRIDLOCK HTML and CSS template by riflesniper on vgen | buy the template here: https://vgen.co/riflesniper/shop | do not remove credit! */

/* as is standard with webpages these days, this design follows a mobile-first layout. keep that in mind while editing this CSS. */

:root {
    /* you don't need to change the colours on all of the elements! simply changing the colours on these values will recolour the whole document. */
    --primary: #ffff00;
    --backdrop: #000;
    --text: #fff;
}

/* creates the grid pattern on the background | from https://css-pattern.com/graph-paper/ */
html {
    --s: 105px;
    /* control the size*/
    --c1: var(--primary);
    --c2: var(--backdrop);

    --_g: #0000 90deg, var(--c1) 0;
    background:
        conic-gradient(from 90deg at 2px 2px, var(--_g)),
        conic-gradient(from 90deg at 1px 1px, var(--_g)),
        var(--c2);
    background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}

/* adds the decorative corners to divs | from https://css-shape.com/corner-only/ */
.corner-only {
    --s: 2rem;
    /* size of the corners */
    border: 8px solid var(--primary);
    padding: 0.5rem;
    background: var(--transparent) content-box;
    mask:
        conic-gradient(var(--backdrop) 0 0) content-box,
        conic-gradient(at var(--s) var(--s), #0000 75%, var(--backdrop) 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s));
    /* something in here isnt validating for W3C standards but idgaf its not my code snippet. if it works it works */
}

/* main container styling starts */
body {
    padding: 1rem;
}

main {
    backdrop-filter: blur(0.15rem);
    max-width: 800px;
    padding: 2rem;
    margin: 0 auto;
}

p,
ul {
    font-family: 'Kode Mono', monospace;
    color: var(--text);
}

ul {
    list-style: none;
}

.container {
    padding: 2rem;
}

.backlink {
    font-family: 'Kode Mono';
    color: var(--text);
    text-decoration: none;
    font-size: 1.5rem;
    transition: 0.4s ease;
}

.backlink:hover {
    color: var(--primary);
}

/* ideally you'll want to keep the image aspect ratio to a similar one as the placeholder */
.heading img {
    width: 100%;
    object-fit: cover;
}

h1,
h2 {
    font-family: 'Iceberg', sans-serif;
}

h1,
.heading p {
    text-align: center;
}

h1 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 4rem;
    line-height: 1.2;
}

/* changing the box and box holder elements to accomodate a column gallery layout */
.box {
    break-inside: avoid-column;
    background-color: var(--backdrop);
    margin: 2rem 0;
}

.boxholder {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    column-gap: 2rem;
    margin-bottom: 2rem;
}

.boxholder:last-of-type .box:last-of-type {
    margin-bottom: 0;
}

.box h2 {
    margin: 1rem;
    background-color: var(--primary);
    color: var(--backdrop);
    padding-left: 0.5rem;
}

/* the margins on the p and ul elements stop the text from hugging the edge of the divs, since the mask in the corner decor effect slightly crops the div */
.box p {
    margin: 0 1rem 1rem 1rem;
    text-wrap: balance;
}

.box a {
    text-decoration: none;
    transition: ease 0.4s all;
    color: var(--text);
}

.box a:hover {
    color: var(--primary);
}

@media screen and (min-width:800px) {

    /* bump up the grid size */
    html {
        --s: 185px;
        /* control the size*/
        --c1: var(--primary);
        --c2: var(--backdrop);

        --_g: #0000 90deg, var(--c1) 0;
        background:
            conic-gradient(from 90deg at 2px 2px, var(--_g)),
            conic-gradient(from 90deg at 1px 1px, var(--_g)),
            var(--c2);
        background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
    }

    .heading {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 2rem;
    }

    h1,
    .heading p {
        text-align: left;
    }

    .heading div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .heading img {
        max-width: 20rem;
    }

    .boxholder {
        margin-top: 2rem;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        column-gap: 2rem;
    }

    .box {
        margin: 0 0 2rem 0;
    }
}