:root {
  /* Define a color palette using CSS variables for easy updates */
  --color-primary: #1a1a1a;        /* Dark gray for text and elements */
  --color-background: #f8e8e8;     /* The new smooth pink background */
  --color-accent: #9e938e;         /* A subtle, muted accent color */
  --font-family-vazir: "vazir", sans-serif;
}

@font-face {
  font-family: 'vazir';
  /* Best practice: Add .woff2 format for modern browsers */
  src: url('fonts/static/Vazirmatn-Black.woff2') format('woff2'),
       url('fonts/static/Vazirmatn-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

body {
  /* Remove default browser margins and use the defined colors */
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-family-vazir);
  
  /* Flexbox for centering - change min-height to 100vh for a full-page layout */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  /* Stacking content and allowing it to wrap */
  flex-direction: column; 
}

/* Create a content container to add modern styles */
.content-box {
  background-color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  /* Add a smooth transition for a polished feel */
  transition: box-shadow 0.3s ease-in-out;
}

.content-box:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* New CSS classes for styling text based on conditions */
.red-text {
  color: #c0392b; /* A more stylish red */
}

.green-text {
  color: #27ae60; /* A more stylish green */
}