fluidtype.css

/* Set box-sizing globally to handle padding and border widths */
*,
*:after,
*:before {
  box-sizing: border-box;
}

/* Import of the Inter Font*/
@import url("https://rsms.me/inter/inter.css");
@supports (font-variation-settings: normal) {
}

/* Base */
:root {
  --font-size: calc(12px + 0.698vw); /* The character count on */
  --line-height: calc(var(--font-size) * 1.4);
  --letter-spacing: calc(var(--font-size) * 0.0015);
  --font-weight: 300;
  --red: #eb5757;
  --blue: #0004b3;
  --light-blue: #b3d7ff; /* The color is the native browser highlight text color, to make the appeal of importance and focus on specific areas of the text.*/
  --dark-gray: #282c35;
  --light-gray: #f7f7f7;
  --font-family: "Inter", sans-serif;
}

html,
body {
  font-family: var(--font-family);
  word-break: break-word;
  font-variant-numeric: slashed-zero;
}

p,
li,
b,
i,
strong,
a,
mark {
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-feature-settings: normal;
  font-family: var(--font-family);
}

p,
li,
mark,
a,
blockquote {
  font-weight: calc(var(--font-weight) * 1.33);
}

code {
  font-size: calc(var(--font-size) * 1.1);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 1.33);
  color: var(--red);
  font-family: var(--font-family);
}

mark {
  background: var(--light-blue);
  padding: 0.05vw 0.4vw;
  border-radius: 2px;
  color: var(--dark-gray);
  font-size: calc(var(--font-size) * 1.1);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 1.33);
  word-break: break-word;
  font-family: var(--font-family);
}

blockquote {
  background-color: var(--light-gray);
  font-size: calc(var(--font-size) * 1.1);
  letter-spacing: var(--letter-spacing);
  border-left: 4px solid var(--dark-gray);
  border-radius: 2px;
  padding: 2.5vw;
  margin: 2%;
  font-style: italic;
  font-family: var(--font-family);
}

a {
  color: var(--dark-gray);
  text-decoration-skip-ink: none;
  font-family: var(--font-family);
}

a:focus {
  outline: 1px dashed var(--blue);
}

a:hover {
  color: var(--blue);
}

pre {
  background-color: var(--dark-gray);
  color: var(--light-gray);
  display: block;
  margin: 0 0 1.5625em;
  border-radius: 4px;
  overflow: auto;
  padding: 2.5vw;
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: calc(var(--font-size) * 1.1);
  letter-spacing: var(--letter-spacing);
  font-family: var(--font-family);
}

h1 {
  font-size: calc(var(--font-size) * 3);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 2.66);
  font-family: var(--font-family);
}

h2 {
  font-size: calc(var(--font-size) * 2);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 2.33);
  font-family: var(--font-family);
}

h3 {
  font-size: calc(var(--font-size) * 1.75);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 2);
  font-family: var(--font-family);
}

h4 {
  font-size: calc(var(--font-size) * 1.5);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 1.667);
  font-family: var(--font-family);
}

h5 {
  font-size: calc(var(--font-size) * 1.25);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 1.5);
  font-family: var(--font-family);
}

h6 {
  font-size: calc(var(--font-size) * 1);
  letter-spacing: var(--letter-spacing);
  font-weight: calc(var(--font-weight) * 1);
  font-family: var(--font-family);
}