/* ============================================ */
/* =================1- RESET =================== */
/* ============================================ */

/**
 * Normalize the box model
 */
*,
::before,
::after {
  box-sizing: border-box;
  min-width: 0; /* Fixes overflow issues in flex/grid layouts */
}

/**
 * Remove left padding from list elements
 * that have a class attribute
 */
:where(ul, ol):where([class]) {
  padding-left: 0;
}

/**
 * Remove default margins from body and other elements
 * that have a class attribute
 */
body,
:where(blockquote, figure, fieldset):where([class]) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  padding: 0;
  border: none;
}

/**
 * Remove default bullets from unordered lists
 * that have a class attribute
 */
:where(ul[class]) {
  list-style: none;
}

:where(address[class]) {
  font-style: normal;
}

p {
  margin-block: 0;
}

p,
li {
  overflow-wrap: break-word;
}

p:where(:not([class]):not(:last-child)) {
  margin-bottom: 1.5rem;
}

/**
 * Simplify working with images and videos
 */
img,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
  max-width: 100%;
}

/**
 * Inherit font properties for form controls
 */
input,
textarea,
select,
button {
  font: inherit;
}

html {
  /**
   * Useful in most situations
   * (for example, when you need to push the footer
   * to the bottom of the page)
   */
  height: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  /**
   * Useful in most situations
   * (for example, when you need to push the footer
   * to the bottom of the page)
   */
  min-height: 100svh;
}

/**
 * Normalize the height of link elements
 * when inspecting them in DevTools
 */
a:where([class]) {
  display: inline-flex;
}

/**
 * Show a pointer cursor when hovering over an element
 */
button,
label {
  cursor: pointer;
}

/**
 * Remove the grey tap highlight on mobile devices (iOS/Android)
 */
button {
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

/**
 * Set SVG elements to a consistent color
 * except those with a fill attribute set to 'none'
 * or starting with 'url'
 */
:where([fill]:not([fill="none"], [fill^="url"])) {
  fill: currentColor;
}

/**
 * Set SVG elements to a consistent color
 * except those with a stroke attribute set to 'none'
 */
:where([stroke]:not([stroke="none"], [stroke^="url"])) {
  stroke: currentColor;
}

/**
 * Fix the color transition delay bug
 * when interacting with SVG elements
 */
.animated-svg * {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/**
 * Set table borders to the classic collapsed style
 */
:where(table) {
  border-collapse: collapse;
  border-color: currentColor;
}

:where([hidden]) {
  display: none;
}

/**
 * Disable animations and transitions for users
 * who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}