:root {
  /* Base colors */
  --bg-color: #1F242D;
  --text-color: hsl(118, 62%, 55%);
  --menu-color: rgb(255, 255, 255);
  --secondary-bg-color: #363f4f;
  --title: #4ad345;
  --hover-color: rgba(255, 255, 255, 0.1);
  --nav-bg-secondary-color: var(--secondary-bg-color);
  
  /* Additional Variables for extensive theming */
  --primary-color: #4ad345;
  --secondary-color: #2B2B2B;
  --accent-color: #7CF03D;
  --border-color: #4d4d4d;
  --link-color: hsl(118, 62%, 55%);
  --link-hover-color: var(--accent-color);
  --input-bg: #2B2B2B;
  --input-text: #FFFFFF;
  
  /* Table Styling Variables (Dark Mode) */
  --table-header-bg: #2c2c2c;
  --table-header-text: #f1f1f1;
  --table-row-bg: #2c2f35;
  --table-row-alt-bg: #36393c;
  --table-row-hover-bg: #696969;
  
  overflow-x: hidden;
  scrollbar-width: 0px;
}

[data-theme="light"] {
  /* Revamped Light Theme */
  --bg-color: #fffaec;                /* Off-white background for a clean, airy look */
  --text-color: #333333;              /* Darker, softer text */
  --secondary-bg-color: #EDEDED;       /* Light gray for secondary elements */
  --menu-color: #333333;
  --title: #4ad345;                  /* Retain the signature green */
  --hover-color: rgba(0, 0, 0, 0.1);
  
  --primary-color: #4ad345;
  --secondary-color: #F5F5F5;         /* Subtle light secondary tone */
  --accent-color: #7CF03D;
  --border-color: #DADADA;            /* Soft light gray border */
  --link-color: #333333;
  --link-hover-color: #4ad345;
  --input-bg: #F5F5F5;
  --input-text: #333333;
  
  /* Table Styling Variables (Light Mode) */
  --table-header-bg: #E0E0E0;
  --table-header-text: #333333;
  --table-row-bg: #FAF9F6;
  --table-row-alt-bg: #F0F0F0;
  --table-row-hover-bg: #E6E6E6;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Table Styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5vw;
  overflow: hidden;
  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.2);
}

table thead tr {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
}

table th, 
table td {
  padding: 1vw;
  border: 1px solid var(--border-color);
  text-align: center;
}

table tbody tr:nth-child(odd) {
  background-color: var(--table-row-bg);
}

table tbody tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

table tbody tr:hover {
  background-color: var(--table-row-hover-bg);
}


.down-arrow-container {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translateX(-50%);
}

.down-arrow {
  font-size: 4vw;
  animation: bounce 2s infinite;
  display: inline-block;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-2vw);
  }

  60% {
    transform: translateY(-1vw);
  }
}


.card-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30vw;
  min-height: 35vh;
  background-color: #2B2B2B;
  color: #FFFFFF;
  border-radius: 1vw;
  padding: 2vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 1.5vw;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 1;
  box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, opacity 0.4s ease, z-index 0.4s ease;
}


.card h3 {
  margin-top: 0;
  margin-bottom: 1vw;
  font-size: 2vw;
  font-weight: 600;
}


.card p {
  margin: 0;
  font-size: 1.3vw;
  line-height: 1.4;
}


.stack-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4vw;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
}

.stack-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.arrow-left {
  left: 2vw;
}

.arrow-right {
  right: 2vw;
}