:root {
  /* Final Color Palette Mapping (Dark Gray with Emphasized Header/Footer) */
  --color-lightest: #F8F9FA; /* Off-white, for primary text on dark backgrounds */
  --color-light: #E9ECEF; /* Very light gray, for subtle highlights (less used) */
  --color-neutral-light: #CED4DA; /* Mid-light gray, for secondary text */
  --color-neutral: #ADB5BD; /* Muted gray, for subdued text or very light borders */
  --color-neutral-dark: #6C757D; /* Darker muted gray, for borders and accents */
  --color-dark-muted: #495057; /* Dark gray, for card backgrounds, input fields, and subtle interactive elements */
  --color-dark: #343A40; /* Very dark gray, now the primary background for most content areas */
  --color-darker: #212529; /* Deeper dark gray, for main page background and strongest dark elements (Header/Footer) */
  --color-darkest: #1A1D20; /* Absolute darkest (optional, for even deeper elements if needed, currently unused as --color-darker is deepest) */

  /* Semantic Aliases (Updated for Emphasized Header/Footer) */
  --color-background: var(--color-dark); /* Primary background for most content areas (Hero, Sections, etc.) */
  --color-background-base: var(--color-darker); /* The absolute base background for body/main */
  --color-background-header-footer: var(--color-darker); /* Distinctly darker for Header and Footer */
  --color-background-secondary: var(--color-dark-muted); /* Used for things like card backgrounds, input fields, etc. */
  --color-text-primary: var(--color-lightest); /* Main body text */
  --color-text-secondary: var(--color-neutral-light); /* Lighter gray for secondary text */
  --color-heading: var(--color-lightest); /* Headings */
  --color-accent: var(--color-neutral-dark); /* Accent for buttons, links, interactive elements (a darker muted gray) */
  --color-border: var(--color-dark-muted); /* Borders are now a distinct dark gray */
  --color-card-background: var(--color-dark-muted); /* Card backgrounds are distinct dark gray */
}

body {
  background-color: var(--color-background-base); /* Deeper dark gray for the absolute background */
  color: var(--color-text-primary); /* Default light text color */
}

main {
  background-color: var(--color-background); /* Main content background inherits primary background */
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
}

.devlist {
  background-color: var(--color-background); /* Unified with the main content background */
  padding: 4rem 0;
}

.container {
  background-color: transparent; /* Do not override section backgrounds */
}

.btn--sub {
  background-color: var(--color-accent); /* Buttons use the defined accent gray */
  color: var(--color-lightest); /* Light text on accent buttons */
}
/* --- START: CHANGES FOR GAME CARD ELEMENTS & AVATAR BORDER --- */

