:root {
    --p-1: .2em;
    --p-2: .4em;
    --p-3: .6em;
    --p-4: .8em;
    --p-5: 1em;

    --font: 10pt/1.4 calibri;

    --solid: 1px solid var(--faded);
    --dotted: 1px dotted var(--faded);

    --accent: #d8cfc4;
    --darkgreen: #758664;
    --green: #afbd7f;
    --lightgreen: #f0f7d9;
    --light: #f5f1ea;
    --dark: #7a6963;
    --faded: #afa69d;
    --white: #fcfcfc;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0;
}

@font-face {
    font-family: dotted;
    src: url(https://file.garden/ZdkezegxzVCR-6D7/neocities/fonts/Minecart%20LCD.ttf);
}

/* main style */
body {
    font: var(--font);
    text-transform: lowercase;
    color: var(--dark);
    background: var(--light) url("/img/stripe.png") repeat center / auto;
    background-blend-mode: lighten;
}

#container {
    max-width: 400px;
    margin: 10% auto;
}

#wrapper {
    border-width: 7px;
    border-style: solid;
    border-image: url("/img/lace.gif") 7 fill round;
    margin-block: var(--p-1);
}

footer {
    text-align: center;
    color: var(--faded);
}

footer a[href="/"] {
    text-decoration: none;
}

/* navigation */
#sidebar {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 0;
    word-break: break-all;
    gap: var(--p-2);
    border-right: var(--dotted);
    padding: var(--p-2);
}

#sidebar img:not(:last-child) {
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
    border: var(--solid);
    padding: 2px;
}

#sidebar a:not(:last-child) {
    display: flex;
    align-items: baseline;
    color: var(--dark);
    border-bottom: var(--dotted);
    text-decoration: none;
}

#sidebar a:not(:last-child)::before {
    content: "";
    background: url("/img/clover.png") no-repeat center / contain;
    display: inline-block;
    aspect-ratio: 1/1;
    width: 14px;
    margin-right: var(--p-2);
    position: relative;
    top: 3px;
}

#sidebar a:not(:last-child):hover {
    color: var(--green);
}

#sidebar .button { 
    margin-top: auto;
}

/* images */
img {
    max-width: 100%;
    object-fit: cover;
}

.img {
    border: 1px solid var(--faded);
    padding: var(--p-1)
}

#header-img {
    display: flex;
    align-items: end;
    justify-content: start;
    height: 80px;
    background: var(--faded) url("/img/clovers.png") repeat center / cover;
    border-block: var(--solid);
    background-blend-mode: overlay;

    marquee {
        color: var(--darkgreen);
        text-shadow: 1px 0 var(--white), -1px 0 var(--white), 0 2px var(--white), 0 -1px var(--white),
        1px 1px var(--white), -1px -1px var(--white), 1px -1px var(--white), -1px 1px var(--white);
        background: linear-gradient(transparent, var(--white));

        img {
            width: 14px;
            margin-top: -4px;
        }
    }
}

img[src="./img/checkerboard_cookies.png"] {
    float: right;
    width: 40px;
    padding-top: var(--p-2);
    padding-left: var(--p-2);
    filter: sepia(60%) opacity(.4);
}

.emote {
    width: 20px;
    display: inline;
}

/* text */
h1, h2, h3, h4, h5 {
    margin: 0;
}

h5 {
    background: linear-gradient(transparent 60%, var(--lightgreen) 60%);
    display: inline;
    font-size: inherit;
    font-weight: bold;
}

h4 {
    font-size: 13pt;
    font-variant: small-caps;
    color: var(--faded);
}

h4::before {
    content: "✱";
    padding-right: var(--p-1);
    color: var(--accent);
    font-size: 9pt;
}

h3 {
    background: linear-gradient(var(--accent) 40%, var(--faded) 80%);
    color: var(--white);
    font-size: 12pt;
    display: inline;
    border-bottom-right-radius: var(--p-2);
    position: relative;
    left: -.3em;
    top: -.3em;
    padding: 0 var(--p-1);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: bold;
}

h2 {
    border-left: 4px solid var(--green);
    background: linear-gradient(to right, var(--lightgreen) 60%, transparent);
    color: var(--darkgreen);
    padding: var(--p-2);
    text-align: left;
}

h1 {
    font-size: 13pt;
    letter-spacing: .04em;
    font-variant: small-caps;
    font-weight: thin;
    color: var(--darkgreen);
}

p {
    overflow-wrap: break-word;
    text-align: justify;
    margin: 0;
}

.warning {
    border: dashed 1px var(--green);
    background: var(--lightgreen);
    padding: var(--p-1) var(--p-2);
    border-radius: var(--p-2);
    text-align: left;
    color: var(--darkgreen);
}

/* headers */
#header {
    position: sticky;
    top: 0;
    z-index: 5;
}

header {
    display: flex;
    justify-content: space-between;
    font-variant: small-caps;
    padding: var(--p-1) var(--p-2);
    background: var(--white);

    span {
        color: var(--green);
    }

    nav {
        display: flex;
        align-items: center;
        gap: var(--p-1);
        color: var(--accent);
        
        a:not(:last-child)::after {
            content: "|";
            padding-left: var(--p-2);
            color: var(--faded);
        }

        a:hover {
            color: var(--green)
        }
    }
    
}

.outlink:link, .outlink:visited { color: var(--green); text-decoration: 1px underline dotted; }
.outlink:hover, .outlink:active { color: var(--white); background: var(--green); text-decoration: none; }

a:link, a:visited { color: var(--dark); text-decoration: none; }
a:hover, a:active { color: var(--green); }

hl {
    background: var(--light);
}

hr {
    border-style: dotted;
    margin-block: var(--p-2);
}

/* buttons */
.btn {
    font: var(--font);
    font-variant: small-caps;
    padding: 0;
    outline: var(--solid);
    border: var(--white);
    background: linear-gradient(var(--white) 30%, var(--light) 70%);
    border-radius: var(--p-1);
    text-shadow: 1px 1px 1px var(--white);
}

.btn > a:link, a:visited {
    color: var(--dark);
}

.btn:hover {
    background: var(--white);
    color: var(--faded)
}

/* list */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#news {
    padding: 0 var(--p-2) var(--p-2) var(--p-2);
    background: var(--light);

    h4 {
        position: sticky;
        top: 0;
        background: var(--light);
        padding-top: var(--p-2);
    }
}

ul#news li > b::before {
    content: "■ ";
    font-size: 12pt;
}

/* flex */
.flex-column { display: flex; flex-flow: column wrap; }
.overflow {flex: 1 1 0; overflow-y: auto; }

.card {
    border-radius: 0;
    border: var(--solid);
    color: inherit;
    background: var(--white);
    max-height: 400px;
    overflow-y: auto;
}

.card-block {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    border-radius: 0;
    color: inherit;
    padding: var(--p-2);
    gap: var(--p-2);
}

.row {
    --bs-gutter-x: 0;
}


#bottom-row {
    border-top: var(--dotted);
}

marquee {
    padding: 0;
}