@font-face {
    font-family: 'EarlyGameboy';
    src: url('assets/EarlyGameBoy.ttf');
}

@font-face {
    font-family: 'RetroFont';
    src: url('assets/RetroFont.tff');
}

body {
    font-size: 32px;
    color: #521e23;
    background-image: url("assets/marge.png"), url("assets/bg.png");
    background-repeat: repeat-y, repeat;
    background-position: 128px top, left top;
    font-family: 'RetroFont';
}

main {
    background-color: #f9f5d2;
    width: 840px;
    padding: 4px;
    border: 8px solid #521e23;
    margin: auto;
    margin-top: auto;
    margin-top: 24px;
}

main > * {
    border: 4px solid #b64d75;
    border-top: 0;
}

header {
    border-top: 4px solid #b64d75;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-left: 20px;
    box-sizing: border-box;
}

nav {
    font-size: 24px;
    padding-right: 33px;
    height: 45px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

a {
    color: #521e23;
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
    text-decoration-inset: 0px;
    text-decoration-skip: edges;
    margin-right: 12px;
    margin-left: 12px;
}

p > a:has(img) {
    display: inline-block;
    position: relative;
    top: 4px;
    margin: 0;
}

article {
    padding: 36px 16px;
    padding-bottom: 36px;
    padding-bottom: 120px;
}

h1 {
    font-size: inherit;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-thickness: auto;
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
    text-decoration-inset: 0px 4px;
    text-decoration-skip: edges;
    margin: 20px 0;
    margin-top: 20px;
}

h1::before {
    content: url("/assets/arrow.png");
    margin-right: 12px;
}

p {
    margin: 16px 16px;
}

div#lol {
    position: absolute;
    border: 0;
}

div#lol::after {
    content: url('/assets/lol.png');
    position: relative;
    left: 303px;
    bottom: 104px;
}

.logo {
    font-family: EarlyGameBoy;
    font-size: 100px;
    text-decoration: none;
    line-height: 1;
    color: #521e23;
    display: block;
}

.inline-row {
    display: flex;         /* Puts everything in a row */
    align-items: center;   /* Centers everything vertically */
    gap: 12px;             /* Adds space between cat, arrow, and text */
}

.cat-img {
    width: 48px;
    image-rendering: pixelated; /* Keeps the cat crisp */
}

.arrow-img {
    width: 24px; /* Adjust this to match your arrow's size */
    height: auto;
    image-rendering: pixelated;
}