/* Color Palette */
:root {
  --primary-color: #3843D0;
  --primary-opacity-color: #8085cf;
  --secondary-color: #1A8268;
  --highlight-color: #FF785A;
  --base-color-1: #F7ECE1;
  --base-color-2: #F2F7F2;
  --background-grey: #121212;
  --card-grey: #1e1e1e;
  --card-border-white: rgba(255, 255, 255, 0.38);
  --disabled-grey: #808080;
  --primary-text-color: #000000;
  --bookmark-color: #ffc466;
  --quiz-correct-color: #16964E;
  --quiz-wrong-color: #E3485B;
}

/* Example usage */
body {
  background-color: var(--base-color-2);
  color: var(--primary-text-color);
}

.header {
  background-color: var(--primary-color);
}

.button {
  background-color: var(--highlight-color);
  color: var(--primary-text-color);
}

.footer {
  background-color: var(--background-grey);
  color: var(--card-border-white);
}

img {
  max-width: 100%;
  height: auto;
}

/* Card and screenshot styles */
.bg-white.rounded.shadow.p-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Screenshot container styles */
.screenshot-container {
  width: 100%;
  max-width: 250px;
  margin: 1rem auto 0;
  aspect-ratio: 9/16;
  overflow: hidden;
}

.screenshot-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}