/* Ensure avatars are circular and have a gray border consistently */
.avatar {
    border-radius: 50%; /* Make it perfectly circular */
    object-fit: cover; /* Ensure image covers the circle without distortion */
    border: 2px solid var(--color-neutral-dark); /* Gray border for avatars */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Specifically target the 'Traffic Rush' title (h3) within the card on devlist */
.devlist .card .dev__meta h3 {
  color: var(--color-lightest); /* Off-white for the main title, making it stand out */
  font-size: 2rem;
  font-weight: 700;
}

/* Specifically target the description (p.dev__info) within the card on devlist */
.devlist .card .dev__info {
  margin: 1.5rem 0;
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: justify;
  color: var(--color-text-secondary); /* A lighter gray for the description for readability */
}

/* --- END: CHANGES FOR GAME CARD ELEMENTS & AVATAR BORDER --- */

.tag > i.im {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.content-box {
  width: 95%;
  max-width: 85rem;
  margin: 0 auto;
}

/*=======================
  Header Section
========================*/
.header {
  position: sticky;
  z-index: 111;
  background-color: var(--color-background-header-footer); /* **CHANGED: Darker for emphasis** */
  padding: 1.5rem 0;
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Container flex layout */
.header__logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-lightest); /* Controls both icon (if fill="currentColor") and text */
}

/* If your SVG doesn't inherit color properly */
.header__logo-icon {
  height: 40px;
  fill: currentColor; /* Ensures it respects parent color */
}

/* Style text next to logo */
.header__logo-text {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-lightest); /* Adjust as needed */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.header__nav > ul {
  display: inline-flex;
  align-items: center;
  list-style: none;
  gap: 6.5rem;
}

.header__menuItem > a {
  color: var(--color-lightest); /* Light text on dark header */
  font-weight: 300;
  font-size: 2rem;
  color: var(--color-lightest); /* Adjust as needed */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toggle-menu > span {
  display: none;
}

.header__nav input[type='checkbox'] {
  display: none;
}

.header__nav input[type='checkbox']:checked ~ .header__menu {
  opacity: 1;
  pointer-events: all;
}

.project--thumbnail {
  height: 250px;
  object-fit: cover;
}

@media screen and (max-width: 800px) {
  .header__logo {
    position: relative;
    z-index: 999;
  }
  .toggle-menu {
    position: relative;
  }

  .toggle-menu > span {
    display: block;
    position: fixed;
    top: 1.5rem;
    right: 2.75rem;
    cursor: pointer;
    padding: 1rem;
    background: var(--color-background-header-footer); /* **CHANGED: Darker for emphasis** */
    z-index: 999;
    font-size: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }

  .toggle-menu__lines,
  .toggle-menu__lines::before,
  .toggle-menu__lines::after {
    pointer-events: none;
    content: '';
    display: block;
    height: 2px;
    width: 2.5rem;
    position: fixed;
    top: 4rem;
    right: 4rem;
    z-index: 999;
    background: var(--color-lightest); /* Lines on toggle menu */
    transition: all 0.3s ease-in-out;
  }

  .toggle-menu__lines::before {
    top: 3.4rem;
    transform-origin: 0 0;
  }
  .toggle-menu__lines::after {
    top: 4.6rem;
    transform-origin: 0 0;
  }

  .header__nav input[type='checkbox']:checked + .toggle-menu > .toggle-menu__lines::before {
    margin-left: 3px;
    transform: rotate(45deg) scaleX(1.2) translateX(-2px) translateY(-4px);
    visibility: visible;
  }

  .header__nav input[type='checkbox']:checked + .toggle-menu > .toggle-menu__lines {
    visibility: hidden;
  }

  .header__nav input[type='checkbox']:checked + .toggle-menu > .toggle-menu__lines::after {
    transform: rotate(-45deg) scaleX(1.2) translateX(-2px) translateY(3px);
    visibility: visible;
  }

  .header__nav > ul {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--color-background-header-footer); /* **CHANGED: Darker for emphasis** */
    transition: all 0.5s ease-in-out;
  }

  .header__menuItem a {
    transition: all 0.5s ease-in-out;
    padding: 1rem 3rem;
  }

  .header__menuItem a:hover {
    padding: 1rem 3rem;
    border-radius: 3px;
    background: var(--color-dark-muted); /* Hover for menu items, a darker muted gray */
  }
}

/*=======================
  Hero Section
========================*/

.hero-section {
  height: 40vh;
  display: flex;
  align-items: center;
  /* --- CHANGED: Unified with main content background color --- */
  background-color: var(--color-background-header-footer);
}

.hero-section__box {
  margin-bottom: 4rem;
}

.hero-section__box > h2,
.hero-section__box > h2 > span {
  font-size: 4rem;
  color: var(--color-lightest); /* Light text on dark hero */
  line-height: 1.3;
  text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 800px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 3rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 500px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 2.4rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 400px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 2rem;
  }
}

.hero-section__box > h2 {
  font-weight: 300;
}

.hero-section__box > h2 > span {
  font-weight: 700;
}

.hero-section__search > .form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero-section__search > .form label {
  position: absolute;
  left: -9999px;
}

.hero-section__search > .form input.input--text {
  width: 50rem;
  /* --- CHANGED: Input field background, consistent with other secondary elements --- */
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary); /* Input text color */
  border: 1px solid var(--color-border); /* Input border */
}

