@layer reset {
  * {
    margin: 0;
    padding: 0;

    font-style: normal;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  body,
  html {
    margin: 0;
    padding: 0;

    font-family: inherit;
    font-size: 100%;
  }

  img,
  video {
    display: block;

    max-width: 100%;
    height: auto;
  }

  button,
  input,
  textarea,
  span {
    border: none;
    outline: none;

    font: inherit;
    color: inherit;

    background: none;
  }

  /* compensates chrome margin */
  textarea {
    display: block;
  }

  /* hide input arrows in number fields */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    appearance: textfield;
  }

  /* set scrollbar to thin and define color thumb & background */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0 50 / 0.25) transparent;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: hsl(0 0 50 / 0.25);
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }
}