@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Dark & Edgy Color Variables - keeping your original names */
    --color-beige: #1a1a1a;
    --color-deep-brown: #bd6319;
    --color-desert-rose: #ff6b9d;
    --color-piink: #ff6b9d;
    --color-slate-grey: #7c3aed;
    --color-marigold: #fbbf24;
    --color-olive: #10b981;
    --color-cream: #2a2a2a;
    --color-dark: #f5f5f5;
    --color-light: #0a0a0a;
    --font-display: 'Playfair Display', serif;
    --font-heading: 'Libre Baskerville', serif;
    --font-body: 'Source Sans Pro', sans-serif;

    /* Tailwind system colors */
    --background: 220 13% 8%;
    --foreground: 210 40% 95%;
    --card: 220 13% 10%;
    --card-foreground: 210 40% 95%;
    --popover: 220 13% 10%;
    --popover-foreground: 210 40% 95%;
    --primary: 271 81% 56%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 13% 15%;
    --secondary-foreground: 210 40% 95%;
    --muted: 220 13% 12%;
    --muted-foreground: 215.4 16.3% 60%;
    --accent: 197 71% 73%;
    --accent-foreground: 220 13% 8%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 13% 18%;
    --input: 220 13% 15%;
    --ring: 271 81% 56%;
    --radius: 0.75rem;

    --sidebar-background: 220 13% 10%;
    --sidebar-foreground: 210 40% 95%;
    --sidebar-primary: 271 81% 56%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 220 13% 15%;
    --sidebar-accent-foreground: 210 40% 95%;
    --sidebar-border: 220 13% 18%;
    --sidebar-ring: 271 81% 56%;
  }
}

@layer base {
  * {
    @apply border-border;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    @apply bg-background text-foreground;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.6;
    background-image: url('img/pflowers.png');
    background-repeat: repeat;
    color: var(--color-dark);
    overflow-x: hidden;
  }
}

::selection {
  background-color: var(--color-desert-rose);
  color: var(--color-light);
}

#legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;
  line-height: 1.6;
  font-family: var(--font-body);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  white-space: nowrap;
  margin-right: 12px;
  margin-left: 3px;
  font-family: var(--font-body);
}

.legend-color {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  flex-shrink: 0;
}

.hero-area {
  grid-area: hero;
  position: relative;
  padding: 40px;
  background-color: var(--color-beige);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(255, 107, 157, 0.2);
}

.carousel-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.carousel-track {
  display: flex;
  position: absolute;
  width: max-content;
  height: 100%;
  animation: carousel 30s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-slide {
  height: 300px;
  width: auto;
  margin-right: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.carousel-slide:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.4);
}

.timeline-header{
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  color: var(--color-marigold);
}

.carousel-slide img {
  height: 100%;
  width: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100vw));
  }
}

@media (max-width: 768px) {
  .carousel-container {
    height: 300px;
  }
  
  .carousel-slide {
    height: 300px;
  }
}

a {
  color: var(--color-olive);
  text-decoration: none;
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
}

a:hover {
  color: var(--color-desert-rose);
  border-bottom: 1px solid var(--color-desert-rose);
  text-shadow: 0 0 5px var(--color-desert-rose);
}

/* Typography */
h1, h2, h3 {
  font-weight: normal;
}

#text {
  line-height: 1.6;
  font-family: var(--font-body);
}

h1 {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--color-deep-brown);
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-deep-brown);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-slate-grey);
  margin-bottom: 0.8rem;
}

b {
  color: var(--color-slate-grey);
  font-weight: 700;
}

p {
  line-height: 1.6;
  font-size: 1rem;
  font-weight: normal;
  font-family: var(--font-body);
  margin-bottom: 1rem;
}

