/* Basic Reset to remove default margins, paddings, and other inconsistencies */
*,
*::before,
*::after {
  box-sizing: border-box; /* Ensure consistent box-sizing for all elements */
  margin: 0;
  padding: 0;
}

/* Remove default bullet styles for lists */
ul,
ol {
  list-style: none;
}

/* Remove default link underline and inherit color */
a {
  text-decoration: none;
  color: inherit;
}

/* Set a consistent base font size and line-height */
html {
  font-size: 100%; /* 16px as default, adjust as needed */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* Prevent text resizing on mobile */
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Ensure consistent appearance of media elements */
img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Reset form elements for consistency */
input,
button,
textarea,
select {
  font: inherit; /* Inherit font styles from body */
  border: none;
  background: none;
  outline: none;
}

/* Remove default button styling and ensure pointer cursor */
button {
  cursor: pointer;
}

/* Set a consistent default for body */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed; /* Enhance text rendering for better performance */
  line-height: 1.5;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* Ensure consistent focus styles for accessibility */
:focus-visible {
  outline: 2px dashed #000; /* Customize to suit your design */
}

/* Remove all animations and transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}