/* 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;
    }
}