@media screen and (max-width: 700px) {
  .hero-section__search > .form {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .hero-section__search > .form input.input--text,
  .hero-section__search > .form input {
    min-width: 100%;
    width: 100%;
  }
}

/*=======================
  Developers (Used for Games, Blogs, Projects lists)
========================*/

.devlist {
  margin-top: 8rem;
}

.devlist .grid {
  align-items: stretch;
}

.devlist .dev .dev__profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.devlist .dev .dev__meta h3 {
  color: var(--color-heading); /* Heading in dev list - reverted to heading color (lightest) for prominence */
  font-size: 2rem;
  font-weight: 700;
}

.devlist .dev .dev__meta h5 {
  color: var(--color-text-secondary); /* Secondary text in dev list */
  font-size: 1.4rem;
  font-weight: 500;
}

.devlist .dev .dev__info {
  margin: 1.5rem 0;
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: justify;
  color: var(--color-text-primary); /* Ensure info text is light, primary text color */
}

/*=======================
  Pagination
========================*/
.pagination {
  margin-top: 8rem;
  margin-bottom: 10rem;
}

.pagination > ul {
  flex-wrap: wrap;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pagination .btn {
  color: var(--color-text-primary); /* Default button text */
  background-color: var(--color-background-secondary); /* Dark gray button background */
  border: 1px solid var(--color-border);
}

.pagination .btn.btn--sub {
  background-color: var(--color-accent); /* Sub buttons use the accent gray */
  color: var(--color-lightest); /* Text on sub buttons */
}

/*=======================
  Profile (Individual Developer/Item Page - assuming similar styling needs)
========================*/

.profile .card > .dev {
  padding: 4rem;
}

.dev__avatar {
  display: block;
  margin: auto;
}

.dev__name {
  color: var(--color-heading);
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.dev__title {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-secondary); /* Ensure title is visible */
}

.dev__location {
  margin-top: 1rem;
  color: var(--color-text-secondary); /* Location text color */
}

.dev__social {
  margin: 3rem 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.devInfo {
  margin-bottom: 3rem;
}

.devInfo__title,
.devInfo__subtitle {
  font-size: 2.6rem;
  color: var(--color-heading);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.devInfo__subtitle {
  font-size: 2rem;
  color: var(--color-text-primary); /* Adjusted for better visibility */
}

.devInfo__about,
.devSkill__info {
  font-size: 1.45rem;
  line-height: 1.7;
  text-align: justify;
  color: var(--color-text-primary);
}

.devSkill {
  margin-bottom: 3rem;
}

.devSkill__title {
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--color-text-primary); /* Adjusted for better visibility */
}

@media screen and (min-width: 700px) {
  .devSkill {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .devSkill__info {
    flex-basis: 80%;
  }
}

/*=======================
  Single Projects/Games/Blogs
========================*/

.card {
  background-color: var( --color-background-header-footer); /* Card background is now a clear dark gray */
  border: 2px solid var(--color-border); /* Card border */
  color: var(--color-text-primary); /* Default light text within cards */
  /* --- ADDED: Padding to all directions for content inside the card --- */
  padding: 3rem; /* A generous padding value for good visual separation */
}

/* ... (other CSS rules) ... */


/*=======================
  Single Projects/Games/Blogs (The main area containing the card)
========================*/

.singleProject {
    /* --- ADDED: Padding to push the entire section away from Navbar/Footer --- */
    padding-top: 5rem;    /* Space from the top (below the Navbar) */
    padding-bottom: 5rem; /* Space from the bottom (above the Footer) */
    /* Remove or adjust existing margin if 'my-md' is defined elsewhere and conflicts */
}


.singleProject .column--1of3 {
  order: 2;
}

@media screen and (min-width: 1081px) {
  .singleProject .column--1of3 {
    order: 1;
  }
  .singleProject .column--2of3 {
    order: 2;
  }
}

.singleProject__toolStack {
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.singleProject__liveLink {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  border-bottom: 2px solid transparent;
  color: var(--color-accent); /* Link color, now an accent gray */
}

.singleProject__liveLink:hover {
  font-weight: 500;
  border-bottom: 2px solid var(--color-accent); /* Hover border color, now an accent gray */
}

.singleProject__liveLink i {
  display: inline-block;
  font-size: 1.6rem;
  margin-right: 1rem;
}

.singleProject__preview {
  height: 50vh;
  object-fit: cover;
  object-position: top center;
  margin-bottom: 3rem;
  border-radius: 0.7rem;
}

.singleProject__developer {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.singleProject__title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 3rem;
}

.project__author {
  font-size: 1.4rem;
  font-style: italic;
  color: var(--color-text-secondary);
}

.project--rating {
  margin-bottom: 1.6em;
  margin-top: 0.5em;
}

.singleProject__subtitle {
  text-transform: uppercase;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

/*=======================
  Projects Page (and Games/Blogs pages)
========================*/
.projects > .hero-section {
  background: var(--color-background); /* Unified with the main content background */
  height: 30vh;
}

.projects .hero-section__box {
  margin-bottom: 2.5rem;
}

.projects .hero-section__box > h2 {
  color: var(--color-lightest);
}

.projects .hero-section__box > h2 > span {
  font-weight: 700;
  color: var(--color-lightest);
}

.projectsList {
  margin-top: 8rem;
}

/*========== Projects/Games/Blogs Cards ==========*/

.project__thumbnail {
  height: 25rem;
  object-fit: cover;
  object-position: top center;
}

.project__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-heading);
}

.project__info {
  margin: 1rem 0;
  font-size: 1.4rem;
  text-align: justify;
  color: var(--color-text-primary);
}

/*========== Comments ==========*/

.comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid var(--color-border);
}

.comments .form label {
  position: absolute;
  margin: -9999px;
}

.commentList {
  margin: 3rem 0;
}

.comment {
  display: flex;
  gap: 2rem;
}

.comment:not(:last-child) {
  margin-bottom: 3rem;
}

.comment__author {
  font-size: 1.8rem;
  color: var(--color-heading);
}

.comment__info {
  font-size: 1.45rem;
  color: var(--color-text-primary);
}

/*=======================
  Account Settings
========================*/

.settingsPage .dev > .settings__btn {
  display: inline-block;
  margin-bottom: 3rem;
}

.settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings__title {
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-heading);
}

.settings__table {
  margin-top: 3rem;
  margin-bottom: 5rem;
  padding: 0 3rem;
  background: var(--color-card-background); /* Dark background for table */
}

.settings__table tr {
  width: 100%;
}

.settings__table tr > td {
  padding: 2rem 0;
}

.settings__table tr:not(:last-child) td {
  border-bottom: 2px solid var(--color-dark-muted); /* Darker border for table rows */
}

.settings__thumbnail {
  width: 23%;
  min-width: 10rem;
}

.settings__thumbnail img {
  padding-right: 3rem;
  height: 15rem;
  object-fit: contain;
}

.settings__tableInfo {
  width: 100%;
}

.settings__tableInfo h4,
.settings__tableInfo a {
  padding-right: 1rem;
  width: auto;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-heading);
}

.settings__tableInfo p {
  font-size: 1.4rem;
  color: var(--color-text-primary);
}

.settings__tableActions {
  text-align: right;
}

/*=======================
  Login/SignUp
========================*/

.auth {
  width: 100%;
  position: relative;
  background: transparent; /* Assuming the background comes from the ::after pseudo-element */
  height: 99vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth::after {
  z-index: -1;
  opacity: 0.1;
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../images/pattern.jpg); /* Keep your pattern image */
}

.auth > .card {
  padding: 3rem 4rem;
  width: 95%;
  max-width: 65rem;
  background-color: var(--color-card-background); /* Card background for auth forms */
}

@media screen and (min-width: 650px) {
  .auth > .card {
    padding: 5rem 8rem;
    width: 95%;
    max-width: 65rem;
  }
}

.auth__header h3 {
  color: var(--color-heading);
  font-weight: 700;
  margin-top: 1rem;
}

.auth__header p {
  font-weight: 400;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: var(--color-text-primary);
}

.auth__form {
  margin: 3rem 0;
}

.auth .auth__form label,
.auth .auth__alternative p {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-text-secondary); /* Lighter text for labels */
}

