Chalarangelo/30-seconds-of-code

*,
*::before,
*::after {
  // Prevent padding and border from affecting element width.
  box-sizing: border-box;
  // Minimize friction when adding borders to elements.
  border-width: 0;
  border-style: solid;
}

* {
  // Remove default margins.
  margin: 0;
}

html,
body {
  // Allow percentage-based heights.
  height: 100%;
}

html {
  // Prevent font size inflation on mobile.
  -webkit-text-size-adjust: 100%;
  // Add smooth scrolling.
  scroll-behavior: smooth;
}

body {
  // Remove margin in all browsers.
  margin: 0;
  // Apply the website's background.
  background: var(--color-background);
  // Apply the website's text color.
  color: var(--color-text);
  // Improve text rendering.
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  // Make elements with the HTML hidden attribute stay hidden by default.
  display: none;
}

:focus-visible {
  // Customize the focus ring for keyboard users, on browsers that support it.
  outline-color: var(--color-primary);
}

::selection {
  // Apply a background and color for user selection. This not only applies the
  // colors, but also resets any special color that may be applied (e.g code
  // highlighting inside code blocks).
  background-color: var(--color-selection-background);
  color: var(--color-text);
}

::backdrop {
  // There seems to be a bug where the color is not always applied
  // unless defined inside the `::backdrop` pseudo-element itself.
  --color-dialog-backdrop: hsla(0, 0%, 0%, 0.6);
  // Apply the correct backdrop color for modal `dialog` elements.
  background: var(--color-dialog-backdrop);
}