@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
/* ------------------------ main ----------------------- */
body {
    background-image: url(../bunnies/bg.png);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
html {
    cursor: url(../bunnies/cursor.png), auto;
    overflow-x: hidden;
}
/* ------------------------ scrollbar ----------------------- */
* {
    scrollbar-width: auto;
    scrollbar-color: #ffd0cd #fff2f2;
}
*::-webkit-scrollbar {
    width: 16px;
}
*::-webkit-scrollbar-track {
    background: #fff2f2;
}
*::-webkit-scrollbar-thumb {
    background-color: #ffd0cd;
    border-radius: 2px;
    border: 0px solid #ffffff;
}
/* ------------------------ general styles (non div) ----------------------- */
::selection {
    text-shadow: 0 0 2px #FAABA1;color:#B98865
}
h1 {
    font-family: "Fredoka One";
    text-shadow: 1px 1px #83443cee;
    font-size: 2em;
    color: #cf9d82;
}
h2 {
    font-family: "Fredoka One";
    font-size: 1.3em;
    color: #b7856a;
    letter-spacing: 0.05em;
}
marquee {
    color: #f2a7af;
    background: #fdf3f2;
    padding: 5px;
    margin-top: 5px;

}
a {
    transition: all 1s ease; 
    color: #6cb5a2;
    cursor: url(../bunnies/cursor_pointer.png), pointer;
}
a:hover {
    color: #b0d4cb;
    letter-spacing: 0.05em;
}
figure {
    font-size: 0.8em;
    width: 100px;
    margin: auto;
}
hr {
    border: 0;
    height: 16px;
    background:url(../bunnies/ribbon.png) no-repeat top center;
    margin: 10px 0px 10px 0px;
}
/* ------------------------ div styles ----------------------- */
.happycontainer /* main container of page */ { 
    display: flex;
    border: 1px solid #af886a;
    outline: 1px solid #ffd1d0;
    border-radius: 2px;
    box-shadow: 3px 3px #aa685f70;
    max-width: 1000px;
    margin: auto;
    margin-top: 25px;
}
/* .happycontainer > * a:hover, img:hover {
a
} */
.silly /* main div of page */ {
    flex: 85%;
    background: white;
    color: #b7856a;
    font-size: 12px;
    text-transform: lowercase;
    text-align: center;
    border: 1px solid #ffe3e6;
}
.hewwo /* content inside div */ {
    border: 1px dashed #e5b896;
    padding: 5px;
    margin: 5px 5px 5px 5px;
}
.header {
    background-image: url(../bunnies/banner.gif);
    height: 100px;
    line-height: 100px;
    border: 1px solid #f1c5c9;
}
.header h1 {
    color: #fdf3f2;
    margin: 0;
    filter: drop-shadow(1px 1px 0 #b7856a) drop-shadow(-1px 1px 0 #b7856a) drop-shadow(0 -1px 0 #b7856a) drop-shadow(1px 0 #b7856a);
}
.footer {
    color: #f2a7af;
    background: #fdf3f2;
    padding: 5px;
    border: 1px solid #f1c5c9;
}
.bgbottom {
    background: transparent url(../bunnies/bgimg.gif) repeat-x left bottom;
    bottom: 0;
    height: 99px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: -100;
}
#navbar {
    flex: 15%;
    max-width: 125px;
    background: #fdf3f2;
    color: #b7856a;
    font-size: 12px;
    text-transform: lowercase;
    text-align: center;
    padding: 5px;
    border: 1px solid #f1c5c9;
}
#navbar a {
    display: block;
    padding: 1px;
    margin: 5px;
    color: #b7856a;
    text-decoration: none;
    text-align: left;
    background: white;
    border: 7px solid transparent;
    border-image: url("https://nonkiru.art/bunnies/lacies.png") 8 round;
    box-shadow: 2px 2px #ffd7d770;
    image-rendering: pixelated;
  }
#navbar a:hover {
    background: #fdf3f2;
    box-shadow: 3px 3px #f3bdbd70;
  }
#navbar h1 {
    display: block;
    font-size: 2em;
    margin: 0px;
    font-weight: 100;
    font-family: "Fredoka One";
  }
