:root {
    --cotton: #FDF0F8;
    --cotton-pink: #FCD9F0;
    --lime: #CFFA34;
    --gum: #F47EBA;
    --hibiscus: #E7327A;
}

/* =========================
   BASE
========================= */

body {
    margin: 0;
    padding: 40px;

    font-family: 'Griffy', cursive;

    color: var(--hibiscus);

    background: var(--cotton-pink);

   background-image: url("https://github.com/CandyGreenTheSkunk/FurryStuff/blob/main/ChatGPT%20Image%20May%207,%202026,%2008_11_45%20PM.png?raw=true");
        

    background-size: auto;
}

/* =========================
   LAYOUT
========================= */

.container {
    max-width: 1000px;
    margin: auto;
}

/* =========================
   HEADER
========================= */

header {
    background: var(--cotton);

    border: 4px solid var(--hibiscus);
    border-radius: 25px;

    padding: 20px;

    box-shadow: 0 0 18px rgba(231, 50, 122, 0.25);

    text-align: center;
}

header h1 {
    color: var(--hibiscus);
}

/* =========================
   NAV
========================= */

nav a {
    display: inline-block;

    margin: 5px;

    padding: 6px 10px;

    border-radius: 12px;

    background: var(--gum);
    color: white;

    text-decoration: none;

    border: 2px solid var(--hibiscus);

    transition: 0.2s;
}

nav a:hover {
    background: var(--hibiscus);
}

/* =========================
   POSTS
========================= */

.post {
    margin-top: 25px;

    background: var(--cotton);

    border: 3px solid var(--hibiscus);
    border-radius: 20px;

    padding: 20px;

    box-shadow: 0 0 12px rgba(247, 126, 186, 0.3);
}

.post h2 {
    color: var(--hibiscus);
}

.post .date {
    color: var(--gum);
}

/* =========================
   ACCENT ELEMENTS
========================= */

a {
    color: var(--hibiscus);
}

::selection {
    background: var(--lime);
    color: black;
}