/* --- Base Setup & Variables --- */
:root {
    --bg-color: #F9B591;      /* Peach Background */
    --text-color: #2F5D62;   /* Dark Teal Graphic/Text */
    --text-hover-color: #1E3C40; /* Darker Teal for Hover */
    --link-underline-color: rgba(47, 93, 98, 0.5); /* Teal for underline */
    --responsive-unit: vmin;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    /* Improve pixel font rendering where supported */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    font-smooth: never;
   -webkit-font-smoothing: none;
}

body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* --- CHANGE FONT FAMILY --- */
    font-family: 'Bytesized', monospace; /* Added monospace fallback */
    background-color: var(--bg-color);
    position: relative;

    /* --- Background Image --- */
    background-image: url('bb2.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- Link Container --- */
.content-container {
    position: absolute;
    bottom: 8vmin; /* <<< ADJUST THIS VALUE for vertical placement >>> */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center; /* Aligns */
    gap: calc(5 * var(--responsive-unit)); /* sigh... Increased gap slightly */
                                          /* <<< ADJUST GAP if needed >>> */
}

/* --- Link Styling --- */
.styled-link {
    display: inline-block;
    /* --- ADJUST FONT SIZE FOR PIXEL FONT --- */
    /* Pixel fonts work best at multiples of their base size. */
    /* Clamp might make it blurry between sizes. Adjust carefully. */
    font-size: clamp(1.5rem, calc(4 * var(--responsive-unit)), 4.5rem);
    /* font-weight: normal; /* Explicitly normal, usually one weight */
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase; /* */
    letter-spacing: 0.04em; 
    text-shadow: none; 

    padding: calc(0.5 * var(--responsive-unit)) calc(1 * var(--responsive-unit));
    border-bottom: 2px solid transparent;

    transition: color 0.2s ease, border-color 0.2s ease; /*  */
}

.styled-link:hover,
.styled-link:focus {
    color: var(--text-hover-color);
    border-bottom-color: var(--link-underline-color);
}