.apricot /* inside flex */ {
    display: flex;
    margin: auto;
    max-height: 200px;
    max-width: 800px;
}
.minidiv {
    border: 1px solid #cf9d82;
    border-radius: 2px;
    background-color: #FFEEEE;
    margin: 1px;
}
.minidiv h1 {
    border-bottom: 1px dashed #e9bf9f;
    margin: 0  0 -5px;
    height:20px;
    background-color: #ffeaea;
}
.peaches /* status cafe box */ {
    flex: 50%;
    max-width: 400px;
    background: #ffeaea;
    border: 1px solid #af886a;
    border-radius: 2px;
    margin-left: 10px;
    overflow: auto;
    overflow-x: hidden;
}
.peaches >div {
    position:sticky;
    top:0;
    height:20px;
    background:#fdf3f2;
    border-bottom: 1px dashed #e9bf9f;
}
.peaches >div h1{
    font-size: 1.2em;
    margin: 0px;
    font-weight: 100;
    font-family: "Fredoka One";
}
#peachwrap {
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
}
.scrollybox {
    flex: 50%;
    overflow: scroll;
    overflow-x: hidden;
    max-width: 400px;
    background: rgb(255, 234, 234);
    border: 1px solid #af886a;
    border-radius: 2px;
}
.scrollybox >div {
    position:sticky;
    top:0;
    height:20px;
    background:#fdf3f2;
    border-bottom: 1px dashed #e9bf9f;
}
.scrollybox >div h1{
    font-size: 1.2em;
    margin: 0px;
    font-weight: 100;
    font-family: "Fredoka One";
}
/* About Me */
.starrynight {
    display: flex;
    margin: auto;
    max-width: 800px;
    text-align: left;
}
.nonside {
    flex: 35%;
}
.writeside {
    flex: 65%;
    margin-left: 10px;
}
/* Shrines */
.ocbox {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
}
.imgbutton {
    width: 100px;
    margin: auto;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    image-rendering: pixelated;
}
.imgbutton:hover {
    transform: scale(1.1);
    filter: brightness(110%);
    image-rendering: pixelated;
}
/* artwork */
.artgallery {
    border: 0px solid transparent;
}
.artgallery a img {
    border: 1px solid #b7856a;
    margin: 3px 0px 5px 0px;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.artgallery a img:hover {
    transform: scale(1.1);
    filter: brightness(105%);
}
/* buttons */
.buttons a img {
    margin: 1px;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.buttons a img:hover {
    background: rgb(255, 230, 230);
    box-shadow: 0px 0px 5px 1px #ff698270;
    filter: saturate(150%);
}
/* commissions */
.notice {
    max-width: 500px;
    min-height: 50px;
    margin: auto;
    border: 1px solid #b7856a;
    border-radius: 5px;
    background: rgb(255, 214, 214);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8f5f45;
    box-shadow: 3px 3px #df8c8c70;
}
.notice a {
    color:#dd606c;
}
.commbox {
    display: flex;
    max-width: 400px;
    margin: auto;
    border: 1px solid #b7856a;
    border-radius: 5px;
    background: rgb(255, 243, 243);
    justify-content: center;
    align-items: center;
}
.commboximg {
    flex: 25%;
}

.commboximg img {
    border: 1px solid #b7856a;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.commboximg img:hover {
    background: rgb(255, 230, 230);
    box-shadow: 0px 0px 5px 1px #ff698270;
    filter: saturate(120%);
}

.commboxinfo {
    margin-left: 10px;
    flex: 75%;
    text-align: left;
}

.commboxinfo button {
    margin-bottom: 2px;
    background: rgb(255, 201, 191);
    text-transform: lowercase;
    border: 1px solid #b7856a;
    border-radius: 5px;
    box-shadow: 2px 2px #df8c8c70;
    color: #8d573a;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.commboxinfo button:hover {
    background: rgb(255, 187, 187);
    text-transform: lowercase;
    box-shadow: 3px 3px #df8c8c70;
    color: #8d573a;
    cursor: pointer;
}
.commboxinfo button:active {
    background: rgb(255, 173, 173);
    text-transform: lowercase;
    box-shadow: 1px 1px #df8c8c70;
    color: #8d573a;
    cursor: pointer;
}
/* tos */
.tospara {
    text-align: left;
}
/* illu/chibi page */
.baibai {
    display: flex;
    max-width: 800px;
    margin: auto;
    border: 1px dashed #ffdabd;
    border-radius: 5px;
    background: rgb(255, 246, 243);
}
.baigallery {
    flex: 25%;
    margin: auto;
    margin-right: 23px;
}
.baitext {
    flex: 70%;
}
.baitext table {
    margin: auto;
    border: 1px dashed #ffdabd;
    border-collapse:collapse;
    width: 75%;
    background: #fffcfc;
    box-shadow: 3px 3px #df8c8c70;
}
.baitext th {
    border-bottom: 2px dotted #eeb596;
    text-align:left;
    padding: 5px;
}
.baitext td {
    border-bottom: 1px solid #b7856a;
    text-align:left;
    padding: 5px;
}
.journal {
    background: #FBF3F2;
    border-radius: 5px;
    margin: 20px;
    padding: 5px;
    height: 400px;
    overflow: scroll;
    overflow-x: hidden;
}
.journal h2 {
    background: #FEE6E6;
    margin-top: -5px;
    padding: 10px;
}
/* status cafe */
#statuscafe {
    padding: .5em;
    background-color: #ffeaea;
    height: auto;
}
#statuscafe-username {
    margin-bottom: .5em;
    background-color: #fff2f2;
    border: 1px solid #af886a;
    padding: 5px
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    text-transform: none;
}
/* yesterweb */
.yw-widget-full {
  display: block;
  border: 1px solid #cf9d82;
  margin: 1px;
  border-radius: 2px;
  background-color: #ffeaea;
  background: url("../bunnies/yesterweb.png");
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #b7856a;
  text-align: center;
  font-size: 12px;

}
.yw-nav a {
    background: #ffeaea;
    padding: 5px;
    margin: 5px;
    line-height: 35px;
    border: 1px solid #a88a6a;
    border-radius: 2px;
    box-shadow: 2px 2px #df8c8c70;
    text-decoration: none;
    transition: none;

}
.yw-nav a:hover {
    background: #ffe5e3;
    letter-spacing: normal;
    box-shadow: 3px 3px #df8c8c70;
}
.yw-nav a:active {
    background: #ffd7d5;
    letter-spacing: normal;
    box-shadow: 3px 3px #df8c8c70;
}

