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

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

/* var */

:root {
  --content-bg-color: #faf7f2;
  --content-border-color: #fba1c0;
  --content-heading-color: #8cf581;
  --content-link-color: #f38f9e;
}

/* body */

body {
  background: url(/graphics/backgrounds/multicolorstars.gif);
  background-size: 25em;
  font-family: "basiic", Geneva, Verdana, sans-serif;
  color: #444;
  line-height: 20px;
  margin: 0;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
}

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

/* text styling */

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

a:hover {
  color: var(--content-link-color);
  font-style: oblique;
  text-shadow: 0 0 2px #fa4969;
}

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

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

p {
  margin: 6px 0;
  padding: 7px;
  font-size: 18px;
}

mark {
  background-color: #bef7a9;
  color: #444;
}

ul {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
  margin: 2px;
}

li {
  font-size: 13px;
  padding: 5px;
}

/* main container */

#layout {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin: auto;

  display: flex;
  align-content: center;
  align-items: stretch;
  justify-content: center;
  flex: 1;
}

#right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;

  font-family: "basiic";
  font-size: 15px;

  background: url(/graphics/backgrounds/greendots.gif);

  border: 5px ridge var(--content-border-color);
  border-radius: 6px;

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

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

.title {
  width: 100%;
  background: rgb(255, 189, 200);
  background: linear-gradient(
    86deg,
    rgba(255, 189, 200, 1) 6%,
    rgba(246, 255, 175, 1) 26%,
    rgba(205, 255, 167, 1) 48%,
    rgba(195, 241, 255, 1) 72%,
    rgba(241, 202, 245, 1) 97%
  );
  height: auto;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  border-bottom: 2px ridge var(--content-border-color);
  font-weight: 600;
}

.title2 {
  width: 100%;
  background: rgb(255, 189, 200);
  background: linear-gradient(
    86deg,
    rgba(255, 189, 200, 1) 6%,
    rgba(246, 255, 175, 1) 26%,
    rgba(205, 255, 167, 1) 48%,
    rgba(195, 241, 255, 1) 72%,
    rgba(241, 202, 245, 1) 97%
  );
  height: auto;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  border-bottom: 2px ridge var(--content-border-color);
  border-top: 2px ridge var(--content-border-color);
  font-weight: 600;
}

/* header */

#header {
  width: 100%;
  height: 160.5px;
  background: rgb(255, 189, 200);
  background: linear-gradient(
    86deg,
    rgba(255, 189, 200, 1) 6%,
    rgba(246, 255, 175, 1) 26%,
    rgba(205, 255, 167, 1) 48%,
    rgba(195, 241, 255, 1) 72%,
    rgba(241, 202, 245, 1) 97%
  );
  border-bottom: 2px ridge var(--content-border-color);
  overflow: hidden;
  padding: 25px;
  margin-bottom: 0;
}

.header-img {
  position: relative;
  width: 35%;
  left: -1.5em;
  top: -2em;
  transform: scaleX(-1);
}

.kerotop {
  position: relative;
  width: 12%;
  left: 12.5em;
  top: -11.5em;
}

.name {
  font-family: "WelcomeDarling";
  font-weight: bold;
  color: rgb(255, 255, 255);
  -webkit-text-stroke: 2px rgb(129, 235, 128);
  text-shadow: 2px 2px 3px #3a774e;
  font-size: clamp(35px, 9vw, 55px);
  scale: 1.5;
  z-index: 99;
  position: relative;
  top: -3.2em;
  left: 7.5em;
}

/* layout */

#content {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  margin-top: 0;
}

/* sidebars */

#sidebar-l {
  width: 200px;
  flex-shrink: 0;
  background: url(/graphics/backgrounds/yellowstripe.png);
  padding: 0.3px;

  border-right: 2px ridge var(--content-border-color);
  text-align: left;
  position: relative;
}

#sidebar-r {
  width: 155px;
  flex-shrink: 0;
  background: url(/graphics/backgrounds/yellowstripe.png);
  padding: 0.3px;

  border-left: 2px ridge var(--content-border-color);
  position: relative;
}

