:root {
      --bg-color: #ffccec;
      --text-color: #5f003f;
      --card-bg: rgba(255, 255, 255, 0.5);
      --notice-bg: rgba(255, 235, 235, 0.75);
      --notice-border: #ff5a5a;
      --notice-title: #d32f2f;
      --link-color: #a0006b;
      --btn-bg: rgba(255, 255, 255, 0.7);
      --btn-text: #5f003f;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #2b1022;
        --text-color: #ffc2eb;
        --card-bg: rgba(40, 15, 33, 0.65);
        --notice-bg: rgba(60, 20, 40, 0.85);
        --notice-border: #ff7597;
        --notice-title: #ff8fa3;
        --link-color: #ff80d5;
        --btn-bg: rgba(60, 20, 40, 0.8);
        --btn-text: #ffc2eb;
      }
    }

    :root.dark-theme {
      --bg-color: #2b1022;
      --text-color: #ffc2eb;
      --card-bg: rgba(40, 15, 33, 0.65);
      --notice-bg: rgba(60, 20, 40, 0.85);
      --notice-border: #ff7597;
      --notice-title: #ff8fa3;
      --link-color: #ff80d5;
      --btn-bg: rgba(60, 20, 40, 0.8);
      --btn-text: #ffc2eb;
    }

    :root.light-theme {
      --bg-color: #ffccec;
      --text-color: #5f003f;
      --card-bg: rgba(255, 255, 255, 0.5);
      --notice-bg: rgba(255, 235, 235, 0.75);
      --notice-border: #ff5a5a;
      --notice-title: #d32f2f;
      --link-color: #a0006b;
      --btn-bg: rgba(255, 255, 255, 0.7);
      --btn-text: #5f003f;
    }

    body, html {
      margin: 0;
      padding: 0;
      min-height: 100%;
      overflow: auto; 
      font-family: sans-serif;
      color: var(--text-color);
      transition: color 0.3s ease;
    }

    a {
      color: var(--link-color);
    }

    .scrolling-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--bg-color);
      background-image: url('../images/scrollingstars.png');
      background-repeat: repeat; 
      background-size: auto; 
      animation: scrollDiagonal 20s linear infinite;
      z-index: -1; 
      transition: background-color 0.3s ease;
    }

    .content-container {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }

    .content-card {
      position: relative;
      background-color: var(--card-bg);
      backdrop-filter: blur(5px);
      max-width: 600px;
      width: 100%;
      padding: 30px;
      corner-shape: squircle;
      border-radius: 40px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      transition: background-color 0.3s ease;
    }

    .theme-toggle-btn {
      position: absolute;
      bottom: 25px;
      right: 25px;
      background-color: var(--btn-bg);
      color: var(--btn-text);
      border: 0px solid var(--btn-text);
      padding: 10px 13px 8px;
      border-radius: 30px;
      cursor: pointer;
      font-size: 1em;
      transition: all 0.3s ease;
    }

    .notice-box {
      background-color: var(--notice-bg);
      border-bottom: 6px solid var(--notice-border);
      border-left: 3px solid var(--notice-border);
      border-right: 3px solid var(--notice-border);
      border-top: 3px solid var(--notice-border);
      padding: 12px 16px;
      corner-shape: squircle;
      border-radius: 50px;
      margin-bottom: 24px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .notice-box h3 {
      margin-top: 5px;
      margin-bottom: 8px;
      font-size: 0.9em;
      color: var(--notice-title);
    }

    .notice-box p {
      margin: 0;
      margin-bottom: 3px;
      font-size: 0.8em;
    }

    @keyframes scrollDiagonal {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -400px -400px; 
      }
    }