body {
    /* Primary color: #524842 */
    --fgColor: #71635B;
    --bgColor: #fffffe;
    --borderColor: #c6c1c9;
    --accentColor: #FF4A00; /* #630039 */
    --hoverColor: #FF7B47;

    /* --fgColor: #efefef;
    --bgColor: #1a181c;
    --borderColor: #5d5861;
    --accentColor: #a2e8ff; */
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background-color: var(--bgColor);
    color: var(--fgColor);

    font-family: "chivo-mono", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

h1, h2, h3 {
    font-weight: 400;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

video {
    width: calc(100% - 24px);
    height: auto;
}

a {
    font-weight: 700;
    color: var(--accentColor);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

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

.big-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

.container {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 24px);
    margin: 12px 0;
    padding: 0 12px;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Legacy Edge */
}

/* Hide scrollbar for Chrome, Safari, Opera, and modern Edge */
.container::-webkit-scrollbar {
  display: none;
}

.left {
    width: 25%;
}

.center {
    width: 44.9%;
    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);
}

.right {
    width: 30%;
}

.right > *:not(:first-child):not(:last-child) {
  border-bottom: 1px solid var(--borderColor);
}

.nav-category {
    display: flex;
    flex-direction: row;
    padding-top: 18px;
    padding-bottom: 10px;
}

.nav-category > *:first-child {
  flex: 0 0 110px; /* Forces exactly 200px width */
}

.nav-category h2 {
    margin: 0;
}

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

.nav-category ul li {
    padding-top: 0;
    padding-bottom: 8px;
}

.nav-category ul li a {
    position: relative;
    left: 0;
    text-decoration: none;
    font-weight: 300;
    color: var(--fgColor);
    transition: 0.2s;
}

.nav-category ul li a::before {
  content: "> ";
  position: relative;
  bottom: 1px;
}

.nav-category ul li a:hover {
    left: 4px;
}

.nav-category img {
    width: calc(100% - 150px) !important;
    height: auto;
    margin-top: -20px;
    margin-bottom: -8px;
}

.left h2 {
    padding-bottom: 15px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--borderColor);
}

.center-middle {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.embed-container {
    width: 100%;
}

.embed-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Ensures the video maintains standard wide dimensions */
  border: none;
}

.container img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.container img.width-70 {
    width: 70%;
    height: auto;
    margin: auto;
}

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

.link-list li {
    padding-top: 0;
    padding-bottom: 8px;
}

.link-list li a {
    position: relative;
    left: 0;
    text-decoration: none;
    font-weight: 300;
    color: var(--fgColor);
    transition: 0.2s;
}

.link-list li a::before {
  content: "> ";
  position: relative;
  bottom: 1px;
}

.link-list li a:hover {
    left: 4px;
}

.gray-border {
    border: 1px solid #eeeeee;
}

.spacer {
    display: block;
    min-height: 40px;
}

.footer {
    margin-top: auto;
    margin-bottom: 0;
    color: var(--borderColor);
}