/* Layout Structure */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "logo logo logo logo nav nav nav nav nav nav nav nav"
    "hero hero hero hero hero hero hero hero hero hero hero hero"
    "side side side main main main main main main main main feat"
    "foot foot foot foot foot foot foot foot foot foot foot foot";
  min-height: 70vh;
  width: 90vw;
  max-width: 1600px;
  margin: 0 auto;
  gap: 30px;
  padding: 30px;
  margin-top: -10px;
  position: relative;
  box-sizing: border-box;
  background-color: var(--color-light);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Logo Section */
.logo-area {
  grid-area: logo;
  display: flex;
  align-items: center;
}

.logo {
  font-family: 'Rockia', serif;
  font-size: 2.5rem;
  color: var(--color-deep-brown);
  font-weight: 700;
  text-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

/* Navigation */
.nav-area {
  grid-area: nav;
  text-align: right;
}

.nav-container {
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.nav-item {
  position: relative;
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s;
  white-space: nowrap;
  color: var(--color-deep-brown);
}

.nav-item:hover {
  color: var(--color-desert-rose);
  text-shadow: 0 0 8px var(--color-desert-rose);
}

.nav-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--color-desert-rose);
  transition: width 0.3s;
  box-shadow: 0 0 5px var(--color-desert-rose);
}

.nav-item:hover:after {
  width: 80%;
}

.nav-item.active {
  color: var(--color-desert-rose);
  font-weight: 600;
}

.nav-item.active:after {
  width: 80%;
}

/* Hero Section */
.hero-area {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 60px 40px;
  background-image: url(img/bgrunge.jpg);
  border-radius: 8px;
  margin-bottom: 20px;
}

.hero-content {
  max-width: 700px;
}

.hero-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
  color: var(--color-deep-brown);
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: var(--color-slate-grey);
  font-family: var(--font-heading);
  font-style: italic;
}

.glitch-btn {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: var(--color-deep-brown);
  color: var(--color-light);
  border: none;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.glitch-btn:hover {
  background-color: var(--color-desert-rose);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
}

/* Sidebar Section */
.sidebar-area {
  grid-area: side;
  padding: 30px 20px;
  background-color: var(--color-beige);
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.counter {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-deep-brown);
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 1px solid var(--color-desert-rose);
  padding-bottom: 15px;
}

.counter-value {
  font-size: 2rem;
  color: var(--color-desert-rose);
  font-weight: 700;
  text-shadow: 0 0 10px var(--color-desert-rose);
}

.sidebar-menu {
  list-style: none;
  margin-bottom: 10px;
}

.sidebar-menu li {
  padding-left: 20px;
  position: relative;
}

/* Main Content Section */
.main-area {
  grid-area: main;
  position: relative;
  background-color: var(--color-light);
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.main-title {
  margin-bottom: 30px;
}

.content-block {
  margin-bottom: 40px;
}

.profile-container {
  position: relative;
  border-radius: 8px;
  margin-bottom: 20px;
}

#myDiagramDiv {
  width: 100%;
  height: 900px;
  border: none;
  background-color: var(--color-beige);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

#myDiagramDiv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--color-beige);
  z-index: 10;
  pointer-events: none;
}

#myDiagramDiv.fullscreen-mode {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding-top: 70px !important;
}