.auth .auth__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.5rem 0;
}
.auth .auth__actions a {
  text-decoration: underline;
  color: var(--color-accent); /* Link color, now an accent gray */
}

.auth .auth__alternative a {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-accent); /* Link color, now an accent gray */
}

/*=======================
  Inbox
========================*/

.inbox {
  height: 90vh;
}

.inbox__title,
.inbox__title span {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-heading);
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 3rem;
}

.inbox__title span {
  color: var(--color-accent); /* Accent for span in inbox title, now an accent gray */
}

.messages {
  list-style: none;
  background: var(--color-card-background);
  padding: 0.5rem 3rem;
  border: 2px solid var(--color-border);
  border-radius: 0.7rem;
}

.message {
  padding: 2.5rem 0;
  color: var(--color-text-primary);
}

.message > a span {
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.message.message--unread a span {
  font-weight: 700;
  color: var(--color-heading);
}

.message:not(:last-child) {
  border-bottom: 2px solid var(--color-dark-muted); /* Darker border */
}

.message > a {
  display: flex;
  gap: 1rem;
}

.message__author,
.message__date {
  flex-basis: 25%;
}

.message__subject {
  flex-basis: 50%;
}

.message__date {
  text-align: right;
}

/*=======================
  Single Message
========================*/

.messagePage .message {
  list-style: none;
  background: var(--color-card-background);
  padding: 3.5rem 5rem;
  border: 2px solid var(--color-border);
  border-radius: 0.7rem;
}

.messagePage .message__subject {
  font-size: 2.8rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.messagePage .message__author {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.messagePage .message__date {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
  margin-bottom: 3rem;
  color: var(--color-text-secondary);
}

.backButton {
  background: var(--color-background-secondary); /* Background for back button */
  color: var(--color-text-primary); /* Text color for back button */
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.backButton i {
  font-size: 1.8rem;
}


/*=======================
  Form Page
========================*/

.formPage .formWrapper {
  list-style: none;
  background: var(--color-card-background);
  padding: 3.5rem 5rem;
  border: 2px solid var(--color-border);
  border-radius: 0.7rem;
}

.formPage .formWrapper__subject {
  font-size: 2.8rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.singleProject__info img {
  max-width: 60%; /* This rule specifically for .singleProject__info, keep if intended */
  height: auto;
  display: block;
  margin: 1em auto;
}

.singleProject__description {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 1em auto;
  color: var(--color-text-primary);
}

.singleProject__content {
  padding: 2em;
  border-radius: 6px;
  margin-top: 2em;
  color: var(--color-lightest) !important;
}

/* --- START: NEW/MODIFIED RULES FOR IMAGES WITHIN CKEDITOR CONTENT --- */

.singleProject__content img {
  max-width: 100% !important; /* Ensure image never exceeds its container width */
  height: auto !important;    /* Maintain aspect ratio */
  display: block !important; /* Make images block-level to properly apply margin:auto */
  margin: 1.5em auto !important; /* Center images and add vertical spacing */
  /* Optional: Add some padding or border if you like for visual separation */
  /* padding: 5px; */
  /* border: 1px solid var(--color-border); */
  /* border-radius: 4px; */
}

/* --- END: NEW/MODIFIED RULES FOR IMAGES WITHIN CKEDITOR CONTENT --- */


/* Target common CKEditor elements directly within content */
.singleProject__content p,
.singleProject__content h1,
.singleProject__content h2,
.singleProject__content h3,
.singleProject__content h4,
.singleProject__content h5,
.singleProject__content h6,
.singleProject__content ul,
.singleProject__content ol,
.singleProject__content li,
.singleProject__content strong,
.singleProject__content em,
.singleProject__content span,
.singleProject__content div,
.singleProject__content blockquote {
    color: var(--color-lightest) !important;
    /* background-color: transparent !important; */
}

/* Specific styling for links to maintain their distinct color from the accent palette */
.singleProject__content a {
    color: var(--color-accent) !important;
    text-decoration: underline; /* Add underline for better link visibility */
}

/* If CKEditor introduces preformatted text or code blocks, style them too */
.singleProject__content pre,
.singleProject__content code {
    color: var(--color-neutral-light) !important; /* A slightly different gray for code */
    background-color: var(--color-dark-muted) !important; /* Dark background for code blocks */
    padding: 0.5em 1em;
    border-radius: 4px;
    font-family: 'monospace', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Thumbnail styling */
.thumbnail-card {
  max-width: 600px;
  display: block;
  margin: 2em auto;
  padding: 1em;
  background: var(--color-card-background); /* Use variable for consistency */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Increased shadow for contrast on dark */
  max-width: 100% !important; 
  height: auto !important;
}

.footer {
  background-color: var(--color-background-header-footer); /* **CHANGED: Darker for emphasis** */
  color: var(--color-lightest); /* Light text on dark footer */
  padding: 3rem 0;
}

.footer__text {
  margin: 1em 0;
  font-size: 1.5rem;
}

.footer__text a {
  color: var(--color-lightest);
  text-decoration: none;
}

.footer__text a:hover {
  text-decoration: underline;
}