/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;

  src: url('/fonts/noto-sans-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/noto-sans-v21-latin-regular.woff') format('woff'); /* Modern Browsers */
}

/* noto-sans-italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;

  src:

       url('/fonts/noto-sans-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/noto-sans-v21-latin-italic.woff') format('woff'); /* Modern Browsers */

}

/* noto-sans-700italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;

  src:
       url('/fonts/noto-sans-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/noto-sans-v21-latin-700italic.woff') format('woff'); /* Modern Browsers */

}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src:
       url('/fonts/noto-sans-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/noto-sans-v21-latin-700.woff') format('woff'); /* Modern Browsers */

}


:root{
  --text-color: hsl(0, 0%, 16%);
  --background: hsl(0,0%,97%);
  --body-background: hsl(0,0%,94%);
  --link-color: hsla(215, 61%, 45%, 1);


  --list-border: 1px solid hsl(0,0%,50%);
  --line-height: 1.45;
}


/*** The new CSS Reset - version 1.4.5 (last updated 13.1.2022) ***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

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

/* Reapply the pointer cursor for anchor tags */
a {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]){
    display:none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]){
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}




html {
  font-family: "Noto Sans", Arial, sans-serif;
  background: var(--background);
}

body {
  font-size: clamp(14px, -0.875rem + 8.333vw, 20px);
  color: var(--text-color);
  background: var(--body-background);
  min-width: min-content;
  max-width: 1000px;
  margin: 5rem auto;
  padding: 4rem 0;
  line-height: var(--line-height);
  box-shadow:
    1.4px 7.2px 3.8px rgba(0, 0, 0, 0.022),
    3.2px 16px 9.6px rgba(0, 0, 0, 0.031),
    5.7px 28.8px 19.5px rgba(0, 0, 0, 0.039),
    10.3px 52.4px 40.2px rgba(0, 0, 0, 0.048),
    25px 127px 110px rgba(0, 0, 0, 0.07)
  ;
}

body > * {
  margin: auto 2rem;
}


:is(h1,h2,h3,h4,h5,h6) {
  font-weight: bold;
  line-height: 1;
}

h1 {
  margin-bottom: 2.5rem;
  font-size: 4.236rem;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 2.618rem;
}

h3 {
  margin-bottom: 1.25rem;
  font-size: 1.618rem;
}

a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

p {
  margin-bottom: 2rem;
}

ul {
  list-style-type: disc;
  padding-left: 1rem;
  margin-bottom: 2rem;
}

ul p {
  margin-bottom: 0;
}

ul li {
  margin-bottom: 0.5rem;
  padding: 0.2rem;
}

ul li:not(:last-child) {
  border-bottom: var(--list-border);
}

ul ul {
  margin-top: 1rem;
}

.hl-small {
  font-size: 1.2rem;
  margin-top: 0.5rem;
  display: block;
  font-style: italic;
  line-height: var(--line-height);
}