#myDiagramDiv.fullscreen-mode::after {
  content: "Press ESC to exit fullscreen";
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: rgba(255, 107, 157, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.controls {
  margin: 10px 0;
  display: flex;
  gap: 10px;
}

.article-title {
  margin-bottom: 2rem;
  line-height: 1.3;
  font-family: var(--font-display);
  color: var(--color-deep-brown);
  position: relative;
  padding-bottom: 0.8rem;
}

.dna-info {
  font-family: var(--font-body);
}

h4 {
  max-width: 100%;
  height: auto;
  padding: 15px 0;
  margin: 30px 0;
  font-family: var(--font-heading);
  color: var(--color-desert-rose);
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 1px;
  background-color: #0b5e42;
  border-radius: 10px;
}

/* Feature Section */
.feature-area {
  grid-area: feat;
  padding: 3px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  background-color: var(--color-beige);
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.feature-item {
  padding: 5px;
  transition: all 0.3s;
  background-color: var(--color-light);
  border-radius: 6px;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
}

.feature-icon {
  font-size: 1.5rem;
  color: var(--color-desert-rose);
  margin-bottom: 5px;
}

/* Footer Section */
.footer-area {
  grid-area: foot;
  padding: 20px 20px;
  text-align: center;
  position: relative;
  margin-top: 30px;
  background-color: var(--color-deep-brown);
  color: var(--color-light);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-block {
  flex: 1;
  min-width: 250px;
}

.footer-block h3 {
  color: var(--color-desert-rose);
  margin-bottom: 20px;
  font-size: 1.2rem;
  position: relative;
  display: inline-block;
}

.footer-block h3:after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-desert-rose);
  box-shadow: 0 0 5px var(--color-desert-rose);
}

.copyright {
  font-size: 0.9rem;
  color: var(--color-light-slate);
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Search Functionality */
.sidebar-search {
  margin: 20px 0 30px;
  width: 100%;
}

.search-container {
  position: relative;
  width: 100%;
}

#ancestor-search {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--color-slate-grey);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-dark);
  transition: all 0.3s;
  background-color: var(--color-cream);
}

#ancestor-search:focus {
  border-color: var(--color-desert-rose);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2);
}

.search-results {
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-slate-grey);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
  background-color: var(--color-light);
}

.search-result-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(124, 58, 237, 0.1);
  font-family: var(--font-body);
  color: var(--color-dark);
  transition: all 0.2s;
}

.search-result-item:hover {
  background-color: var(--color-beige);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-name {
  font-weight: 600;
  color: var(--color-deep-brown);
}

.search-result-dates {
  font-size: 14px;
  color: var(--color-slate-grey);
  margin-top: 4px;
}

/* Form elements */
.form-group input, input, .username, .password, select, option {
  width: 100%;
  padding: 12px 15px;
  background-color: var(--color-cream);
  border: 1px solid var(--color-slate-grey);
  border-radius: 4px;
  color: var(--color-dark);
  margin-bottom: 15px;
  transition: all 0.3s ease;
  font-size: 16px;
  font-family: var(--font-body);
}

.form-group input:focus, input:focus, .username:focus, .password:focus, select:focus {
  border-color: var(--color-desert-rose);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2);
}

button, button#id, #chromosomeToggle {
  background-color: var(--color-deep-brown);
  color: var(--color-light);
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

button:hover, button#id:hover, #chromosomeToggle:hover {
  background-color: var(--color-desert-rose);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4);
}

input[id=username], input[id=password], select[id=chromosomeToggle], button {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--color-slate-grey);
  background-color: var(--color-cream);
  border-radius: 4px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
}

button {
  background-color: var(--color-deep-brown);
  color: var(--color-light);
  border: none;
  font-weight: 600;
}

input[id=username]:focus, input[id=password]:focus, select[id=chromosomeToggle]:focus {
  border-color: var(--color-desert-rose);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2);
}

/* List Styling */
ul.the-list {
  list-style: none;
  padding: 0;
}
    
ul li.the-list, ul li {
  list-style-image: none;
  list-style: none;
  padding: 0;
}

/* Timeline Component */
.horizontal-timeline-container {
  position: relative;
  width: 100%;
  margin: 30px 0;
  padding: 20px 0;
  clear: both;
}

.horizontal-timeline-wrapper {
  padding: 20px 0;
  margin-bottom: 20px;
  width: 100%;
  overflow: visible;
}

.horizontal-timeline {
  position: relative;
  height: 100px;
  margin: 0 auto;
  padding: 30px 20px 0;
}

.timeline-line {
  position: absolute;
  top: 50px;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 2px;
  background-color: var(--color-slate-grey);
  z-index: 1;
  box-shadow: 0 0 5px var(--color-slate-grey);
}

