@font-face {
  font-family: "MS Gothic";
  src: url(/fonts/MS\ Gothic.woff);
}

@font-face {
  font-family:"Starborn";
  src:url(/fonts/Starborn.otf);
}

.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* VARIABLES */

:root {
    --content-bg-color: #ffffff ;
    --content-border-color: #eea5b0 ;
    --content-heading-color:#79ee30;
    --content-link-color: #ff7861;
}

/* BODY */

body{
    background:url(/graphics/backgrounds/multiplaid2.jpg);
    font-family: "Kosugi Maru", Geneva, Verdana, sans-serif;
    color:#444;
    line-height:1.3;

    cursor:url(/graphics/cursors/clovercat.gif), auto;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* TEXT STYLING */

a{
    font-family: "Kosugi Maru";
    text-decoration: underline dotted;
    color:var(--content-link-color);
    cursor:url(/graphics/cursors/clovercat.gif), auto;
}

a:hover{
    color:#d55344;
    font-style: oblique;
}

h2{
    margin-top: -5px;
    color: var(--content-heading-color);
    text-align:left;
}

h3{
    margin-top:10px;
    color:var(--content-heading-color);
    text-align:right;
}

p{
    margin:14px 0;
}

/* MAIN CONTAINER */

#container{
    width:90%;
    max-width:900px;
    margin:auto;
    margin-top:-9px;
    position:relative;

    font-family: "Kosugi Maru";
    font-size: 15px;

    background: var(--content-bg-color) ;

    border: 5px solid var(--content-border-color);
    border-style:double;

    box-shadow:0 0 10px rgba(0,0,0,0.05);
}

img{
  max-width:100%;
  height:auto;
}

.kerochan{
    position:absolute;
    top:250px;
    left:-210px;
    width:260px;
    pointer-events: none;
    animation: float 3s ease-in-out infinite;
}

.clover-button{
    position:absolute;
    width:25px;
    top:420px;
    left:180px;
    pointer-events: none;
    z-index: 20;
}

.star-button{
    position:absolute;
    width:25px;
    top:587px;
    left:-7px;
    pointer-events:none;
    z-index:21;
}

.content-divider{
  max-width:300px;
  width:100%;
}

/* HEADER */

#header{
    background:url(/graphics/deco/scenes/windmills.gif);
    background-repeat:no-repeat;
    background-clip:border-box;
    background-size:cover;
    background-position:center;

    height:fit-content;

    padding:25px;

    font-family:"Starborn";
    font-weight:normal;
    color: #79ee30;
    text-align:left;
    -webkit-text-stroke: 2px #f6fff7;
    font-size:clamp(32px, 5vw, 50px);
}

.subtitle{
    font-family:"Kosugi Maru";
    font-size:25px;
    font-style:oblique;

    position:relative;
    top:-45px;
    left:30px;
    color: #ff7861;
    -webkit-text-stroke: transparent;
}

.divider{
    height:41px;
    background:url(/graphics/deco/dividers/sunflowerdivider.gif) repeat-x center;
    margin-top:-22px;
    margin-bottom:-5px;
    position:relative;
    z-index:5;
}

/* MAIN LAYOUT */

#content{
    display:flex;
    align-items:flex-start;
}

/* SIDEBAR */

#sidebar{
    width:200px;
    flex-shrink:0;
    background:var(--content-bg-color) ;
    padding:0.3px;

    border-right:1px solid var(--content-border-color) ;
    text-align:left;
}

#sidebar .navbtn{
    display:block;
    padding:4px 6px;
    margin:0px;
    background:linear-gradient(#ffffff, #bff1a0);
    border:1px solid #bff1a0;

    font-family: "MS Gothic";
    color:var(--content-link-color);
    text-decoration:none;
    text-align:center;
}

#sidebar b{
    display:block;
    padding-top:5px;
    padding-bottom: 4px;
    padding-left: 10px;
}

#sidebar .navbtn:hover{
    background:linear-gradient(#ffffff,#f8bab2);
    color:#444;
    font-style:oblique;
}

#sidebar .navbtn:first-of-type{
    border-radius:6px 6px 0 0;
}

#sidebar .navbtn:last-of-type{
    border-radius:0 0 6px 6px;
}

.sidebar-divider{
    display:block;
    margin:5px auto -7px auto;
}

.fanlisting-box{
    height:178px;
    width:196px;
    margin:0 auto 2px auto;
    overflow-y:auto;
    padding:4px;
    position:relative;

    scrollbar-width: thin;
    scrollbar-color: #ffb6c1 #faa697;

    background:#f8b3a7;
    border:2px double var(--content-border-color);
    border-radius:6px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.08);

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(50px,1fr));
}


.fanlisting-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:8px;

    background:linear-gradient(rgba(255,255,255,0.7), transparent);
}

.fanlistings{
    transition: transform 0.15s ease, filter 0.15s ease;
    padding-left: 6px;
    width: 70px;
    margin-left: -4px;
    margin-right:-5px;
    margin-top:5px;
    margin-bottom:3px;
}

.fanlistings:hover{
    display:inline-block;
    transform: scale(1.08) translateY(-2px);
    filter:brightness(1.1);
}

/* MAIN AREA */

#main{
    flex:1;
    padding:14px;
    overflow-wrap: break-word;
}

.box{
    background:white;
    border:1px solid var(--content-border-color);

    padding:15px;
    margin-bottom:18px;

    border-radius:6px;
}

.content-divider{
    display: block;
    margin-top:-3px;
    margin-bottom:2px;
    margin-left:auto;
    margin-right:auto;
}

/* FOOTER */

#footer{
    text-align:center;
    padding:10px;
    background:var(--content-bg-color);
    font-size:12px;

    border-top: 1px solid var(--content-border-color);
}

@media (max-width:700px){

#content{
    flex-direction:column;
}

.subtitle{
    top:-20px;
    left:0;
    font-size:18px;
}

#sidebar{
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--content-border-color);
}

.kerochan,
.clover-button,
.star-button{
    display:none;
}

}