:root {--header-image: url('https://oceancake.carrd.co/assets/images/gallery32/b33bdda5.gif?v=edab04a1');--content:}
/* header img */
* {box-sizing: border-box;}#container {width: 1100px;}
/* outline */
#header-container {border: 3px solid #ff8fb3;overflow: hidden;}
#container {width: 1100px;margin: 0 auto 20px auto;border: 2px solid #ff8fb3;overflow: hidden;}
/* shadow */
#header-container,#container {width: 1100px;margin: 0 auto 20px auto;border: 1px solid #ff8fb3;}
/* font */
* {font-family: "MS UI Gothic", "MS Gothic", monospace;}
h1, h2, h3, h4, #wobble, #wobble span {font-family: "MS UI Gothic", "MS Gothic", monospace;}
#wobble, #wobble span {font-family: "MS UI Gothic", "MS Gothic", monospace;}
/* link color */
#container a {color: #ff8fb3;}
/* border stuff */ 
#leftSidebar,#rightSidebar,#header,#footer,#topbar, main {border: 2px solid #ff8fb3;}
#leftSidebar, #rightSidebar, main{border-bottom: none;}main {border-right: none;} main {border-left: none;}
/* pagedolls */
.page-decor {position: fixed;top: 74%;transform: translateY(-50%);z-index: 999;
display: block;pointer-events: auto;cursor: pointer;width: 140px;
filter: drop-shadow(0 6px 10px #fdbed2);will-change: transform;}
/* bounce */
.left-decor {left: calc(50% - 550px - 130px);}
.right-decor {left: calc(50% + 540px + 0px);}
@keyframes bounce {
  0%   { transform: translateY(-50%) translateY(0); }
  30%  { transform: translateY(-50%) translateY(-15px); }
  50%  { transform: translateY(-50%) translateY(0); }
  70%  { transform: translateY(-50%) translateY(-7px); }
  100% { transform: translateY(-50%) translateY(0); }}
.bounce {animation: bounce 0.5s ease;}
/* header img stuff */
#header {border: 1px solid #ff8fb3;box-sizing: border-box;overflow: hidden;}
#header img{display:block;width:100%;height:90%;object-fit:con;
object-position:center 75%;}
main { background-color: #fff;flex: 1;padding: 10px;order: 2;} #leftSidebar {order:1;} #rightSidebar {order:3;}
  /* footer color n size */
footer {background: linear-gradient(to bottom, #fff, #fff0f6);
width:100%;height: 40px;padding: 10px;text-align: center;}h1 {color: #fd6c9a; font-size: 25px;} 
 h2 {color: #fd6c9a;}h3 {color: #fd6c9a;}strong {color: #fff;}
/* gif next 2 wobbly text */
 .title-row {display: flex; gap: 10px;}
/* update box */
.box {background-color: #fff; border: 1px solid #fd6c9a; padding: 10px;}
/* CSS for extras */
#topBar {width: 100%;height: 30px;padding: 10px;font-size: smaller;background-color: #fff0f6;}
/* Responsive styles */
@media only screen and (max-width: 900px) {#flex {flex-wrap: wrap;}
aside {width: 100%;} main { order: 2; } #leftSidebar { order: 1; } #rightSidebar {order: 3; } }body {  margin: 30px; }
#flex {display: flex; align-items: stretch;}
aside {background: linear-gradient(to bottom, #fff, #fff7fa);
width: 200px;padding: 15px;font-size: smaller;align-self: flex-start;box-sizing: border-box;}
main {background: linear-gradient(to bottom, #fff, #fff7fa);
flex: 1;padding: 20px;order: 2;min-height: 0;overflow: auto;}
#container{width: 1100px;margin: 10px auto;overflow: hidden;box-sizing: border-box;}
aside, main {align-self: stretch;box-sizing: border-box;}
body{background:#fdf6f8 url("") repeat; font-family: "MS UI Gothic", "MS Gothic", monospace;}
  /* nav box */
.nav-box {width: 220px;border: 2px solid #f5a9c5;border-radius: 15px;background: #fff;overflow: hidden;}
/* pink title */
.nav-title {text-align: center;padding: 10px;font-weight: bold;color: #fd6c9a; 
/* stripes */
 background: repeating-linear-gradient(135deg,#fdeaf1 0px,#fdeaf1 6px,#fbe3ec 6px,#fbe3ec 12px);border-bottom: 2px solid #f5a9c5;}
/* blue title */
.nav-header {text-align: center;padding: 6px;font-weight: bold;color: #fd6c9a;
/* stripes */
 background: repeating-linear-gradient(135deg,#eef7fd 0px,#eef7fd 6px,#e6f2fa 6px,#e6f2fa 12px);
 border-top: 2px solid #f5a9c5; border-bottom: 2px solid #f5a9c5;}
/* Links container */ 
.nav-section a {display: block;padding: 8px 10px;text-decoration: none;color: #3b6cff;border-bottom: 1px solid #f5a9c5;font-size: 13px;}
/* Remove last border */
.nav-section a:last-child {border-bottom: none;}
/* Hover effect */
.nav-section a:hover {background: #ffeaf3;color: #ff4f8b;text-decoration: none;}.nav-section a:hover .link-text {text-decoration: underline;}
/* shadow */
.nav-box { box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
/* nav links */
.nav-section a {display: block;padding: 8px 10px;text-decoration: none;font-size: 12px;
 color: #3b6cff; background: linear-gradient(to bottom, #ffffff 0%, #ffe4ef 100%);}
 /* flashing new */
.new {color: #ff4f8b; font-weight: bold; animation: flash 1s infinite;} @keyframes flash {0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; }}
 /* box size */
  .nav-box {width: 100%;}
 /* cbox */
.cbox-container {margin-top: 15px;border: 2px solid #f5a9c5;border-radius: 10px;overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);background: linear-gradient(to bottom, #ffffff 0%, #ffe4ef 100%);}
 /* scrollbar */
::-webkit-scrollbar {width: 8px;}
/* bg */
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #ffb6c1;border-radius: 10px;box-shadow: inset 0 0 3px rgba(255,255,255,0.5);}
/* hover */
::-webkit-scrollbar-thumb:hover {background: #ff8fb3;}
.scroll-box::-webkit-scrollbar {width: 8px;}
.scroll-box::-webkit-scrollbar-track {background: transparent;}
.scroll-box::-webkit-scrollbar-thumb {background: #ffb6c1;border-radius: 10px;}
 /* more scroll box */
.scroll-box-small {height: 120px;overflow-y: auto;padding-left: 10px;color: #ff8fb3;}
.scroll-box {height: 190px; overflow-y: auto; padding: 10px;margin: 15px 0;border: 2px solid #ff8fb3;
background: linear-gradient(to bottom, #ffffff, #fff0f6);width: 50%;text-align: left;}
/* outline */
#container {border: 2px solid #ff8fb3;box-sizing: border-box;}
 /* pfp border */
.pfp {border: 2px solid #ff8fb3;}
 /* rid of padding */
.wobble {margin-top: 0;}
#top-box {width: 1100px;padding: 8px;text-align: center;font-size: 12px;}
#header-container {margin: 5px auto 10px auto;}
#top-box {border-bottom: none;}
#header-container {border-top: none;border: 1px solid #ff8fb3;}
#top-box {width: 1100px;margin: 20px auto 0 auto;padding: 6px 10px;
border: 1px solid #ff8fb3;background: linear-gradient(to bottom, #fff0f6, #ffe4ef);
display: flex;justify-content: space-between;align-items: center;font-size: 12px;}
/* time */
.top-left {color: #ff4f8b;}
/* buttons */
.top-right {display: flex;gap: 6px;}
/* buttons */
.win-btn {display: inline-block;width: 18px;height: 18px;line-height: 16px;
text-align: center;border: 1px solid #ff8fb3;background: #fff;color: #ff4f8b;font-size: 12px;cursor: pointer;}
.win-btn:hover {background: #ffe4ef;}.win-btn {border: 1px solid #d88aa8;background: linear-gradient(to bottom, #ffffff, #ffd9e8);}
.win-btn:last-child:hover {background: #ff8fb3;color: white;}
 /* organize later */
#header {width: 100%;height: 280px;overflow: hidden;}
#top-box {width: 1100px;}
#header-container {width: 1100px;margin: 0 auto 10px auto;border: 1px solid #ff8fb3;box-shadow: 0 6px 15px #ffdee8;}
#container {width: 1100px;margin: 0 auto 20px auto;border: 1px solid #ff8fb3;box-shadow: 0 6px 15px #ffdee8;}
#top-box {margin: 0 auto;}
#container {margin: 0 auto;}
#footer {background: linear-gradient(to bottom, #fff, #fff0f6);color: #ff7ba7;font-family: "MS UI Gothic", monospace;font-size: 13px;text-align: center;}
.main-row {display: flex;gap: 15px;}
/* right BOX */
.extra-box {border: 2px solid #ff8fb3;padding: 10px;background: linear-gradient(to bottom, #ffffff, #fff0f6);}
.scroll-box {width: 200px;}.extra-box {width: 300px;height: 300px;}
 /* carousel */
.carousel-container {width: 100%;height: 75px;margin: 10px 0 20px 0;overflow: hidden;
border: 2px solid #ff8fb3; background: linear-gradient(to bottom, #ffffff, #fff0f6);}
.carousel-track {display: flex;width: max-content;animation: scroll 8s linear infinite;}
.carousel-track img {height: 55px;width: 90px;margin: 10px;background: white;padding: 2px;}
.carousel-container {width: 100%;max-width: 345px;margin: 10px auto;overflow: hidden;}
.carousel-group {display: flex;}
.carousel-group img {flex-shrink: 0;}
@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(-50%);}}
.carousel-track {display: flex;width: max-content;animation: scroll 8s linear infinite;}
.left-column {flex-direction: column;}
/* imood*/
.imood-box {padding: 10px;text-align: center;font-size: 12px;border: none;background: none;box-shadow: none;border-radius: 0;margin: 0;}
.window-box {margin: 15px 0;border: 2px solid #f5a9c5;border-radius: 10px;overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);background: linear-gradient(to bottom,#ffffff,#ffe4ef);}
/* buttons for mood*/
.window-top {display: flex;justify-content: space-between;align-items: center;padding: 4px 8px;
font-size: 12px;color: #ff4f8b;border-bottom: 1px solid #f5a9c5;background: linear-gradient(to bottom, #fff0f6, #ffe4ef);}
.win-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
border:1px solid #d88aa8;background:linear-gradient(to bottom,#ffffff,#ffd9e8);color:#ff4f8b;
font-size:12px;cursor:pointer;}

.imood-box {padding: 10px;text-align: center;font-size: 12px;}
.extra-box {overflow-y: auto;overflow-y: scroll;}

/* achievements */
.window-buttons .win-btn{margin-left:4px;}
#achievement-container{position:fixed;bottom:20px;
right:20px;display:flex;flex-direction:column;gap:10px;z-index:9999;}

.achievement-popup{display:flex;align-items:center;gap:10px;padding:14px;
background:linear-gradient(to bottom,#ffffff,#ffe4ef);border:2px solid #f5a9c5;border-radius:0;
box-shadow:0 6px 15px #ffdee8;
color:#d14a86;
transform:translateX(120%);
transition:transform 0.4s ease;
position:relative;}

.achievement-popup.show{transform:translateX(0);}
.achievement-popup img{width:48px;height:48px;}
.achievement-popup .close-btn{position:absolute;top:6px;right:6px;}
.reset-link{text-decoration: underline;cursor: pointer;}
.reset-link:hover{color: rgb(255, 17, 116);}

#footer{display:flex;justify-content:space-between;align-items:center;}

.cbox-container{position:relative;}

/* lace overlay */
.cbox-container::before{content:"";position:absolute;top:-5px;left:0;width:100%;height:100px;
background:url("https://i.postimg.cc/MHq8sTYr/IMG-9464.png") no-repeat center top;
background-size:190% auto;pointer-events:none; /* lets people still click the chat */z-index:5;}

.button-box{
  border: 2px solid #ff8fb3;
  padding: 6px;
  display: inline-block;
  background: linear-gradient(to bottom, #ffffff, #fff0f6);
  margin: 10px 0;
  text-align: center;
}