.yw-title {
    margin: 0  0 -5px;
    height:20px;
    background:#ffeaea;
    border-bottom: 1px dashed #e9bf9f;
    font-weight: 100;
    font-family: "Fredoka One";
    text-shadow: 1px 1px #83443cee;
    font-size: 1.2em;
    color: #cf9d82;
}

.yw-body {
    padding: 0;
    margin: 0;
}
/* responsive */
@media screen and (max-width: 600px) {
    #navbar {
        max-width: 100%;
        border: 1px solid #af886a;
        border-radius: 2px;
        box-shadow: 3px 3px #aa685f70;
        margin-bottom: 6px;
    }
    #navbar a {
        display: inline-block;
        width: 100px;
        line-height: 20px;
        vertical-align: middle;
    }
    #navbar h2 {
        display: none;
    }
    #navbar hr {
        display: none;
    }
    .happycontainer {
        display: initial;
        border: none;
        box-shadow: none;
        padding: none;
        margin: none;
    }
    .silly {
        border: 1px solid #af886a;
        border-radius: 2px;
        box-shadow: 3px 3px #aa685f70;
    }
    button  {
        height: 40px;
    }
    .commbox {
        padding: 10px;
    }
    #peachwrap {
        flex-wrap: wrap;
    }
    .minidiv {
        width: 100%;
    }
    .yw-widget-full {
        width: 100%;
    }
    .starrynight {
        flex-wrap: wrap;
    }
}
/* animations ପ(๑•ᴗ•๑)ଓ ♡ */
@keyframes wobb {
    0%, 100% {transform: translateY(0px)}
    25% {transform: translateY(-1px)}
    75% {transform: translateY(1px)}
    }
.wobble span {
    animation-name: wobb;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 500ms;
    display: inline-block;
    transform: translateY(0px);
    }
@keyframes rainbow {
    0%   {color: #ff7b7b;}
    25%  {color: #ffc953;}
    50% {color: #a5ff7c;}
    75%  {color: #88e3ff;}
    100% {color: #f8a6ff;}
}
.rainbow {
    font-family: "Fredoka One";
    color: white;
    text-shadow: 2px 2px #83443cee;
    font-size: 2em;
    animation: 1s rainbow infinite alternate;
}
.rainbowslow {
    font-family: "Fredoka One";
    color: white;
    text-shadow: 2px 2px #83443cee;
    font-size: 2em;
    animation: 2s rainbow infinite alternate;
    animation-timing-function: linear;
}