@font-face{
font-family: 'simplythebest';
src: url(../fonts/KGSimplytheBest.ttf);
}

@font-face{
font-family: 'yoster island';
src: url(../fonts/yoster.ttf);
}

@font-face{
font-family: 'adabelle';
src: url(../fonts/AdabelleHandwriting-Regular.ttf);
}

:root {
  color-scheme: only light;
}

/* body stuff */  

html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
width: 100%;
align-content: center;
cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;
background-image: url(../images/background2.png);
background-size: 2em;
font:11px simplythebest;
line-height:12px;
color: #4f5043;
letter-spacing:1.2px;
text-align:justify;
overflow: scroll;}

/* links & other */

a:link, a:visited, a:active { 
color:#e9afc5;text-decoration:none;}
a:hover {color:#000000; cursor: url("/images/pixels/tumblr_b8a941dabcd102ff7afc32e01be54f89_8eea338b_75.webp"), auto;}

b {color:#414034;font-weight:bold;}
i {color:#243533;font-weight:bold;font-style:italic;}
u {color:#7E2625;text-decoration:underline;} 

.list {
display: flex;
align-items: center;
margin-bottom: 2px;
}

/* scrollbar */

::-webkit-scrollbar-thumb {
background-color: #fff; border-radius:5px;
border:1px solid #9D9167;}
::-webkit-scrollbar {
width: 7px; height: 0px; 
background: transparent;}

/* titles */

.title 
{
text-transform:uppercase;
font:bold 12px adabelle; 
color:#5F633E;;
line-height:10px;
padding:0px;
padding-bottom:4px;
border-bottom:1px dashed #ddd;
margin-bottom:7px;
letter-spacing:2px;
}

/* container */

.wrapper {
margin: 0 auto;
width: 100%;
max-width: 750px;
padding: 10px 0;
box-sizing: border-box;
}

.layout {
max-width: 100%;
display: flex;
gap: 8px;
box-sizing: border-box;
justify-content: center;
}

/* shrines */

.menu a {
background:transparent;
padding-top:2px;
padding-left:4px;
font:normal 10px simplythebest;
line-height:12px;
text-transform:uppercase;
letter-spacing:1px;
color:#4f5043;}

.menu a:hover {
color:#d39da9;}

/* sections */

.left  { flex: 0 0 29%; 
box-sizing: border-box;}
.main  { flex: 0 0 50%; padding-left:3px;padding-right:3px;
box-sizing: border-box;}
.right { flex: 0 0 26%; box-sizing: border-box; }


/* header */

.headerbox {
background: url(../images/24d7b1645bf9971a86bc1ff315e7481d.jpg);
height: 170px;
width: 100%; 
border:1px dashed #9D9167;
border-radius:5px;
background-position: center 55% ;
background-size: cover;
}

.headerwrapper {
margin: 0 auto;
width: 100%;
max-width: 800px;
padding: 10px 0;
box-sizing: border-box;
}

/* box */

.box {
padding: 6px 6px;
margin-bottom:13px;
border:1px dashed #9D9167;
background-color: #fffef8;
box-shadow: 2px 2px #b6ad8b;
border-radius:5px;}

/* blogbox */

.blogbox {
max-height: 250px;
overflow: scroll;
padding: 6px 6px;
margin-bottom:13px;
border:1px dashed #9D9167;
background-color: #fffef8;
box-shadow: 2px 3px #b6ad8b;
border-radius:5px;}


/* updates box */

.updates {
padding: 6px 6px;
margin-bottom:13px;
height: 127px;
border:1px dashed #9D9167;
background-color: #fffef8;
box-shadow: 2px 3px #b6ad8b;
border-radius:5px;
overflow: scroll;}

/* tooltip */
.tooltip {
display: inline-block;
line-height: 0;
}

.tooltip .tooltiptext {
width: 120px;
visibility: hidden;
background-color: #692721;
border: #b8a5a5 dashed 1px;
box-shadow: 3px 4px #915751;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
pointer-events: none;
line-height: normal;
}

.headerbox.tooltip .tooltiptext {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
width: auto !important;
border-radius: 0 !important;
}

/* stamps */

#marquee {
width: 350px; 
margin: auto; 
overflow: hidden;
white-space: nowrap;
padding-bottom: 0.7em;
}

#marquee:hover #stamps {
animation-play-state: paused; 
}

#stamps {
display: inline-block;
will-change: transform;
animation: marquee 40s linear infinite; 
}

#stamps img {
width: 99px;
height: 56px;
opacity: 0.7;
transition: all 0.2s;
position: relative; 
z-index: 1;
margin-right: 10px;
display: inline-block;
vertical-align: top;
}

#stamps img:hover {
opacity: 1;
z-index: 100;
}

@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}

/* status */

#status {
font:11px simplythebest;
line-height:11px;
color: #5F633E;
letter-spacing:1.2px;
}

#status a {
color:#5F633E;
text-decoration:none;
}

#status a:hover {
color:#666;
}

#status p {
margin: 0 0 1px 0;
}

/* footer */

.footer {text-align: center;
padding-top: 7px;}

/* dark mode */
html.darkmode body {
  background-image: url(../images/2ac36baab8da3f8983c0aec019c941d9.jpg);
  background-color: #181918;
  background-size: 15em;
}

html.darkmode .box,
html.darkmode .blogbox,
html.darkmode .updates {
  background-color: #494434;
  border-color: #3d3b1e;
  box-shadow: 2px 2px #36330b, 2px 3px #36330b;
color: #c2cabe;
}

html.darkmode .title {
  color: #d8bdb6;
  border-bottom-color: #747259;
}

html.darkmode b {
  color: #c2cabe;
}

html.darkmode i {
  color: #c2cabe;
}

html.darkmode u {
  color: #c2cabe;
}

html.darkmode a:link,
html.darkmode a:visited,
html.darkmode a:active {
  color: #a57e5b;
  text-decoration: none;
}

html.darkmode a:hover {
  color: #c98a54;
}

html.darkmode .menu a {
  color: #a57e5b;
}

html.darkmode .menu a:hover {
  color: #c98a54;
}

html.darkmode ::-webkit-scrollbar-thumb {
  background-color: #3d3b1e;
  border-color: #36330b;
}

html.darkmode blockquote {
  color: #d4cfc7;
}

html.darkmode #status {
  color: #c2cabe;
  letter-spacing: 1.2px;
}

html.darkmode #status a {
  color: #a57e5b;
  text-decoration: none;
}

html.darkmode #status a:hover {
  color: #c98a54;
}

html.darkmode #status p {
  color: #c2cabe;
}

html.darkmode .header__inner p {
  color: #c2cabe;
}

html.darkmode .header__inner a {
  color: #a57e5b;
}

html.darkmode .header__inner a:hover {
  color: #c98a54;
}

html.darkmode #song {
  color: #a57e5b;
}

html.darkmode .footer {
  color: #c2cabe;
}

/* responsive */

@media (max-width: 640px) { 
.layout {
flex-direction: column;
}
.left, .main, .right {
flex: 1 1 100%;
}
}