@font-face {
  font-family: 'Pixelated';
  src: url('https://file.garden/Z1LmxrbjjD-R7xuV/Pixeled.ttf') format('truetype');
}

@font-face {
  font-family: 'Rainyhearts';
  src: url('https://file.garden/Z1LmxrbjjD-R7xuV/rainyhearts.ttf') format('truetype');
}

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Rainyhearts", sans-serif;
      background: url('/images/base/clouds1.gif') no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      padding: 20px;
      color: #8b4049;
    }

    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background: #FFE6F1;
      border: 1px solid #FFB8D9;
      border-radius: 2px;
    }

    ::-webkit-scrollbar-thumb {
      background: #FF83BD;
      border-radius: 6px;
      border: 2px solid #FFE6F1;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #FF94C5;
    }

    .main-container {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      border: 3px solid #63D5F5;
      height: 85vh;
      min-height: 500px;
      display: flex;
      flex-direction: column;
      overflow: visible;
      position: relative;
      isolation: isolate;
    }

    .container-decoration {
      position: absolute;
      pointer-events: none;
      z-index: 1000;
    }

    .container-decoration.top-left {
      top: -35px;
      left: -35px;
      width: 75px;
      height: 75px;
    }

    .container-decoration.middle-right {
      top: 20%;
      right: -50px;
      transform: translateY(-50%);
      width: 125px;
      height: 125px;
    }

    .container-decoration.bottom-right {
      bottom: -20px;
      right: -55px;
      width: 150px;
      height: 150px;
    }

    .header {
      background: linear-gradient(to bottom, #E7F9FD 0%, #BCEDFB 100%);
      padding: 15px;
      border-bottom: 2px solid #63D5F5;
      position: relative;
      z-index: 1;
    }
    
    .header-image {
      width: 100%;
      height: 120px;
      background: url('/images/ocs/banner1.png') center/cover;
      border: 2px solid #63D5F5;
    }

    .content-wrapper {
      display: flex;
      flex: 1;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .sidebar-left {
      width: 180px;
      background: #FFE6F1;
      border-right: 2px solid #FF83BD;
      overflow-y: auto;
      padding: 15px;
    }

    .sidebar-section {
      margin-bottom: 20px;
    }

    .sidebar-title {
      font-size: 13px;
      color: #FF83BD;
      font-weight: bold;
      margin-bottom: 8px;
      padding-bottom: 4px;
      text-align: center;
    }

    .profile-box {
      background: #fff;
      border: 2px solid #FF83BD;
      padding: 10px;
      margin-bottom: 10px;
    }

    .profile-image {
      width: 100%;
      height: 100%;
    background: linear-gradient(to bottom, #E7F9FD 0%, #BCEDFB 100%);
      border: 2px solid #FF83BD;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .profile-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      align-items: center;
    }

    .sidebar-text {
      font-size: 12px;
      color: #ED559C;
      line-height: 1.6;
      text-align: center;
    }

    .sidebar-link {
      color: #CE5CFF;
      text-decoration: none;
      font-size: 13px;
      display: block;
      padding: 3px 0;
    }

    .sidebar-link:hover {
      text-decoration: underline;
      color: #E097FF;
    }

    .main-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background: url('/images/bg/bg1.jpg');
      background-size: 100% 100%;
      background-position: center;
      background-attachment: fixed;
      background-color: rgba(122, 144, 255, 0.4);
      background-blend-mode: lighten;
    }

    .post {
      margin-bottom: 25px;
      background: #fff;
      border: 2px solid #3ACBF2;
      padding: 15px;
      position: relative;
    }

    .post-content {
      font-size: 0.8em;
      color: #2A92C9;
      line-height: 1.8;
      position: relative;
    }

    .post-decoration {
      position: absolute;
      top: -26px;
      right: -18px;
      width: 85px;
      height: 70px;
      pointer-events: none;
    }

    .post-date {
      font-size: 13px;
      color: #E097FF;
      margin-bottom: 5px;
    }

    .post-title {
      font-size: 16px;
      color: #2A92C9;
      font-weight: bold;
      margin-bottom: 10px;
      border-left: 4px solid #2A92C9;
      padding-left: 8px;
    }

    .post-image {
      width: 100%;
      max-width: 300px;
      height: 100%px;
      border: none;
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .post-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .post-footer {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 2px dotted #91BE13;
      font-size: 11px;
      color: #91BE13;
    }

    .sidebar-right {
      width: 180px;
      background: #FFFAE6;
      border-left: 2px solid #FFE272;
      overflow-y: auto;
      padding: 15px;
    }

    .calendar {
      background: #FFF1B8;
      border: 2px dashed #F9B14C;
      padding: 10px;
      margin-bottom: 15px;
    }

    .calendar-header {
      text-align: center;
      font-size: 12px;
      color: #F79308;
      margin-bottom: 8px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .calendar-nav {
      cursor: pointer;
      color: #F9A734;
      user-select: none;
    }

    .calendar-nav:hover {
      color: #F9B14C;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      font-size: 10px;
      text-align: center;
    }

    .calendar-day {
      padding: 2px;
      color: #F79308;
    }

    .calendar-day.header {
      color: #F79308;
      font-weight: bold;
    }

    .calendar-day.today {
      background: #FFE272;
      border-radius: 3px;
    }

    .calendar-day.other-month {
      color: #CCC581;
    }

    .button-section {
      background: #fff;
      border: 2px solid #e8b4b8;
      padding: 15px;
      text-align: center;
      margin-bottom: 15px;
    }

    .button-title {
      font-size: 13px;
      color: #c97679;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .button-image {
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .button-image:hover {
      transform: scale(1.05);
    }

    .button-image img {
      width: 88px;
      height: 31px;
      border: 1px solid #e8b4b8;
      display: block;
    }

    .footer {
           background: linear-gradient(to bottom, #E7F9FD 0%, #BCEDFB 100%);
      border-top: 2px solid #63D5F5;
      padding: 10px 15px;
      text-align: center;
      font-size: 13px;
      color: #0FBFF0;
      position: relative;
      z-index: 1;
    }

    .footer-links {
      margin-top: 5px;
       color: #63D5F5;
    }

    .footer-link {
      color: #63D5F5;
      text-decoration: none;
      margin: 0 5px;
    }

    .footer-link:hover {
      text-decoration: underline;
    }

    li {
      list-style-image: url('/images/deco/favicon1.gif');
      margin-left: 30px;
    }

    a {
      text-decoration: none;
      color: #3ACBF2;
      transition: all 0.3s ease;
      position: relative;
    }

    a:hover {
      text-decoration-line: underline;
      text-decoration-style: wavy;
      color: #91E2F8;
      text-shadow: 0 0 8px rgba(46, 156, 22, 0.3);
    }

    /* this makes it mobile-friendly */
    @media (max-width: 768px) {
      body {
        padding: 5px;
      }

      .main-container {
        height: auto;
        min-height: 100vh;
        border-width: 2px;
      }

      /* this hides the pngs in mobile idk how to fix that problem yet so you're gonna have to deal with hit for now */
      .container-decoration {
        display: none;
      }

      .header {
        padding: 10px;
      }

      .header-image {
        height: 80px;
      }

      .site-title {
        position: static;
        margin-top: 10px;
        font-size: 14px;
        padding: 6px 10px;
      }

      .site-subtitle {
        font-size: 10px;
      }

      .content-wrapper {
        flex-direction: column;
      }

      .sidebar-left,
      .sidebar-right {
        width: 100%;
        border: none;
        border-top: 2px solid #e8b4b8;
        max-height: none;
        overflow: visible;
        padding: 10px;
      }

      .sidebar-left {
        order: 2;
      }

      .main-content {
        order: 1;
        padding: 10px;
        background-attachment: scroll;
      }

      .sidebar-right {
        order: 3;
      }

      .post {
        padding: 10px;
        margin-bottom: 15px;
      }

      .post-decoration {
        width: 30px;
        height: 30px;
        top: -3px;
        right: -3px;
      }

      .post-image {
        max-width: 100%;
        height: 200px;
      }

      .calendar-grid {
        font-size: 9px;
      }

      .footer {
        font-size: 11px;
        padding: 8px 10px;
      }
    }

    /* this makes it mobile-friendly too */
    @media (max-width: 480px) {
      .main-container {
        border-width: 1px;
      }

      .header-image {
        height: 60px;
      }

      .site-title {
        font-size: 12px;
      }

      .post-title {
        font-size: 14px;
      }

      .post-content {
        font-size: 0.75em;
      }
    }