:root {
  --pale-blue: #b4edee;
  --bright-blue: #55dde0;
  --mid-blue: #33658a;
  --deep-blue: #2f4858;
  --theme-yellow: #f6ae2d;
  --pale-yellow: #ffe6b8;
  --theme-orange: #f26419;
}

body {
  background: var(--pale-blue);
  font: 10px calibri;
}

table {
  font-family: calibri, verdana, arial;
  font-size: 10px;
  text-align: left;
  color: #ca8e83;
  letter-spacing: 1px;
  line-height: 10px;
}

a:link,
a:visited,
a:active {
  color: #555;
  text-decoration: none;
}
a:hover {
  color: #999;
}

b {
  font-weight: bold;
  color: #a9bad8;
}
i {
  color: #c35187;
  font-style: normal;
}

textarea {
  font:
    10px calibri,
    arial;
  letter-spacing: 1px;
  color: #999;
  background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
  background-color: #f4ecc9;
  border-radius: 5px;
}
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
  background: transparent;
}

a.big-link {
  font-weight: bolder;
  color: #c943a1;
}

.big-title {
  background: transparent;
  text-transform: uppercase;
  font-family: georgia, monospace, arial;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: var(--theme-orange);
  line-height: 18px;
  padding-top: 1px;
  padding-left: 4px;
  margin-bottom: 4px;
  letter-spacing: 3px;
  border-left: 0px solid #8f4f70;
  border-bottom: 0px solid #eee;
}

.title {
  background: transparent;
  text-transform: lowercase;
  font-family: georgia, monospace, arial;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  color: var(--theme-orange);
  line-height: 12px;
  padding-top: 1px;
  padding-left: 4px;
  margin-bottom: 4px;
  letter-spacing: 3px;
  border-left: 0px solid #8f4f70;
  border-bottom: 0px solid #eee;
}

.navigation {
  background: var(--deep-blue);
  margin-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#menu a {
  display: inline-block;
  background: var(--theme-yellow);
  font:
    normal 9px "silkscreen",
    monospace,
    georgia;
  text-transform: uppercase;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  letter-spacing: 1px;
  color: var(--mid-blue);
  border-radius: 10px;
  border: 0px solid #48ae47;
  line-height: 9px;
}

#menu a:hover {
  color: #555;
}

.sitename {
  color: var(--deep-blue);
  background: #fff;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-right: 1px solid #c6d9ec;
  line-height: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-left: 1px solid var(--deep-blue);
}

.siteurl {
  color: var(--deep-blue);
  font-weight: bold;
  background: #fff;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 15px;
  letter-spacing: 2px;
  border-right: 1px solid var(--deep-blue);
}

.topboxes {
  background: var(--pale-yellow);
  color: var(--mid-blue);
  border-bottom: 1px solid var(--deep-blue);
  border-top: 1px solid var(--deep-blue);
  border-right: 1px solid var(--deep-blue);
  border-left: 1px solid var(--deep-blue);
  overflow: scroll;
  overflow-x: hidden;
  font: 10px calibri;
}
.topscrollbox {
  height: 128px;
  overflow: auto;
  overflow-x: hidden;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
  font-size: 10px;
}

.sidebar {
  background: #fff;
  border-right: 1px solid var(--deep-blue);
  border-left: 1px solid var(--deep-blue);
  overflow: scroll;
  overflow-x: hidden;
}
.sidebar-image {
  width: 161px;
  padding-bottom: 4px;
}
.content {
  background: #fff;
  border-left: 1px solid var(--deep-blue);
  overflow: scroll;
  overflow-x: hidden;
}
.scrollbox {
  height: 360px;
  overflow: auto;
  overflow-x: hidden;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
}

.bottom {
  background: var(--deep-blue);
  color: #fff;
  border-top: 1px solid var(--deep-blue);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  line-height: 20px;
}

.footer {
  background: var(--deep-blue);
  border-top: 2px solid #ddd;
}
.credits {
  background: transparent;
  border-top: 10px solid var(--deep-blue);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.carousel-container {
  border-right: 1px solid var(--deep-blue);
  border-left: 1px solid var(--deep-blue);
  background: var(--pale-yellow);
  height: 512px; /* Set your desired fixed height */
  width: 90%;
  display: flex; /* Aligns child elements (images) in a row */
  flex-direction: row;
  overflow-x: auto; /* Hide excess image parts if they get clipped */
  overflow-y: hidden;
  padding-bottom: 10px;
}

.carousel-item img {
  width: auto;
  height: 100%;
  object-fit: scale-down; /* This is key: scales the image to fill the container while maintaining aspect ratio, cropping any excess */
  object-position: center; /* Centers the image within the container */
  padding: 6px;
}