@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap');

body {
    margin: 0;
 
  font-family: "Cormorant Upright", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #f5e7ff;
  background: url("background.png");
  background-repeat: repeat;
}

/* links */
a {
    color: #dcb8ff;
    text-decoration: none;
}

a:hover {
    color: white;
}

/* layout */
#wrapper {
    width: 70%;
    max-width: 80%;
    margin: 20px auto;
    display: flex;
    gap: 10px;
}

/* sidebar */
#sidebar {
    width: 260px;
    background: #241029;
    border: 3px solid #b07ae8;
    padding: 15px;
}

/* main content */
#content {
    flex: 1;
    background: #241029;
    border: 3px solid #b07ae8;
    padding: 20px;
}

.welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.center-block {
    text-align: center;
}
/* boxes */
.box {
    background: #2a1433;
    border: 1px solid #7c4ea6;
    padding: 10px;
    margin-bottom: 15px;
}

.status {
    background: #2a1433;
    border: 1px solid #7c4ea6;
    padding: 10px;
    margin-bottom: 15px;
}

.footer {
    background: #2a1433;
    border: 1px solid #7c4ea6;
    padding: 10px;
    margin-bottom: 15px;
}

/* text */

.jacquard-24-regular {
  font-family: "Jacquard 24", system-ui;
  font-weight: 400;
  font-style: normal;
}

.manufacturing-consent-regular {
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
}

.princess-sofia-regular {
  font-family: "Princess Sofia", cursive;
  font-weight: 400;
  font-style: normal;
}

.cormorant-upright-light {
  font-family: "Cormorant Upright", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-upright-regular {
  font-family: "Cormorant Upright", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-upright-medium {
  font-family: "Cormorant Upright", serif;
  font-weight: 500;
  font-style: normal;
}

.cormorant-upright-semibold {
  font-family: "Cormorant Upright", serif;
  font-weight: 600;
  font-style: normal;
}

.cormorant-upright-bold {
  font-family: "Cormorant Upright", serif;
  font-weight: 700;
  font-style: normal;
}

h1 {
    text-align: center;
    color: #e0b8ff;
    font-family:"Manufacturing Consent"
}

h2 {
    color: #d0a6ff;
    border-bottom: 1px solid #7c4ea6;
    padding-bottom: 3px;
    font-family:"Manufacturing Consent"
}

.online {
    color: #71ff71;
    text-shadow: 0 0 1px #71ff71;
    text-shadow: 0 0 3px #57ff57;
    text-shadow: 0 0 5px #3eff3e;
    animation: glowPulse 1s infinite alternate;
}

.glow {
    color: #f2e6ff;
    text-shadow:
        0 0 5px #b58cff,
        0 0 10px #8a63ff,
        0 0 20px #6f43ff;
    animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
    from { filter: brightness(1); }
    to { filter: brightness(1.5); }
}

/* blink text */b
.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* counter */
.counter {
    text-align: center;
    font-size: 24px;
    letter-spacing: 5px;
}

/* images */
img {
    max-width: 100%;
}

    
/* sub-pages*/
.sub-wrapper {
    width: 70%;
    max-width: 80%;
    margin: 40px auto;
}

/* ===== CAT PAGE ===== */

.cat-header {
    background: #241029;
    border: 3px solid #7c4ea6;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.cat-panel {
    flex: 1;
    background: #241029;
    border: 3px solid #7c4ea6;
    padding: 15px;
    text-align: center;
}

.cat-wrapper {
    width: 70%;
    max-width: 80%;
    margin: 60px auto;
}

/* split 50/50 layout */
.split-grid {
    display: flex;
    gap: 15px;
}

/* images inside cat panels */
.cat-panel img {
    width: 100%;
    display: block;
    margin: 10px auto;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #b07ae8 #241029;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #241029;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #b07ae8;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
  
  
.stress {
  background: rgba(15, 0, 25, 0.85);
  border: 1px solid #b56cff;
  padding: 16px;
  color: #e6ccff;
  max-width: 600px;
}

.stress textarea {
  width: 100%;
  height: 120px;
  background: #120018;
  color: #e6ccff;
  border: 1px solid #b56cff;
}

.stress button {
  margin: 4px;
  background: #2a0033;
  color: white;
  border: 1px solid #b56cff;
  cursor: pointer;
}

.stress ul {
  list-style: none;
  padding-left: 0;
}