* {
    box-sizing: border-box;
}

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

::-webkit-scrollbar-thumb {
    background: var(--green);
    background-clip: padding-box;
}

@font-face {
    font-family: 'nintendo';
    src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf); }
    font {
    font-family: 'nintendo';
}

::selection {
    background: var(--text);
    color: var(--border);
}

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

/* colors */
:root {
    --bg: #fffaf1;
    --secondarybg: #fff7e5;
    --text: #6e3625;
    --secondarytext: white;
    --border: #e0c798;
    --green: #d2db55;
    --darkgreen: #6b9238;
    --red: #f87c73;
    scroll-behavior: smooth;
}

body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background: url(https://file.garden/ZdkezegxzVCR-6D7/neocities/backgrounds/ezgif-3-4814f45f482.gif) repeat center / 10%;
    z-index: 10000000;
    pointer-events: none;
    opacity: 6%;   
}

/* main css */
body {
    background: url(https://file.garden/ZdkezegxzVCR-6D7/neocities/backgrounds/sm_green_dots.png) repeat fixed 0 0 / 1%;
    font-family: Verdana;
    font-size: 0.6em;
    word-wrap: break-word;
    text-transform: lowercase;
    color: var(--text);
    line-height: 1.4;
    letter-spacing: .08em;
}

#container {
    max-width: 400px;
    margin: 200px auto;
    position: relative;
}

#wrapper {
    border-width: 7px;
    border-style: solid;
    border-image: url("https://file.garden/ZdkezegxzVCR-6D7/neocities/backgrounds/8xftJ3v.gif") 7 fill round;
    margin: .4em;
}

.bg {
    background: var(--bg);
    padding: .6em;
    border: 1px solid var(--border);
    border-inline: 0;
}

.bg-alt {
    background: var(--secondarybg);
    padding: .6em;
    border: 1px solid var(--border);
}

footer {
    margin-top: .6em;
}

.home {
    text-align: center;
}

/* welcome */
#welcome {
    margin-inline: auto;
    width: 240px;
    text-align: center;
}

#welcome img {
    max-width: 100%;
}

#welcome p > a {
    text-decoration: none;
}

#welcome p {
    margin-block: 1em;
    text-align: center;
}

#MyClockDisplay {
    color: var(--green)
}

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

.flex-item {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    min-width: 0;
    gap: .6em;
}

.flex-row > .flex-item:nth-child(1) {
    flex: 4;
    overflow-y: auto;
}

.flex-row > .flex-item:nth-child(2) {
    flex: 1;
    flex-flow: column;
}

/* rows and columns */
.row > .col {
    display: flex;
    flex-flow: column nowrap;
}

/* imgs */
img {
    user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
    user-select: none;
}

#icon {
    object-fit: cover;
    max-width: 80%;
    display: block;
    margin-inline: auto;
    margin-block: .6em;
}

#side-bg {
    background: url(https://file.garden/ZdkezegxzVCR-6D7/neocities/backgrounds/greenplaid.png) repeat center / cover;
    flex: 1;
    box-shadow: inset 4px 0px 2px var(--bg);
    border: 1px solid var(--border);
    border-left: 0;
}

#pagedoll {
    width: 60px;
    float: right;
    margin: .1em 0 .1em 1em;
}

#guestbook, #side-img {
    position: absolute;
    right: -8%;
    bottom: -4%;
    width: 100px;
    rotate: 5deg;
    filter: drop-shadow(2px 2px 2px);
    z-index: 2;
}

#guestbook:hover, #side-img:hover {
    rotate: 10deg;
}

#fish {
    position: absolute;
    left: -5%;
    top: -2.8em;
    width: 60px;
    rotate: -20deg;
    z-index: 6;
    pointer-events: none;
}

/* stamps */
.stamp {
    height: 40px;
    object-fit: contain;
}

/* navigation */
nav {
    display: flex;
    flex-flow: column nowrap;
}

.nav-item {
    border-left: 1px solid var(--border);
    text-align: center;
    padding: .2em .4em;
    background: linear-gradient(var(--secondarybg) 20%, var(--border));
    user-select: none;
}

.nav-item:hover {
    border-left: 1px solid var(--border);
    text-align: center;
    padding: .2em .4em;
    background: linear-gradient(var(--bg) 20%, var(--secondarybg));
    color: var(--border);
    user-select: none;
}

.nav-item.active, .nav-item.focus  {
    border-left: 1px solid var(--border);
    text-align: center;
    padding: .2em .4em;
    background: linear-gradient(var(--bg) 20%, var(--secondarybg));
    color: var(--border);
    user-select: none;
}

.nav-link {
    padding: 0;
    color: inherit;
    user-select: none;
}

.nav-link:hover {
    color: inherit;
}

.nav-link:focus {
    color: inherit;
}

/* buttons */
#button {
    display: flex;
    gap: .6em;
    max-height: 30px;
}

/* lists */
ul, .fa-ul {
    list-style-position: inside;
    padding-left: 2em;
    margin: 0;
}

li, .fa-li {
    padding-right: 1em;
    padding-block: .1em;
    cursor: pointer;
}

/* updates */
#update-log {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: .6em;
}

#update-log > p {
    text-align: left;
}

p {
    padding-block: .2em;
}

#update-log p:nth-child(1) {
    padding-top: 0;
}

.update {
    color: var(--green);
}

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

h5 {
    font-size: 9pt;
    background: var(--darkgreen);
    align-self: start;
    display: inline;
    padding: .2em .4em;
    color: var(--bg);
    font-family: calibri;
}

h4 {
    font-size: 10pt;
    font-weight: bold;
    font-family: monospace;
}

h3 {
    font-size: 12pt;
    font-weight: bold;
}

h2 {
    font-size: 15pt;
    font-weight: bold;
    letter-spacing: .1em;
    font-family: nintendo;
    text-shadow: 2px 0 var(--bg), -2px 0 var(--bg), 0 2px var(--bg), 0 -2px var(--bg),
    1px 1px var(--bg), -1px -1px var(--bg), 1px -1px var(--bg), -1px 1px var(--bg);
}

/* text */
span.highlight{
    font-style: italic;
}

p {
    text-align: justify;
    margin: 0;
}

hr {
    border-style: dashed;
    border-color: var(--border);
    opacity: 1;
    margin-block: .6em;
}

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

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

b {
    color: var(--green);
    font-family: calibri;
}

/* cards */
#warning {
    padding: .4em;
    color: var(--red);
    border-radius: .4em;
    border: 1px solid var(--border);
}

.card {
    color: inherit;
}