#sidebar-l .navbtn,
#sidebar-r .navbtn {
  display: block;
  padding: 3px 7px;

  background: linear-gradient(#ffffff, #bff1a0);
  border: 1px solid #bff1a0;

  font-family: "basiic";
  color: var(--content-link-color);
  text-decoration: none;
}

#sidebar-l b,
#sidebar-r b {
  font-family: "WelcomeDarling";
  font-size: 1.3em;

  display: block;
  padding: 5px;
  margin: 0 auto;

  color: #fdfcfc;
  -webkit-text-stroke: 0.7px #fd689a;
  filter: drop-shadow(1px 1px 1px #8d3c5c9b);
}

#sidebar-l .navbtn:hover,
#sidebar-l .navbtn2:hover,
#sidebar-r .navbtn:hover {
  background: linear-gradient(#ffffff, #f8b2c4);
  color: #ffffff;
  font-style: oblique;
  border: 1px solid #e7638f;

  text-shadow: 1px 1px 2px #f7385b;
}

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

.dropdown-content {
  display: none;
  flex-direction: column;
  background: url(/graphics/backgrounds/yellowstripe.png);
  padding-left: 8px;

  & a {
    text-decoration: none;
    color: #444;
    font-size: 14px;
    padding: 2px 4px;
  }

  & a:hover {
    font-style: oblique;
    text-shadow: none;
  }
}

.navbtn2 {
  display: block;
  background: linear-gradient(#ffffff, #d7fcc0);
  border: 1px solid #d3f6be;
  border-radius: 8px 1px 1px 10px;
}

.dropdown-content.show {
  display: flex;
}

.calendar-wrap {
  width: 155px;
  overflow: hidden;
  text-align: center;
}

.calendar {
  width: 171px;
  height: 212px;
  padding: 0px;
  margin: 0px;

  background-color: #fbe;
  pointer-events: none;

  transform: scale(0.88) translateX(-10.5px);
  transform-origin: top center;
  border: none;
}

.moodwrap {
  width: 100%;
  height: 5em;
  padding: 8px;
  margin: 10px auto;
  background: #fcd2d6;
  background-image: url(/graphics/backgrounds/sozaiya-pinkcheck.gif);

  border: 1px solid #f8b2c4;
  border-radius: 12px;

  text-align: center;
}

.mood {
  width: 100%;
  height: 3.8em;
  background: var(--content-bg-color);
  margin: 0;
  border: 1px solid #e39bad;
  border-radius: 8px;

  & img {
    margin: 5px auto;
    width: 60px;
  }

  & h4 {
    font-family: "WelcomeDarling";
    color: rgb(252, 252, 252);
    text-shadow: 1px 1px 1px #4444444e;
    -webkit-text-stroke: 1px #91e283;

    margin: 0;
    font-size: 26px;
    position: relative;
    top: -11px;
    left: -10px;
  }
}

/* main */

#main {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  max-height: 570px;
  gap: 10px;
  padding: 10px;
  margin: 0 auto;
  justify-content: center;
}

.boxwrap {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: url(/graphics/backgrounds/glowflowers.gif);

  border: 1px ridge var(--content-border-color);
  border-radius: 5px;

  box-shadow:
    inset #ffffff 0 3px 5px 0px,
    inset #f5a2b4 0 0 3px 1px;
}

.box {
  background: var(--content-bg-color);
  border: 1px ridge var(--content-border-color);
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 4px;

  & h2 {
    margin: 5px;
    padding: 3px;
  }

  & h3 {
    margin: 5px;
    padding: 3px;
  }
}

.content-divider {
  display: block;
  margin-top: 2px;
  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: 2px ridge var(--content-border-color);
}

/* responsive */

@media (max-width: 700px) {
  body {
    display: block;
  }

  #container {
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
  }

  #header {
    padding: 10px;
  }

  .header-img {
    position: static;
    width: 25%;
    max-width: 60px;
    left: 0;
    transform: scaleX(-1);
  }

  .box-img {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
    width: 25%;
    max-width: 90px;
  }

  #content,
  #main {
    min-width: 0;
  }

  #layout,
  #content,
  #main {
    display: block;
  }

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

  #sidebar-r {
    display: none;
  }

  .box {
    width: 100%;
    max-width: 100%;
    flex: none;
  }
}