.timeline-event {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  z-index: 2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeline-event:hover {
  transform: translateX(-50%) scale(1.1);
}

.timeline-event.active .timeline-point {
  transform: translateX(-50%) scale(1.3);
  border-color: var(--color-marigold);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.3);
}

.timeline-point {
  width: 12px;
  height: 12px;
  background-color: var(--color-light);
  border: 3px solid var(--color-slate-grey);
  border-radius: 50%;
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  transition: all 0.3s ease;
}

.timeline-event.birth .timeline-point {
  border-color: var(--color-desert-rose);
  box-shadow: 0 0 10px var(--color-desert-rose);
}

.timeline-event.death .timeline-point {
  border-color: var(--color-dark-navy);
}

.timeline-event.residence .timeline-point {
  border-color: var(--color-marigold);
  box-shadow: 0 0 10px var(--color-marigold);
}

.timeline-label {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--color-slate-grey);
  white-space: nowrap;
  font-family: var(--font-body);
}

.year-marker {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}

.year-marker span {
  display: block;
  color: var(--color-slate-grey);
  font-size: 14px;
  font-family: var(--font-body);
}

/* Details panel below timeline */
.timeline-details {
  margin: 0 auto;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: var(--color-beige);
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.timeline-details.visible {
  opacity: 1;
  height: auto;
  padding: 20px;
  margin-top: 20px;
}

.event-year {
  font-weight: 600;
  color: var(--color-deep-brown);
  margin: 5px 0;
}

.event-location {
  font-style: italic;
  color: var(--color-slate-grey);
}

#event-title {
  margin-top: 0;
  color: var(--color-desert-rose);
}

div#tree {
  max-height: 100vh;
  width: auto;
}

.centre {
  text-align: center;
  margin-top: 20px;
}

hr {
  border: none;
  height: 1px;
  background-color: rgba(124, 58, 237, 0.3);
  margin: 20px 0;
}

.centreperson {
  text-align: center;
  padding-top: 10px;
  font-weight: 600;
  color: var(--color-deep-brown);
}

/* Additional Elements */
.writing {
  display: block;
  text-align: right;
  font-family: "Ms Madi", serif;
  color: var(--color-olive);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin-bottom: 0;
  margin-top: 20px;
  text-shadow: 0 0 8px var(--color-olive);
}

.rightSide {
  display: block;
  text-align: right;
}

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

.notes li {
  margin-bottom: 20px;
  position: relative;
  padding-left: 25px;
}

.notes li:before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--color-desert-rose);
}

li.notes {
  font-weight: normal;
  font-family: var(--font-body);
}

ul.notes h2 {
  text-align: center;
  margin-bottom: 25px;
}

ul.notes li {
  font-family: var(--font-body);
  line-height: 1.6;
}

.blueBold {
  color: var(--color-olive);
  font-weight: 600;
}

.biographical-details {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.biographical-details p, .dna-info p, .colonist-info p, .faith-info p {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: var(--font-body);
  line-height: 1.6;
}

.faith-info, .military-service-info {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

.spaceR {
  padding-top: 30px;
  padding-bottom: 30px;
}

.surname-cloud {
  width: auto;
  min-height: 300px;
  border-radius: 8px;
  padding: 20px;
  margin-right: 100px;
  text-align: center;
  line-height: 1.5;
}

.surname-tag {
  display: inline-block;
  margin: 5px;
  color: var(--color-dark);
  opacity: 80%;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  padding: 4px 8px;
  border-radius: 4px;
}

.surname-tag:hover {
  font-family: 'Playfair Display', serif;
  color: var(--color-desert-rose);
  opacity: 100%;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 0 5px var(--color-desert-rose);
}

.ancestor-list {
  margin-top: 10px;
}

#lBold {
  font-weight: 600;
  color: var(--color-deep-brown);
}

.fa-person-rifle {
  color: var(--color-slate-grey);
}

/* Table Styling */
.table {
  width: 100%;
  margin-bottom: 2rem;
  color: var(--color-dark);
  border-collapse: collapse;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.table thead th {
  vertical-align: bottom;
  padding: 15px;
  background-color: var(--color-deep-brown);
  border-bottom: 2px solid var(--color-slate-grey);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--color-light);
  font-family: var(--font-heading);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(26, 26, 26, 0.5);
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--color-light);
}

