Default Styles for most new projects

default.scss

$background-color: (
  body: #fff,
  selection: #d3ffbf
);

$color: (
  body: #000014,
  selection: #000014,
);

// https://codepen.io/soluml/pen/mdBjeMW?editors=1100
$font-size-multiplier: 62.5%;

@function fs-multiplier($value) {
  @return $value / ($font-size-multiplier / 100%);
}

$font-size: (
  h6: clamp(#{fs-multiplier(0.7rem)}, 0.32vw + #{fs-multiplier(0.64rem)}, #{fs-multiplier(0.89rem)}),
  base: clamp(#{fs-multiplier(0.88rem)}, 0.52vw + #{fs-multiplier(0.77rem)}, #{fs-multiplier(1.19rem)}),
  h5: clamp(#{fs-multiplier(1.09rem)}, 0.82vw + #{fs-multiplier(0.93rem)}, #{fs-multiplier(1.58rem)}),
  h4: clamp(#{fs-multiplier(1.37rem)}, 1.24vw + #{fs-multiplier(1.12rem)}, #{fs-multiplier(2.11rem)}),
  h3: clamp(#{fs-multiplier(1.71rem)}, 1.84vw + #{fs-multiplier(1.34rem)}, #{fs-multiplier(2.81rem)}),
  h2: clamp(#{fs-multiplier(2.14rem)}, 2.69vw + #{fs-multiplier(1.6rem)}, #{fs-multiplier(3.75rem)}),
  h1: clamp(#{fs-multiplier(2.67rem)}, 3.88vw + #{fs-multiplier(1.89rem)}, #{fs-multiplier(5rem)}),
);

$font-family: (
  sans-serif: "IBM Plex Sans", "system-ui", Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
)


*, *::before, *::after {
  box-sizing: inherit;      // Use a more-intuitive box-sizing model.
  color-scheme: light dark; // Support both light and dark themes.
  margin: 0;                // Remove default margin
  padding: 0;               // Remove default padding */

  @media (prefers-color-scheme: dark) {
    filter: invert(1) hue-rotate(180deg); // Automatic dark-mode
  }

  @media (prefers-reduced-motion: reduce) {
    // Turn off motion for those who request it
    /* stylelint-disable declaration-no-important */
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    /* stylelint-enable */
  }
}

html {
  box-sizing: border-box;             // Use a more-intuitive box-sizing model.
  font-size: $font-size-multiplier;   // Set multiplier (usually 62.5% -> 10px ~= 1rem
  height: 100%;                       // Allow percentage-based heights in the application
  scroll-behavior: smooth;            // Smooth scrolling 
  text-rendering: optimizeLegibility; // Improve text-rendering legibility
  text-size-adjust: none;             // Prevent apple devices from adjusting the text size
}

body {
  background: map-get($background-color, body);
  color: map-get($color, body);
  font-family: map-get($font-family, sans-serif);
  font-size: map-get($font-size, base);
  height: 100%;                 // Allow percentage-based heights in the application
  line-height: calc(2ex + 5px); // Relative line height based on the X-height of the font
  overflow-x: hidden;           // Prevent scrolling on the x-axis
  overflow-y: auto;             // Enable it for the y-axis
  scroll-behavior: inherit;
  width: 100%;                  // Stretch the body the full width of the screen
}

::selection {
  background: map-get($background-color, selection);
  color: map-get($color, selection);
  text-shadow: none; // Improve's legibility within a selection whenever there is a text-shadow present
}

img, picture, video, canvas, svg, iframe, object {
  display: block;  // Prevent line-height gaps
  max-width: 100%; // Prevent media from overflowing container
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle; // Change the alignment on media elements in all browsers
}

img, iframe {
  border: 0; // Kill default borders
}

input, button, textarea, select {
  font: inherit;              // Remove built-in form typography styles
  font-size: max(16px, 100%); // Prevent zooming on mobile
}

textarea {
  resize: vertical; // Change the resize direction in all browsers
}

svg {
  min-width: 1em;       // set default size for svg sprite icons

  &:not([fill]) {
    fill: currentColor; // set default fill for svg sprite icons
  }
}

ol, ul {
  list-style: none; // Remove default list styles
}

table {
  border-collapse: collapse;  // Collapse border spacing in all browsers
  border-color: currentColor; // Correct table border color in Chrome, Edge, and Safari.
  text-indent: 0;             // Remove text indentation from table contents in Chrome, Edge, and Safari.
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; // Remove built-in form typography styles
}

p {
  margin: 1em 0; // Restore default margin for paragraphs
}

b, strong {
  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari.
}

// Typography
h1, h2, h3, h4, h5, h6 {
  margin: 3rem 0 1.38rem;
  font-weight: 400;
}

h1 { margin-top: 0.38em; }
h1, .h1 { font-size: $map-get($font-size, h1); }
h2, .h2 { font-size: $map-get($font-size, h2); }
h3, .h3 { font-size: $map-get($font-size, h3); }
h4, .h4 { font-size: $map-get($font-size, h4); }
h5, .h5 { font-size: $map-get($font-size, h5); }
h6, .h6 { font-size: $map-get($font-size, h6); }