/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	/* list-style: none; */
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



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

/* Import of the Inter Font*/
/* @import url('https://fonts.googleapis.com/css2?family=Inter&family=Vollkorn&display=swap');  */
@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: "Cobbler-Medium", sans-serif;
  --body-font-family: "Vollkorn", serif;
}


html, body { 
  font-family: var(--font-family);
  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(--body-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(--body-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(--body-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{
  letter-spacing: var(--letter-spacing);
  font-family: "Cobbler-Bold";
}

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

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);
}