<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">

/* =======================================
   LIGHT MODE STYLING
======================================= */
:root {
    --text: darkslategrey;
    --border: lightgrey;
    --accent: teal;
    --bg: #dce3e1;
    --gradientTop: white;
    --gradientBottom: rgba(240, 248, 255, 0.8);
}

header {
    background: url('***light mode banner image***');
}

/* =======================================
   DARK MODE STYLING
======================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #4A4A59;
        --border: #3B1C7E;
        --accent: #3B1C7E;
        --bg: rgba(74, 74, 89, 0);
        --gradientBottom: rgb(232, 243, 255);
        --gradientTop: rgb(232, 243, 255);
    }

    header {
        background: url('https://arcanechariot.neocities.org/header.png');
    }
}

/* =======================================
   GLOBAL STYLING
======================================= */
* {
    box-sizing: border-box;
}

body {
    padding: 10px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 10px;
    color: var(--text);
    background-color: var(--gradientBottom);
    background-image: url('https://arcanechariot.neocities.org/background.png');
    background-repeat: repeat;
    background-size: 500px;
}

.container {
    max-width: 55rem;
    margin: 5vw auto 12px auto;
    border: 6px ridge var(--border);
    outline: 3px solid var(--gradientTop);
    outline-offset: 4px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 5px;
    gap: 5px;
    background-color: rgb(184, 158, 255);
}

.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

.clock-container {
    text-align: center;
    margin: 4px 0;
}

.lilguys {
    text-align: center;
    margin-top: 8px;
}

.lilguys img {
    display: inline-block;
    margin: 1px;
    max-width: 100px;
}

header {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 120px;
    border: 2px ridge var(--border);
    border-radius: 5px;
    position: relative;
}

header span {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    position: absolute;
    bottom: 0;
    right: 10px;
    margin: 10px;
    font-weight: bold;
    text-shadow:
        1px 1px var(--text),
        -1px 1px var(--text),
        1px -1px var(--accent),
        -1px -1px var(--accent);
    color: var(--gradientTop);
}

nav {
    border: 2px ridge var(--border);
    border-radius: 5px;
    padding: 5px;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

nav, nav * {
    font-family: 'Nunito Sans', sans-serif;
}

nav div {
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
    font-size: 1.25rem;
    margin: 5px 5px 10px 5px;
}

/* NAVIGATION */
nav a {
    display: block;
    margin: 5px;
    padding: 2px 7px;
    border-radius: 5px;
    text-decoration: none;
    background-color: rgb(184, 158, 255);
    font-family: 'Nunito Sans', sans-serif; /* apply globally */
    color: #0F0F1A; /* respects light/dark mode */
}

nav a:link,
nav a:visited {
    color: #0F0F1A; /* ensures link & visited use correct color */
}

/* BODY LINKS (outside nav) */
body a {
    color: #FF5F87;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
}

body a:visited {
    color: #FF5F87;
}

body a:hover,
body a:focus {
    font-style: italic;
    color: #FF5F87;
}

/* NAV LINKS */
nav a {
    color: #0F0F1A;
    text-decoration: none;
    background-color: rgb(184, 158, 255);
    font-family: 'Nunito Sans', sans-serif;
}

nav a:link,
nav a:visited {
    color: #0F0F1A;
}

nav a:hover,
nav a:focus,
nav a:active {
    background-color: rgb(106, 197, 255);
    font-style: italic;
    color: #0F0F1A;
}

div.small > img {
    display: block;
    margin: 5px auto;
    border: 2px ridge var(--border);
    border-radius: 5px;
}

section {
    border: 2px ridge var(--border);
    border-radius: 5px;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
    padding: 5px;
}

footer {
    text-align: center;
    margin-bottom: 5vw;
    font-size: 0.8rem;
}

footer a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Nunito', sans-serif;
    margin: 5px;
    line-height: 1.2;
}

h1 {
    font-size: 1.4rem;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px ridge var(--border);
    padding-bottom: 5px;
}

h2 {
    font-size: 1.25rem;
    font-weight: normal;
    text-align: center;
}

h3 { font-size: 1.1rem; }

h4 {
    font-size: 1rem;
    color: var(--accent);
    padding-left: 12px;
}

img { max-width: 100%; }
pre { overflow-x: auto; }

a:hover,
a:focus { font-style: italic; }
a:visited { color: #FF5F87; }

/* USERBOXES */
.userboxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

div .userboxes img {
    width: 48%;
    max-width: 48%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Make 2 per row */
.userboxes img:nth-child(odd),
.userboxes img:nth-child(even) {
    flex: 0 0 auto;
}

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat996.cur), auto !important;} /* End https://www.cursors-4u.com */