@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=Open+Sans:wght@400;500;700&display=swap");

* { box-sizing: border-box; }

:root {
  --cs-blue: #1457B3;

  --background: #F7F7F7;
  --foreground: #FFFFFF;
  --border: #C0C0C0;
  --text: #242424;
  --text-light: #707070;
  --error: #DC143C;

  --lang-typescript: #396272;
  --lang-json: #3C3C3D;
  --lang-javascript: #EDDF7C;
  --lang-java: #A57438;
  --lang-python: #3A72A2;
  --lang-html: #E04D31;
  --lang-css: #563D79;
  --lang-ui: #4A4D59;

  --mobileDevice: 600px;
  --gridGap: 25px;
}

html {
  background-color: var(--background);
}

body {
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--text);
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 15px;
}

h4 {
  font-size: 13px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

ul, ol {
  margin: 5px 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

p a {
  color: var(--cs-blue);
}

p a:hover {
  text-decoration: underline;
}

pre {
  margin: 5px;
  padding: 0;
  background: none;
  border: none;
}

blockquote {
  border-left: 2px solid var(--border);
  padding-left: 5px;
}
