/* 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, label, div, button{
  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, label{
    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);
  line-height: calc(var(--line-height) * 3);
}

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);
  /* line-height: calc(var(--line-height) * 2); */
}

h3 {
  font-size: calc(var(--font-size) * 1.750);
  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);
}