.table-striped tbody tr:hover {
  background-color: rgba(255, 107, 157, 0.1);
  transition: background-color 0.2s ease;
}

.table td {
  padding: 15px;
  vertical-align: middle;
  border-top: 1px solid rgba(124, 58, 237, 0.1);
}

/* Responsive design */
@media (max-width: 1050px) {
  .grid-container {
    grid-template-areas:
      "logo logo logo nav nav nav nav nav nav nav nav nav"
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "main main main main main main main main main main main main"
      "side side side side side feat feat feat feat feat feat feat"
      "foot foot foot foot foot foot foot foot foot foot foot foot";
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
  }
  
  .hero-title {
    font-size: 3rem;
  }

  .nav-container {
    justify-content: center;
    flex-wrap: wrap;
  }

  .nav-item {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }

  .logo-area {
    width: 100%;
    justify-content: center;
    padding-bottom: 15px;
  }
  
  div#tree {
    max-height: 400px;
  }
}

@media (max-width: 900px) {
  .grid-container {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav"
      "hero"
      "main"
      "side"
      "feat"
      "foot";
    gap: 15px;
    margin: 0 auto;
    padding: 0px;
  }
  
  .nav-container {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .nav-item {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    margin: 3px;
  }
  
  .logo-area {
    justify-content: center;
    padding-bottom: 10px;
  }
  
  .logo {
    font-size: 3rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .hero-area {
    padding: 40px 20px;
  }
  
  .timeline-line {
    left: 10%;
    right: 10%;
    width: 80%;
  }
  
  .year-marker span {
    font-size: 12px;
  }

  span .years {
  color: #e56c3d;
}
  
  .timeline-label {
    font-size: 12px;
  }
  
  div#tree {
    max-height: 500px;
  }
  
  .table thead {
    display: none;
  }
  
  .table, .table tbody, .table tr, .table td {
    display: block;
    width: 100%;
  }
  
  .table tr {
    margin-bottom: 15px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    overflow: hidden;
  }
  
  .table td {
    text-align: right;
    padding-left: 30%;
    position: relative;
    border-top: none;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
  }
  
  .table td:before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    font-weight: 600;
    color: var(--color-deep-brown);
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
  }
  
  .table td:last-child {
    border-bottom: none;
    text-align: center;
    padding-left: 15px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-block {
    width: 100%;
    text-align: center;
  }
  
  .footer-block h3:after {
    left: 50%;
    transform: translateX(-50%);
  }
}

.copyright {
  font-size: 0.9rem;
  color: var(--color-light-slate);
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1420px) {
  .grid-container {
    grid-template-areas:
      "logo logo logo nav nav nav nav nav nav nav nav nav"
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "main main main main main main main main main main main main"
      "side side side side side feat feat feat feat feat feat feat"
      "foot foot foot foot foot foot foot foot foot foot foot foot";
    width: 75%;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
  }
  
  .hero-title {
    font-size: 3rem;
  }

  .nav-container {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .grid-container {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav"
      "hero"
      "main"
      "side"
      "feat"
      "foot";
    gap: 5px;
    margin: 0 auto;
    padding: 5px;
  }
  
  .nav-container {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 30px;
  }
}

.tooltip-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow-x: auto;
}

#genomeCanvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.style-switcher {
  z-index: 5;
  padding: 5px;
  background-color: var(--color-beige);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.style-option {
  text-align: center;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.style-option:hover {
  transform: scale(1.05);
  border-color: var(--color-desert-rose);
}

.style-option.active {
  border-color: var(--color-deep-brown);
}

.style-option img {
  width: 125px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 5px;
}

.style-name {
  display: none;
}

/* Noise Effect */
.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 99;
}