*,
body,
html {
    margin: 0;
    padding: 0;
    font-family: "Comic Sans MS", sans-serif;
    /* background-color: white; */
    color: black;
    --red: rgb(255, 52, 52);
}

body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

#main {
    --width: 85%;
    --height: 85%;
    width: var(--width);
    text-align: center;
    margin: 50px;
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.title {
    font-size: 4em;
    color: black;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.75em;
    font-weight: 300;
    font-style: italic;
    color: black;
    margin-bottom: 20px;
    z-index: 2;
}

img {
    width: 150px;
    height: auto;
    margin-bottom: 0px;
    transform: translateY(-50px);
    z-index: 1;
}

p#note {
    font-size: 1.5em;
    font-style: italic;
    color: black;
    transform: translateY(-50px);
}

#static-pages {
    width: 90%;
    margin-top: 0px;
    display: grid;
    grid: 1fr / 1fr 1fr 1fr;
    gap: 10px;
}

#static-pages a {
    width: 1fr;
    height: 2.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0;
    font-size: 1.2em;
    padding: 5px;
    color: var(--red);
    background-color: white;
    border: 3px solid var(--red);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.75s ease;
}

/* categories link spans the full width (bottom row) */
.categories-link {
    grid-column: 1 / -1;
    height: 3em;
    margin-top: 10px;
}

#static-pages a:hover {
    color: white;
    background-color: var(--red);
}

#catagory-pages {
    margin-top: 30px;
    display: grid;
    grid: 1fr / 1fr 1fr 1fr;
    gap: 10px;
}

#catagory-pages a {
    width: 1fr;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    font-size: 1.2em;
    padding: 5px;
    color: var(--red);
    background-color: white;
    border: 3px solid var(--red);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.75s ease;
}

#catagory-pages a:hover {
    color: white;
    background-color: var(--red);
}

.checkered-border {
    --checker-size: 50px;
    --border-thickness: calc(0.5 * var(--checker-size));
    position: relative;
    z-index: 0; /* base stacking context */
    background: white; /* inner area stays empty/white */
    box-sizing: border-box;
}

/* checker frame drawn outside the box */
.checkered-border::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-thickness));
    /* layered gradients produce the checkerboard */
    background-image:
        linear-gradient(45deg, var(--red) 25%, transparent 25%),
        linear-gradient(135deg, var(--red) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--red) 75%),
        linear-gradient(135deg, transparent 75%, var(--red) 75%);
    background-size: var(--checker-size) var(--checker-size);
    background-position: 0 0, calc(var(--checker-size)/2) 0, calc(var(--checker-size)/2) calc(var(--checker-size)/2), 0px calc(var(--checker-size)/2);
    pointer-events: none;
    z-index: -2; /* behind everything (frame) */
}

/* inner mask so the checker only shows as a frame exactly two checkers thick */
.checkered-border::after {
    content: "";
    position: absolute;
    inset: var(--border-thickness);
    background: white;
    pointer-events: none;
    z-index: -1; /* sits above the frame but behind content */
}

/* ensure direct children render above the inner mask */
.checkered-border > * {
    position: relative;
    z-index: 1;
}

/* make subtitle stack above the image when they overlap */
.checkered-border > .subtitle {
    z-index: 3; /* higher than the generic children z-index */
}

/* ensure images inside the checkered border sit below the subtitle visually */
.checkered-border > img {
    z-index: 2;
}