@font-face{
  src: url('../assets/JetBrainsMono-Regular.ttf');
  font-family: "JetBrains Mono";
}
:root{
  --background: #2e3440;
  --foreground: #ffffff;
  --color_red: #bf616a;
  --color_orange: #d08770;
  --color_yellow: #ebcb8b;
  --color_green: #a3be8c;
  --color_clear_blue: #88c0d0;
  --color_dark_blue: #81a1c1;
  --color_purple: #b48ead;
}
*{
  font-family: 'JetBrains Mono', monospace;
	color: var(--foreground);
}
body{
 	background-color: var(--background);
	margin-left: 20%;
  	margin-right: 20%;
	padding: 20px;
}
li{
  line-height: 1.7;
}
code{
  overflow-x: scroll;
}
.date{
  color: var(--color3);
  font-size: small;
}
p{
  text-indent: 50px;
}
h1{
  color: var(--color_yellow);
	font-size: larger;
}
h2{
  color: var(--color_red);
	font-size: large;
}
.quote{
  color: var(--color_orange);
}
a{
  color: var(--color_dark_blue);
	background: linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, var(--color5), var(--color3));
	background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	text-decoration: none;
}
a:hover, a:focus{
  color: var(--color_green);
	background-size: 0 2px, 100% 2px;
}
.post{
	color: var(--color_green);
}