:root {
  background-color: #dcdcdc;
  --navbar-dropdown-background: #fff;
  --my-dark-rgb: 35,35,35;
  --text: #424243;
  --entry-background: #f9f3f3;
  --entry-text: #424243;
  --entry-date: #ffffff;
  --entry-date-background: #72a68b;
  --timeline-bar: #9c9c9c;
  --link-color: #72a68b;
  --link-color-hover: #5b8e74;
  --nav-link-color: #72a68b;
  --nav-link-color-hover: #5b8e74;
  --quicknav-link: #fff;
  --quicknav-box-background: #9c9c9c !important;
  --header: #212529;
}

:root.dark-mode {
  background-color: #131817;
  --navbar-dropdown-background: #192d2a;
  --my-dark-rgb: 35,35,35;
  --text: #4b4b4b;
  --entry-background: #0c0c0c;
  --entry-text: #7a7a7a;
  --entry-date: #a5b5b1;
  --entry-date-background: #192d2a;
  --timeline-bar: #263d35;
  --link-color: #597164;
  --link-color-hover: #475b50;
  --nav-link-color: #597164;
  --nav-link-color-hover: #475b50;
  --quicknav-link: #b7cac5;
  --quicknav-box-background: #516b64 !important;
  --header: #556360;
}

/* ============================================
   GAME COLOR SYSTEM
   ============================================ */

/* Game Color Variables */
:root {
    --mgs3: #bdc357;      /* Metal Gear Solid 3: Snake Eater */
    --mgspo: #a5aa53;     /* Metal Gear Solid: Portable Ops */
    --mgspw: #8e9249;     /* Metal Gear Solid: Peace Walker */
    --mgsgz: #636633;     /* Metal Gear Solid V: Ground Zeroes */
    --mgsv: #1b1b1b;      /* Metal Gear Solid V: The Phantom Pain */
    --mg: #82aaf2;        /* Metal Gear */
    --mg2: #6687c4;       /* Metal Gear 2: Solid Snake */
    --mgs: #4d6a9f;       /* Metal Gear Solid */
    --mgs2: #fb5757;      /* Metal Gear Solid 2: Sons of Liberty */
    --mgs4: #659b6d;      /* Metal Gear Solid 4: Guns of the Patriots */
    --mgr: #326494;       /* Metal Gear Rising: Revengeance */
}

/* Game Border Classes */
.mgs3 { border-right: 6px solid var(--mgs3); }
.mgspo { border-right: 6px solid var(--mgspo); }
.mgspw { border-right: 6px solid var(--mgspw); }
.mgsgz { border-right: 6px solid var(--mgsgz); }
.mgsv { border-right: 6px solid var(--mgsv); }
.mg { border-right: 6px solid var(--mg); }
.mg2 { border-right: 6px solid var(--mg2); }
.mgs { border-right: 6px solid var(--mgs); }
.mgs2 { border-right: 6px solid var(--mgs2); }
.mgs4 { border-right: 6px solid var(--mgs4); }
.mgr { border-right: 6px solid var(--mgr); }

/* Game Label Classes (for left/right game indicators) */
.mgs3-label { background-color: var(--mgs3); height: 40px; }
.mgspo-label { background-color: var(--mgspo); height: 40px; }
.mgspw-label { background-color: var(--mgspw); height: 40px; }
.mgsgz-label { background-color: var(--mgsgz); height: 40px; }
.mgsv-label { background-color: var(--mgsv); height: 40px; }
.mg-label { background-color: var(--mg); height: 40px; }
.mg2-label { background-color: var(--mg2); height: 40px; }
.mgs-label { background-color: var(--mgs); height: 40px; }
.mgs2-label { background-color: var(--mgs2); height: 40px; }
.mgs4-label { background-color: var(--mgs4); height: 40px; }
.mgr-label { background-color: var(--mgr); height: 40px; }

/* Game Background Utility Classes */
.bg-mgs3 { background: var(--mgs3) !important; }
.bg-mgspo { background: var(--mgspo) !important; }
.bg-mgspw { background: var(--mgspw) !important; }
.bg-mgsgz { background: var(--mgsgz) !important; }
.bg-mgsv { background: var(--mgsv) !important; }
.bg-mg { background: var(--mg) !important; }
.bg-mg2 { background: var(--mg2) !important; }
.bg-mgs { background: var(--mgs) !important; }
.bg-mgs2 { background: var(--mgs2) !important; }
.bg-mgs4 { background: var(--mgs4) !important; }
.bg-mgr { background: var(--mgr) !important; }

