:root {
    --black: #121212;
    --black2: #1A1A1A;
    --white: #EAEAEA;
    --white2: #F5F5F5;
    --red: #B22222;
    --red2: #C1272D;
    --gray: #666666;
    --gray2: #777777;
    --lightgray: #CCCCCC;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scrollbar-color: var(--red) var(--black);
    scrollbar-width: thin;
}

body {
    background-color: var(--black);
    font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", "M PLUS 1p", sans-serif;
}

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

h1, h2, h3 {
    font-weight: bold;
    margin-block: 10px;
    line-height: normal;
}

p {
    margin-block: 8px;
    line-height: normal;
}

b {
    font-weight: bold;
}

ul {
    line-height: normal;
}

/* The logo and version container */
.site-title {
    display: flex;
    flex-direction: column;
}

/* .title and header decoration container */
.head-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.header-gif img {
    height: 63px;
    margin-right: 10px;
}

/* "Logo" styling */
.headername {
    font-family: "Syne Mono", monospace;
    color: var(--red);
    background-color: var(--black2);
    font-size: 1.563rem;
    text-transform: uppercase;
    display: inline-block;
    padding: 8px;
    border-radius: 1px;
    border: var(--red2) solid 1px;
    width: min-content;
    margin-left: 15px;
}

.headername a {
    color: inherit;
    text-decoration: none;
}

/* Version styling */
.headsub {
    background-color: var(--gray2);
    color: var(--black);
    font-size: 0.6875rem;
    font-weight: bold;
    display: inline-block;
    padding: 3px;
    border-radius: 1px;
    width: min-content;
    margin-top: -9px;
    margin-left: 19px;
}

.headername {
    margin-block: 0;
}

nav {
    border-block: var(--lightgray) solid 1px;
    padding-block: 5px;
}

nav a {
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    transition: 0.1s ease-in;
}

nav a:hover {
    color: var(--red2);
    font-weight: bold;
    font-size: 0.875rem;
    transition: 0.1s ease-out;
}

nav ul {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin-block: 0;
    justify-content: center;
    gap: 5px;
}

nav li {
    list-style-type: none;
}

nav li:not(:last-child)::after {
    content: " / ";
    color: var(--white);
    font-size: 0.75rem;
    /* margin-right: 10px; */
    margin-left: 0px;
}

a:hover {
    color: var(--red);
}

.boxes {
    margin-block: 10px;
}

.top-container {
    background-color: var(--lightgray);
    padding: 5px;
    display: flex;
    box-shadow: 3px 3px var(--black),
                4px 4px var(--lightgray);
}

.top-left {
    border-bottom: 2px dashed var(--black);
    padding-right: 6px;
    margin: 0;
}

.top-right {
    color: var(--black);
    font-size: 0.89375rem;
    border-left: 2px dashed var(--black);
    border-bottom: 2px dashed var(--black);
    padding-inline: 8px;
}

.intro, .updates, .status, .more-stuff {
    text-transform: lowercase;
    font-size: 0.813rem;
    text-align: center;
}

.intro:before, .intro:after {
    content: " * ";
}

.top-right a {
    color: var(--gray);
    text-decoration: underline dotted;
    transition: 0.1s ease-in;
}

.top-right a:hover {
    color: var(--white);
    background-color: var(--red2);
    transition: 0.1s ease-out;
}

.mid-container {
    display: flex;
    margin-top: 13px;
    gap: 12px;
    justify-content: space-evenly;
}

.mid-left {
    background-color: var(--black2);
    color: var(--white);
    flex: 2;
    padding: 10px;
    border: 1px solid var(--gray);
    box-shadow: 3px 3px var(--black),
                4px 4px var(--lightgray);
}

.updates:before, .updates:after, .status:before, .status:after {
    content: " + ";
}

.mood {
    font-size: 0.8125rem;
    font-weight: bold;
    text-align: center;
    margin-block: 3px;
}

#statuscafe {
    margin-bottom: 3px;
    font-size: 0.8125rem;
    text-align: center;
}

#statuscafe-username {
    margin-bottom: 1px;
}

#statuscafe-username a {
    color: var(--lightgray);
    font-weight: bold;
    text-decoration: none;
    background-color: var(--gray);
}

#statuscafe-content {
    margin: 1px;
}

.sitelog {
    font-size: 0.75rem;
    border: 1px dashed var(--lightgray);
}

fieldset {
    padding: 10px;
    height: 78px;
    overflow: auto;
}

legend {
    font-weight: bold;
    font-size: 0.8125rem;
    color: var(--red);
}

.site-date {
    font-weight: bold;
    font-size: 0.75rem;
    margin-block: 0;
}

.sitelog-inner p {
    margin-block: 1px;
}

.sitelog-post {
    margin-bottom: 7px;
}

.mid-right {
    color: var(--white);
    background-color: var(--gray);
    font-size: 0.8125rem;
    flex: 1;
    padding: 10px;
    box-shadow: 3px 3px var(--black),
                4px 4px var(--lightgray);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.status-center {
    text-align: center;
}

.status-color {
    background-color: var(--red);
    font-family: "Syne Mono", monospace;
}

.b-container {
    background-color: var(--gray2);
    color: var(--black);
    padding: 5px;
    margin-top: 13px;
    box-shadow: 3px 3px var(--black),
                4px 4px var(--lightgray);
}

.more-stuff:before, .more-stuff::after {
    content: " - ";
}

.b-inner {
    display: flex;
    justify-content: space-evenly;
}

.b-left {
    padding: 5px;
    flex: 1;
    border-bottom: 2px dashed var(--black);
}

.b-right {
    text-align: center;
    padding: 5px;
    flex: 1;
    border-left: 2px dashed var(--black);
    border-bottom: 2px dashed var(--black);
}

.fanlist, .webrings {
    text-transform: lowercase;
    font-size: 0.75rem;
    text-align: center;
    color: var(--white);
    background: var(--red);
    margin-top: 2px;
}

.fanlist:before, .webrings:before {
    content: " [ ";
}

.fanlist:after, .webrings:after {
    content: " ] ";
}

.buttons {
    text-align: center;
}

footer {
    background: var(--black2);
    color: var(--white);
    padding: 0.5px;
    text-align: center;
    font-size: 0.6875rem;
    border-block: var(--gray) 1px dotted;
    margin-top: 5px;
}

footer p {
    margin: 2px;
}

footer a {
    color: var(--lightgray);
    text-decoration: underline dotted;
}