:root {
  --background-color: #121212;
  --big-card-background: #1e1e1e;
  --small-card-background-1: #2a2a2a;
  --small-card-background-2: #333333;
  --button-background: #007bff;
  --button-background-hover: #0056b3;
  --text-color: #ffffff;
  --border-radius: 10px;
  --padding: 20px;
  --button-padding: 10px 20px;
  --font-size: 16px;
  --button-font-size: 16px;
  --transition-time: 0.3s;
  --box-shadow-light: rgba(0, 0, 0, 0.3);
  --box-shadow-dark: rgba(0, 0, 0, 0.3);
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: white;
}

a:hover {
  color: #8b90d5;
}

.container {
  display: flex;
  justify-content: center;
  padding: var(--padding);
  box-sizing: border-box; /* Ensure padding is included in width */
}

.big-card {
  background-color: var(--big-card-background);
  border-radius: var(--border-radius);
  padding: var(--padding);
  width: 100%;
  max-width: 1200px; /* Increase max-width for larger screens */
  text-align: center;
  box-shadow: 0 4px 8px var(--box-shadow-light);
  margin: 0 auto; /* Center the big card */
}

.small-cards {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align items */
  gap: 20px;
  margin-top: 20px;
}

.small-card {
  background-color: var(--small-card-background-1);
  border-radius: var(--border-radius);
  padding: var(--padding);
  text-align: center;
  box-shadow: 0 2px 4px var(--box-shadow-dark);
  transition: transform var(--transition-time),
    box-shadow var(--transition-time);
  width: 100%;
  max-width: 600px; /* Increase max-width for larger screens */
}

.small-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--box-shadow-light);
}

.small-card-2 {
  background-color: var(--small-card-background-2);
}

.buttons {
  margin-top: 20px;
}

.cta-button {
  background-color: var(--button-background);
  color: var(--text-color);
  border: none;
  border-radius: 5px;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  cursor: pointer;
  margin: 5px;
  transition: background-color var(--transition-time);
}

.cta-button:hover {
  background-color: var(--button-background-hover);
}

@media (max-width: 768px) {
  .small-cards {
    flex-direction: column;
    align-items: center; /* Center align items */
    gap: 10px;
  }

  .small-card {
    width: 100%;
    max-width: 500px; /* Adjust max-width for tablets */
  }
}

@media (max-width: 480px) {
  .cta-button {
    padding: 8px 16px;
    font-size: 14px;
  }

  .small-card {
    max-width: 100%; /* Ensure full width on very small screens */
  }
}

.markdown-container {
  background-color: #1e1e1e;
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  max-width: 1000px;
  margin: 40px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.markdown-container h1,
.markdown-container h2,
.markdown-container h3 {
  color: #8b90d5;
}

.markdown-container pre {
  background-color: #2a2a2a;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}

.markdown-container code {
  font-family: Consolas, monospace;
  font-size: 15px;
}