* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", Arial, sans-serif;
  text-align: left;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
}

:root {
  --dark-background-color: #e0e0e0;
  --background-color: #f0f0f0;
  --contrasting-color: #690a7a;
  --cta-button-color: #269329;
  --cute-heading-color: #9134d2;
  --back-button-color: #6c757d;
  --fancy-title-font: "Rampart One", monospace;

  --dark-pink: #bb5277;
  --light-pink: #ddc7dd;
  --deep-space: #221534;
  --narrow-border: 3px;
  --medium-blue: #538FC1;  
}


h1 {
  font-size: 2rem;
}

.page-with-title-container .title-container {
  background-color: var(--contrasting-color);
  color: white;
  margin-left: -100rem;
  padding-left: 102rem;
  margin-right: -100rem;
  margin-top: -5px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.homepage-title {
  font-family: var(--fancy-title-font);
  font-size: clamp(1.5rem, 6vw, 4rem);
  font-weight: 500;
}

.page-with-title-container {
  max-width: 1200px;
  margin: 0 auto;
  background-image: url(https://cards.scryfall.io/png/front/3/3/33ea0047-bb86-4908-bb73-902d8db3b6de.png);
  background-size: cover;
  border: 5px black solid;
  box-shadow: 5px 5px black;
  margin-bottom: 5px;
  border-radius: 80px;
  padding-bottom: 20px;
  padding-left: 0rem;
}

.page-with-title-container>* {
  margin-left: 2rem;
  margin-right: 2rem;
}

.expository-text-container {
  background-color: var(--contrasting-color);
  border-radius: 2px;
  color: white;
  margin: 0;
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  padding-right: 2rem;
}

.expository-text {
  max-width: 600px;
}

.expository-text a {
  color: white;
  text-decoration: underline;
}

.expository-text p {
  text-align: justify;
}

.expository-text h3 {
  font-family: var(--fancy-title-font);
  font-size: clamp(1rem, 4vw, 3rem);
  font-weight: 400;
  padding-bottom: 1rem;
}

.expository-text p:last-child {
  margin-bottom: 0;
}

#deck-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
  margin-top: 40px;
}


h5 {
  font-weight: bold;
  color: var(--cute-heading-color);
  margin-bottom: 0;
  margin-top: 20px;
  padding-bottom: 0;
}

p {
  margin-bottom: 10px;
  margin-top: 10px;
}

.how-to-mural {
  max-width: 600px;
  height: auto;
}

/* Common card image styling - all MTG card images should use this class */
.mtg-card-image {
  width: 200px;
  height: 278px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-out;
}

/* Inline style replacements */
.error-message {
  text-align: center;
  color: #f44336;
  margin-bottom: 20px;
}

.error-details {
  color: #666;
  font-size: 0.9rem;
}

.error-actions {
  text-align: center;
}

.inline-form {
  display: inline;
}

.debug-section {
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 10px;
  justify-content: center;
}

.debug-section p {
  margin: 0;
}

.debug-button {
  border: none;
  display: inline;
}

.debug-button:hover {
  text-decoration: underline;
}

.hidden {
  display: none;
}