body {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  background-color: #fff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #000;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  width: 100%;
  z-index: 1000;
}

.sticky-header .navigation {
  width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.spacer {
  flex-grow: 1;
}

.sticky-header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.sticky-header nav ul li {
  display: inline;
  margin: 0 15px;
}

.sticky-header nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.sticky-header nav ul li a:hover {
  text-decoration: underline;
}

.content {
  margin: 0 auto;
  min-height: calc(100vh - 200px);
  max-width: 1200px;
  padding: 40px 0px;
}

footer {
  text-align: center;
  background-color: #000;
  color: #fff;
  font-size: 0.85rem;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-top: 1px solid #333;
  width: 100%;
  box-sizing: border-box;
}

footer .footer-content {
  max-width: 1200px;
  padding: 0 20px;
}

footer p {
  margin: 0;
  letter-spacing: 0.5px;
}

.landing-page h1,
.landing-page h2 {
  text-align: center;
}

.landing-page p {
  text-align: center;
}

.landing-page .hero-cta {
  margin-top: 50px;
  text-align: center;
}

body {
  background-color: #0d0d0d;
  color: #a0a0a0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  line-height: 1.6;
}

/* The "Window" Containers */
.page {
  background-color: #161616;
  border: 1px solid #333;
  margin: 0px auto;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;

  padding: 40px 60px;
}

h1,
h2,
h3 {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  color: #e0e0e0;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #ff5722;
  padding-bottom: 5px;
  margin-top: 40px;
}

h1 {
  margin-top: 0;
}

.button-red {
  display: inline-block;
  padding: 12px 25px;
  background-color: #8b0000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #550000;
}

.button-red:hover {
  background-color: #a00000;
  border-color: #ff0000;
}

code {
  color: #ff5722;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
}

.button-red {
  display: inline-block;
  padding: 15px 30px;
  background-color: #d32f2f;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.2rem;
  transition: background-color 0.2s;
}

.button-red:hover {
  background-color: #b71c1c;
  text-decoration: none;
}

.form-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#alert-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-group label {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.form-group input[type="text"],
.form-group input[type="number"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.form-row button {
  width: 100%;
  padding: 10px;
  background-color: #232ed7;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.form-row button:hover {
  background-color: #3944d6;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



button {
  padding: 12px;
  background-color: #ff5722;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #a00000;
}


.logo {
  margin-right: 15px;
}

.logo-image {
  width: 400px;
  height: auto;
  max-width: 100%;
}

.logo img {
  vertical-align: middle;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.menu-icon {
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  display: block;
}

.navigation-list {
  display: flex;
  list-style: none;
  width: 100%;
  align-items: center;
}

.navigation-list li {
  margin: 0 10px;
}

.navigation-list a {
  color: #fff;
  text-decoration: none;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  .nav-container {
    width: 0px;
  }

  .sticky-header .navigation {
    width: 100%;
    padding: 0px 20px;
    justify-content: space-between;
  }

  .navigation-list {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #000;
    position: absolute;
    top: 81px;
    left: 0;
    padding: 10px 0;
  }

  .navigation-list.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .right-links {
    margin-top: 10px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-container {
    width: auto;
  }
}

.modal {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.show {
  visibility: visible;
  opacity: 1;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.form-group input:focus {
  border-color: #3944d6;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3944d6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #232ed7;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}


#signup-form,
#login-form,
#reset-password-form,
#set-password-form {
  display: none;
}

.active-form {
  display: block !important;
}

.switch-link {
  display: block;
  margin-top: 8px;
  text-align: center;
  cursor: pointer;
  color: #232ed7;
}

.switch-link:hover {
  text-decoration: underline;
}

a {
  cursor: pointer
}


.subscribe-modal-text {
  text-align: center;
}

.subscribe-modal-link {
  display: flex;
  justify-content: center;
  text-decoration: unset;
}

.hidden {
  visibility: hidden;
}

.activeSubscription {
  color: #fff;
  height: 45px;
  display: flex;
  align-items: center;
}

.tab-container {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 20px;
}

.tab {
  padding: 10px 20px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  background-color: #f1f1f1;
  color: #333;
}

.tab.active {
  background-color: white;
  border-bottom: 1px solid white;
  font-weight: bold;
}

.tab-content {
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  padding: 10px;
}

.none {
  display: none !important;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.grid-item {
  padding: 14px;
}

.header-item {
  background-color: #dad9d9;
  font-weight: 600;
}



.grid-header,
.grid-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#price-change-table .grid-header,
#price-change-table .grid-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-body:nth-child(even) {
  background-color: #f9f9f9;
}

.grid-body:hover {
  background-color: #f1f1f1;
}


.landing-page h1 {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5em;
}

.hero-tagline {
  font-size: 1.4rem !important;
  color: #ff5722 !important;
  margin-bottom: 0.5em;
}

.hero-efficiency {
  color: #4af626 !important;
}

.sub-tagline {
  font-size: 1.2rem;
  font-style: italic;
  color: #000;
}

.about-page h1,
.about-page h2 {
  padding-bottom: 10px;
}

.about-page p,
.about-page li {
  font-size: 1.1rem;
}

.about-page ol,
.about-page ul {
  padding-left: 20px;
}

.about-page li {
  margin-bottom: 10px;
}

a {
  color: #ff5722;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.game-page h1,
.game-page h2,
.game-page h3 {
  padding-bottom: 10px;
}


.game-page h1 {
  font-size: 2.5rem;
  margin-bottom: 0px;
  border: none;
}

.game-page .hero-tagline {
  margin-top: 0px;
}

.game-page p,
.game-page li {
  font-size: 1.1rem;
  line-height: 1.6;
}

.game-page ul {
  padding-left: 20px;
}

.game-page li {
  margin-bottom: 10px;
}

.game-page h2:last-of-type {
  margin-bottom: 10px;
}

.error-page h1,
h2,
h3 {
  margin: 0px;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

/* 1. BASE REPAIR: When hovering the section, ONLY blink on the roadmap paragraph. 
   We explicitly target the direct child (> p) so it ignores the nested one. */
.section-terminal:hover>[data-cursor="true"]::after {
  content: '█';
  color: #ff5722;
  animation: blink 1s step-end infinite;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(-2px);
}

/* 2. UNIVERSAL FALLBACK: For normal sections (like area-philosophy or area-stack) where the 
   data-cursor might be nested inside a div grid or a ul list, match them cleanly. */
.section-terminal:not(.area-status):hover [data-cursor="true"]::after {
  content: '█';
  color: #ff5722;
  animation: blink 1s step-end infinite;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(-2px);
}

/* 3. THE JUMP MECHANIC: When the notice box is hovered, kill the roadmap cursor... */
.section-terminal:hover:has(.notice-box:hover)>p[data-cursor="true"]::after {
  content: none !important;
}

/* 4. ...and explicitly activate the contact line cursor inside the notice box */
.notice-box:hover [data-cursor="true"]::after {
  content: '█' !important;
  color: #ff5722;
  animation: blink 1s step-end infinite;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(-2px);
}

/* 5. Target your blog components separately if they don't use data attributes */
.blog-post:hover p:last-of-type::after {
  content: '█';
  color: #ff5722;
  animation: blink 1s step-end infinite;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(-2px);
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

h2 {
  font-size: 1rem;
  margin: 0 0 10px 0;
  color: #ff5722;
}


body {
  background-color: #0d0d0d;
  color: #a0a0a0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  margin: 0;
}

/* Update your grid container */
.terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  align-items: start;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-terminal {
  background: #111;
  border: 1px solid #333;
  padding: 25px;
  transition: border-color 0s, background-color 0s;
  align-self: start;
}


.section-terminal:hover {
  border-color: #ff5722;
  background-color: #161616;
}

.section-terminal h2 {
  font-size: 0.8rem;
  color: #ff5722;
  margin-top: 0;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.span-2 {
  grid-column: span 2;
}

.button-red {
  display: inline-block;
  padding: 12px 25px;
  background-color: #8b0000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #ff5722;
}

@media (max-width: 768px) {
  .terminal-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }
}

.hero-header {
  padding: 60px 20px;
  text-align: center;
  border-bottom: 1px solid #333;
  margin-bottom: 40px;
  background: linear-gradient(to bottom, #111, #0d0d0d);
}

.hero-header h1 {
  font-size: 2.5rem;
  color: #e5e5e5;
  margin-bottom: 10px;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 16px;
  grid-template-areas:
    "about about blogs blogs"
    "access access blogs blogs"
    "support support support support"
}

@media (max-width: 768px) {
  .landing-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;
    padding: 0px 20px 40px 20px;
    grid-template-areas:
      "about "
      "access"
      "blogs"
      "support"
  }
}

.area-about {
  grid-area: about;
}

.area-mission {
  grid-area: mission;
}

.area-mission {
  grid-area: mission;
}

.area-campaign {
  grid-area: campaign;
}

.area-devlog {
  grid-area: devlog;
}

.area-skirmish {
  grid-area: skirmish;
}

.area-blogs {
  grid-area: blogs;
}

.area-support {
  grid-area: support;
}

.area-engineering {
  grid-area: engineering;
}

.area-aesthetics {
  grid-area: aesthetics;
}

.area-access {
  grid-area: access;
}

.area-status {
  grid-area: status;
}

.cover-image {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

.game-hero-container {
  width: 100%;
  margin: 25px auto 5px auto;
}

.main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 16px;
  grid-template-areas:
    "mission mission status status"
    "mission mission campaign campaign"
    "mission mission campaign campaign"
    "devlog devlog campaign campaign"
    "devlog devlog skirmish skirmish"
    "aesthetics aesthetics engineering engineering"
    "assets assets assets assets"
    "video video video video"
}



@media (max-width: 768px) {
  .main-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;
    padding: 0px 20px 40px 20px;
    grid-template-areas:
      "status"
      "mission"
      "campaign"
      "devlog"
      "skirmish"
      "engineering"
      "aesthetics"
      "assets"
      "video"
  }

  .game-hero-container {
    width: calc(100%);
    height: auto;
    display: block;
    border: 0;
  }
}

.area-dossier {
  grid-area: dossier;
}

.area-assets {
  grid-area: assets;
}

.area-architecture {
  grid-area: architecture;
}

.area-video {
  grid-area: video;
}



.asset-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.asset-grid figure {
  margin: 0;
}

.asset-grid img,
.asset-grid video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #333;
  background: #000;
}

.asset-grid figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #888;
  text-align: center;
  font-style: italic;
}


.asset-grid figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #888;
  text-align: center;
  font-style: italic;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 16px;
  grid-template-areas:
    "mission-directive mission-directive protocol protocol"
    "philosophy philosophy community community"
    "philosophy philosophy stack stack"
    "team team team team"
}




@media (max-width: 768px) {
  .about-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;
    padding: 0px 20px 40px 20px;
    grid-template-areas:
      "mission-directive"
      "protocol"
      "philosophy"
      "community"
      "stack"
      "team"
  }
}

.area-mission-directive {
  grid-area: mission-directive;
}

.area-protocol {
  grid-area: protocol;
}

.area-philosophy {
  grid-area: philosophy;
}

.area-community {
  grid-area: community;
}

.area-stack {
  grid-area: stack;
}

.area-team {
  grid-area: team;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 16px;
  grid-template-areas:
    "contact contact contact contact"
}


@media (max-width: 768px) {
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;
    padding: 0px 20px 40px 20px;
    grid-template-areas:
      "contact contact contact contact"
  }
}

.area-contact {
  grid-area: contact;
}

.hero-project-spotlight {
  margin-top: 30px;
  padding-left: 20px;
}

.hero-sub {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.game-title {
  font-size: 2rem;
  /* Much bigger */
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
  border: none;
  margin: 0;
}

.sticky-header {
  border-bottom: 1px solid #333;
  /* Faint line for a "bezel" look */
  background: rgba(0, 0, 0, 0.9);
  padding: 10px 0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  /* Monospace fits the terminal theme */
}

.navigation-list a {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #aaa;
}

.navigation-list a:hover {
  color: #ff5722;
}

.progress-bar-container {
  background: #222;
  height: 8px;
  width: 100%;
  margin: 15px 0;
  border: 1px solid #444;
}

.progress-bar {
  background: #ff5722;
  height: 100%;
  box-shadow: 0 0 10px #ff5722;
}

.status-meta {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.75rem;
  color: #888;
  margin: 5px 0;
}

.dossier-header,
.about-header {
  width: 100%;
  padding-bottom: 30px;
}


@media (max-width: 1200px) {

  .landing-grid,
  .main-grid,
  .contact-grid,
  .about-grid,
  .roadmap-grid {
    padding: 0px 20px 40px 20px;
  }

  .dossier-header,
  .about-header,
  .contact-header {
    width: calc(100% - 40px);
    padding: 0px 20px 40px 20px;
  }

}

.dossier-header h1 {
  font-size: 2.5rem;
  letter-spacing: 4px;
  margin: 0;
  color: #fff;
}

.dossier-subtitle {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  color: #888;
  margin-top: 10px;
  text-transform: uppercase;
}

.blog-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-post {
  position: relative;
  padding: 0;
  border: 1px solid #333;
  background: #0a0a0a;
  transition: border-color 0.2s ease;
}

.blog-post:hover {
  border-color: #ff5722;
}

.blog-link {
  display: flex;
  gap: 15px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  text-decoration: none !important;
}

.blog-link:hover {
  cursor: pointer;
}

.blog-link h3 {
  color: #fff;
}

.blog-link p {
  color: #aaa;
}


.blog-post img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #444;
}

.blog-content h3 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.blog-meta {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.7rem;
  color: #ff5722;
  margin: 5px 0;
}

.blog-content p {
  font-size: 0.85rem;
  color: #aaa;
  margin: 5px 0;
}

.read-more {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.8rem;
  color: #fff;
  text-decoration: none;
}

.blog-post p:last-of-type::after {
  content: '█';
  opacity: 0;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(-2px);
}

.blog-post:hover p:last-of-type::after {
  opacity: 1;
  color: #ff5722;
  animation: blink 1s step-end infinite;
}

.game-title-link {
  display: inline-block;
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  border: 2px solid transparent;
}

.game-title-link:hover {
  color: #ff5722;
  cursor: pointer;
  text-decoration: none;
}

.roadmap-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 750px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .roadmap-grid {
    width: calc(100% - 40px);
  }
}

.navigation-list .dropdown {
  position: relative;
}

.navigation-list .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  background-color: #111111;
  border: 1px solid #333333;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}

.navigation-list .dropdown-menu li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.navigation-list .dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #cccccc;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.navigation-list .dropdown-menu a:hover {
  background-color: #222222;
  color: #ff5722;
}

@media (min-width: 769px) {
  .navigation-list .dropdown:hover .dropdown-menu {
    display: block;
  }
}

@media (max-width: 768px) {
  .navigation-list .dropdown-menu {
    position: relative;
    display: block;
    background: transparent;
    border: none;
    padding: 0px;
  }

  .navigation-list .dropdown-menu a {
    padding: 0;
  }
}

ol {
  padding: 0px;
}

.post-body h2,
.post-body h3 {
  border: none;
}

.post-body blockquote {
  border-left: 3px solid #ff4500;
  padding-left: 15px;
  color: #888;
}


.blog a {
  display: block;
  color: inherit;
  margin-bottom: 2rem;
  text-decoration: none;
}

.archive-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.blog-thumbnail {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}