/* Game Text Color Utility Classes */
.text-mgs3 { color: var(--mgs3) !important; }
.text-mgspo { color: var(--mgspo) !important; }
.text-mgspw { color: var(--mgspw) !important; }
.text-mgsgz { color: var(--mgsgz) !important; }
.text-mgsv { color: var(--mgsv) !important; }
.text-mg { color: var(--mg) !important; }
.text-mg2 { color: var(--mg2) !important; }
.text-mgs { color: var(--mgs) !important; }
.text-mgs2 { color: var(--mgs2) !important; }
.text-mgs4 { color: var(--mgs4) !important; }
.text-mgr { color: var(--mgr) !important; }

body {
  background-color: transparent !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size: 15px !important;
}

p {
  font-family: "Roboto", sans-serif;
  color: var(--text);
  text-align: justify;
}

a,
a:visited,
a:active,
a:link {
  color: var(--link-color) !important;
  text-decoration: none !important;
}

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

a.anchor {
  position: relative;
  top: -100px;
}

h1, h2, h5 {
  color: var(--header);
}

ul, ol {
  color: var(--text);
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--my-dark-rgb),var(--bs-bg-opacity))!important;
}

.navbar-brand {
  margin-left: 15px;
}


.timelnr-navbar {
  background-color: #232323 !important;
}

.dropdown-menu {
  background-color: var(--navbar-dropdown-background) !important;
}

.dropdown-color {
  background-color: var(--navbar-dropdown-background) !important;
}

.dropdown-item {
  color: var(--nav-link-color) !important;
}
.dropdown-item a:hover {
  color: var(--nav-link-color-hover) !important;
}

.btn-success {
  background-color: #72a68b !important;
  border-color: #72a68b !important;
}

#donate-btn a,
#donate-btn a:hover {
  color: #fff !important;
}

#header {
  display: block;
  text-align: center;
}

.timeline-bar {
  background: var(--timeline-bar);
  width: 2px !important;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.entry {
  text-align: center;
  background: var(--entry-background);;
  border-radius: 0px;
}
.entry p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--entry-text);
  margin-top: 5px;
  text-align: center;
  min-height: 35px;
}

.entry-img {
  width: 100%;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.entry-date {
  text-align: center;
  color: var(--entry-date);
  background: var(--entry-date-background);
  height: 40px;
}
.entry-date h1 {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  height: 18px;
  margin-top: 10px;
  color: var(--entry-date);
}

.entry-label h1 {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  height: 18px;
  margin-top: 10px;
  color: #ffffff;
}

.entry.mgspo {
  border-top: 1px dashed #c4c4c4 !important;
  border-left: 1px dashed #c4c4c4 !important;
  border-bottom: 1px dashed #c4c4c4 !important;
}
/*232323*/
.btn-primary,
.btn-primary:active,
.btn-primary:focus {
  background-color: #72a68b !important;
  border-color: #72a68b !important;
}

.btn-primary:hover {
  background-color: #5b8e74 !important;
}

.hidebuttons {
  position: fixed;
  right: 0px;
  margin-right: 0px;
  bottom: 10px;
  height: 60px;
  z-index: 9999999;
}
.hidebuttons > button {
  color: var(--quicknav-link) !important;
  margin-bottom: 4px !important;
  background: var(--quicknav-box-background) !important;
}

.quicknav {
  position: fixed;
  right: 0px;
  margin-right: 0px;
  bottom: 80px;
  height: 320px;
  z-index: 9999999;
}

.quicknav a {
  color: var(--quicknav-link) !important;
}
.quicknav a:hover {
  color: var(--quicknav-link) !important;
  text-decoration: underline !important;
}

.quicknav-box > span {
  margin-left: 5px;
  text-align: left;
}

.quicknav-box {
  font-size: 12px;
  margin-bottom: 4px;
  width: 100px;
  background: var(--quicknav-box-background) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Anchor Offset - For fixed navbar scroll compensation */
.anchor-offset {
    position: relative;
    top: -100px;
}

/* Quicknav Button Variants */
.quicknav-arrow {
    width: 60px;
    margin-left: 40px;
}

.quicknav-filter-btn {
    width: 140px;
    border: 0;
}

/* Layout Utilities */
.navbar-logo {
    max-width: 100px;
}

.text-center-override {
    text-align: center !important;
}

/* RTL Text Direction */
.rtl {
    direction: rtl !important;
}