/* Dracula Theme */
:root {
	--bg: #282a36;
	--bg2: #44475a;
	--fg: #f8f8f2;
	--comment: #6272a4;
	--cyan: #8be9fd;
	--green: #50fa7b;
	--orange: #ffb86c;
	--pink: #ff79c6;
	--purple: #bd93f9;
	--red: #ff5555;
	--yellow: #f1fa8c;
}

@font-face {
	font-family: "JetBrains";
	src: url("JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body {
	color: var(--fg);
	background-color: var(--bg);
	font-family: "JetBrains";
	font-size: 1.15rem;
	line-height: 1.5;
	margin: 70px 25% 30px 25%;
}

body > footer {
  margin-top: 4rem;
  padding: 2rem 1rem 1.5rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--bg2);
}

h1 {
	color: var(--pink);
	font-size: 3rem;
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
}

h3 {
  font-size: 2rem;
  margin-top: 3rem;
}

h4 {
  font-size: 1.44rem;
}

h1, h2, h3 {
  line-height: 1.1;
}

@media only screen and (max-width: 720px) {
  body {
    margin: 10px;
  }
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.85rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.25rem;
  }
}

a, a:visited {
	color: var(--pink);
}

a:hover {
	text-decoration: none;
}

hr {
	color: var(--bg2);
}

ul {
	list-style-type: "- ";
}