:root {

  --1px: 0.06rem;
  --4px: 0.25rem;
  --8px: 0.5rem;
  --12px: 0.75rem;
  --16px: 1rem;
  --24px: 1.5rem;
  --32px: 2rem;
  --40px: 2.5rem;
  --100px: 6.25rem;
  --300px: 18.75rem;
  --400px: 25rem;
  --600px: 37.5rem;
  --768px: 48rem;
  --1000px: 62.5rem;

  --background-color: #f9f9f9;
  --primary-color: #4CAF50;
  --primary-color-hover: #45a049;
  --secondary-color: #007bff;
  --secondary-color-hover: #0056b3;
  --danger-color: #ff0000;
  --danger-color-hover: #cc0000;
  --text-color: #333;
  --border-color: #ddd;
  --button-border-radius: var(--4px);
  --font-size: var(--16px);
  --padding: var(--16px);
  --margin-bottom: var(--24px);
  --font-family: 'Verdana', Geneva, sans-serif;
  --modal-max-width: 500px;
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}