:root {
    --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
    --body-bg-image: url('https://noeternity.neocities.org/fairy.jpg');

    --bg: #020134;
    --text: #fceaff;
    --accent: #cdcdd3;
    --nav: #13092D;
    --panel: #02012B;
    --panel-alt: #020134;
    --header-color: #020134;
    --landing-bg: #06053E;
    --landing-border: #020134;
}


@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: Small;
    src: url('small.ttf') format('truetype');
}

@font-face {
    font-family: Basic;
    src: url('basic.tff') format('truetype');
}

html, body {
    font-family: 'Small', 'Nunito', sans-serif;
    margin: 0;
    font-size: 1rem;
    background-color: var(--bg);
    background-size: 65px;
    color: var(--text);
    background-image: var(--body-bg-image);
}

html {
    font-size: 18px;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

* {
    box-sizing: border-box;
}

#container {
    max-width: 900px;
    margin: 0 auto;
}

/* Full-page box21 frame for home layout */
#container.home-frame {
    padding: 23px;
    background-color: #020134;
    image-rendering: pixelated;
    background-image:
        url(f-kado1.gif),
        url(f-kado2.gif),
        url(f-kado3.gif),
        url(f-kado4.gif),
        url(f-ue.gif),
        url(f-sita.gif),
        url(f-migi.gif),
        url(f-hidari.gif);
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top left,
        bottom left,
        top right,
        top left;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;
    background-size:
        23px 23px,
        23px 23px,
        23px 23px,
        23px 23px,
        auto 23px,
        auto 23px,
        23px auto,
        23px auto;
}

#container a {
    color: var(--accent);
    font-weight: bold;
}

#header {
    width: 100%;
    background-color: #020134;
    height: 150px;
    background-image: url('https://noeternity.neocities.org/fairy.jpg');
    background-size: 100%;
}

#navbar {
    height: 40px;
    background-color: #02012B;
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

#navbar li a {
    color: var(--accent);
    font-family: 'Small', 'Nunito', sans-serif;
    font-weight: 800;
    text-decoration: none;
}

#navbar li a:hover {
    color: #a49cba;
    text-decoration: underline;
}

#flex {
    display: flex;
}

aside {
    background-color: #02012B;
    width: 200px;
    padding: 20px;
    font-size: smaller;
}

main {
    background-color: #020134;
    flex: 1;
    padding: 20px;
    order: 2;
}

/* Apply welcome-style frame to home panels */
.panel-frame {
    border: 0;
    padding: 28px 24px;
    image-rendering: pixelated;
    background-image:
        url(f-kado1.gif),
        url(f-kado2.gif),
        url(f-kado3.gif),
        url(f-kado4.gif),
        url(f-ue.gif),
        url(f-sita.gif),
        url(f-migi.gif),
        url(f-hidari.gif);
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top left,
        bottom left,
        top right,
        top left;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;
    background-size:
        23px 23px,
        23px 23px,
        23px 23px,
        23px 23px,
        auto 23px,
        auto 23px,
        23px auto,
        23px auto;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

#rightSidebar h3 {
    font-family: 'Small', 'Nunito', sans-serif;
    font-size: 1.5rem;
}

#rightSidebar ul,
#rightSidebar li,
#rightSidebar li a {
    font-family: 'Small', 'Nunito', sans-serif;
    font-size: 1.22rem;
}

footer {
    background-color: #02012b;
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
}

h1,
h2,
h3 {
    color: var(--accent);
}

h1 {
    font-size: 1.67rem;
}

strong {
    color: var(--accent);
}

.box {
    background-color: #020134;
    border: 1px solid var(--accent);
    padding: 10px;
}

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #020134;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

#topBar .scroll-text {
    display: inline-block;
    padding-left: 100%;
    animation: topbar-scroll 12s linear infinite;
}

@keyframes topbar-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}

/* landing page styles */
#landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.landing-box {
    background: var(--landing-bg);
    border: 2px solid var(--landing-border);
    padding: 40px 30px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(47, 46, 142, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35);
}

.landing-box h1 {
    margin: 0 0 12px;
    font-size: 3rem;
    letter-spacing: 0.12em;
}

.landing-box p {
    margin: 12px 0;
    color: #f4e9ff;
}

.landing-box .enter {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 32px;
    border: 2px inset var(--landing-border);
    background: var(--landing-border);
    border-radius: 0;
    color: #f4e9ff;
    font-family: 'Small', 'Nunito', sans-serif;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-box .enter:hover {
    background: var(--landing-bg);
    color: #f4e9ff;
    border-color: var(--landing-bg);
}

.small-note {
    margin-top: 20px;
    font-size: 0.95rem;
}

.small-note a {
    color: var(--accent);
    text-decoration: underline;
}

.box21 {
    margin: 1em auto;
    width: 80%;
    max-width: 560px;
}

.u01 {
    background:url(f-ue.gif) repeat-x;
    height:23px;
    margin:0 23px;
}

.s01 {
    background:url(f-sita.gif) repeat-x;
    height:23px;
    margin:0 23px;
}

.box-top {
    background-image:url(f-kado1.gif), url(f-kado2.gif);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:23px;
}

.box-center {
    background-image:url(f-migi.gif), url(f-hidari.gif);
    background-position:top right, top left;
    background-repeat:repeat-y, repeat-y;
}

.box-inner {
    margin: 0 23px;
}

.box-bottom {
    background-image:url(f-kado3.gif), url(f-kado4.gif);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:23px;
}

.welcome-box {
    background: var(--landing-bg);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(47, 46, 142, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35);
}

.welcome-box h1 {
    margin: 0 0 12px;
    font-size: 3rem;
    letter-spacing: 0.12em;
}

.welcome-box p {
    margin: 12px 0;
    color: #f4e9ff;
}

.welcome-box .enter {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 32px;
    border: 2px inset var(--landing-border);
    background: var(--landing-border);
    border-radius: 0;
    color: #f4e9ff;
    font-family: 'Small', 'Nunito', sans-serif;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.welcome-box .enter:hover {
    background: var(--landing-bg);
    color: #f4e9ff;
    border-color: var(--landing-bg);
}

/* stats.fm widget */
.stats-widget {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--accent);
    background: #020134;
}

.stats-widget-label {
    margin: 0 0 8px;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.stats-widget-track {
    margin: 0;
    font-size: 1.0rem;
    line-height: 1.4;
    min-height: 18px;
    word-break: break-word;
}

.stats-widget-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stats-widget-btn {
    display: inline-block;
    padding: 6px 8px;
    border: 1px solid var(--accent);
    color: #f4e9ff;
    text-decoration: none;
    font-size: 0.92rem;
    background: #02012b;
}