@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

:root {
  /* Backgrounds */
  --main-bg: #F5EDE3;
  --main-bg-design: #E6D2C0;

  --secondary-bg: #EDE0D2;
  --secondary-bg-pattern: #D8C1AE;

  /* Content boxes */
  --content-box: #FFF9F2;
  --secondary-content-box: #EAD8C8;

  /* Text */
  --heading: #4B3428;
  --main-text: #604A3D;
  --secondary-text: #8A7162;

  /* Buttons */
  --button: #80604E;
  --button-hover: #654838;

  /* Links */
  --link: #795844;
  --link-hover: #B8754D;

  /* Accent */
  --accent: #B98B68;
  
  /* Borders */
  --border-important: #9A745B;
  --border-subtle: #D9C5B3;
}


/* GENERAL */

* {
    cursor: url('https://mocha-charm.neocities.org/images/cursor.png'), auto;
}

body {
    margin: 0 auto;
    width: 900px;
    background-color: var(--main-bg);    
    color: var(--main-text);
    text-transform: lowercase;
    font-family: "ms ui gothic";
    line-height: 15px;
    padding-top: 12px;
    font-size: 12px;
    text-align: justify;
    letter-spacing: 1px;
}

h1 {
  font-family: "Georgia", serif;
  color: var(--heading);
  font-size:32px;
  font-weight: 400;
}

h2 {
  font-family: "Georgia", serif;
  font-size: 25px;
  color: var(--heading);
  font-weight: 400;
}

h3 {
  font-family: "Georgia", serif;
  font-size: 20px;
  color: var(--heading);
  font-weight: 400;
}

h4,
h5,
h6 {
  font-family: "Georgia", serif;
  font-size: 15px;
  color: var(--heading);
  font-weight: normal;
}

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

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

/* INDEX/HOME */

.outer {
    width: 800px;
    padding: 8px;
    background: url(https://file.garden/aqap2HgSLv4nanF3/stripedborder.png);
    
    border: 1px solid;
    border-image-source: url(https://file.garden/aqap2HgSLv4nanF3/border_6.gif);
    border-image-repeat: round;
    border-image-slice: 5;
    border-image-width: 5px;
    margin: 0;
}

.container {
    background-color: var(--content-box);
}

.inner-container {
    border: 1px dashed var(--border-subtle);
    padding: 12px;
}

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.sidebar li {
    list-style-type: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 4px;
}

.sidebar {
    border-right: 1px solid var(--border-subtle);
    border-left: 1px double var(--border-subtle);
}

.sidebar h4 {
    padding: 4px;
    border: 1px solid var(--border-subtle);
    border-right: hidden;
    border-left: hidden;
    margin:0;
    background: url(https://file.garden/aqap2HgSLv4nanF3/dottedpattern.png);
}

.content {
    display: grid;
    grid-template-columns: 160px auto;
    border-right: 1px double var(--border-subtle);
}

.center {
    margin: 4px;
}

.insidecenter {
    padding: 4px;
    border: 1px solid var(--border-subtle);
}

.header {
    border-bottom: 1px double var(--border-subtle);
}

.header h1 {
    font-family: "Dancing Script";
}

.outline {
    margin: 8px;
    border: 1px solid var(--border-subtle);
    padding: 4px;
}

.intro-text,
.disclaimer,
.text {
    padding: 8px;
    border: 1px dashed var(--border-subtle);
}

.intro-text h4,
.disclaimer h4 {
    text-align: center;
    font-style: italic;
}

.top-grid {
    padding-top: 4px;
}

.bottom-grid {
    display: grid;
    margin: 0px 0px 4px 0px;
    gap: 4px;
    /* Removed align-items: start so they match heights again */
}

#status, #right-box {
    border: 1px solid var(--border-subtle);
    padding: 4px;
    box-sizing: border-box; /* Ensures padding doesn't break the border bounds */
}

.updates {
    overflow-y: auto;
    height: 95px;
    gap: 5px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.update {
    gap: 5px; /* Reduced gap to keep it tighter */
    display: flex;
    padding: 5px;
    flex-direction: column;
    background-color: var(--secondary-content-box);
}

.update-name {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0; /* Reset default margin so it doesn't add invisible height */
    /* Removed height: 0; because it breaks layout flow */
}

.update-name::after {
    content: url(https://file.garden/aqap2HgSLv4nanF3/icon_new1.gif);
}

.footer {
    border-top: 1px double var(--border-subtle);
    text-align: center;
    padding: 8px;
}

/* CREDITS PAGE */

.credits-outer {
    width: 800px;
    padding: 8px;
    background: url(https://file.garden/aqap2HgSLv4nanF3/dottedpattern.png);
    border: 3px double var(--border-important);
    margin: 0;
}

.credits-container {
    background-color: var(--content-box);
}

.credits-inner {
    border: 1px dashed var(--border-subtle);
    padding: 12px;
}

.center {
    margin: 4px;
}

.insidecenter {
    padding: 4px;
    border: 1px solid var(--border-subtle);
}