html {
	color: white;
	background-color: --background-color;
	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
}

/* TODO: a propper CSS reset*/
body {
  margin: 0;
  padding: 0;
}

header {
  top: 0;
  position: sticky;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: currentColor;
  padding: 1.5rem;

  h1 {
    color: orange;
    display: inline;
  }

  nav {
    width: 100%;
  }

}

main {
  background-image: radial-gradient(88.8% 100% at 50% 100%, #1d1814, #110d08 61.34%)
}

#title {
	display: flex;
	height: 70vi;
	justify-content: center;
	align-items: center;

	h1 {
		color: orange;
	}
}

#sidebar {
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	padding: 2rem;
	margin: 0;
	width: var(--sidebar-width);
	background-color: var(--background-color);
	border-right: solid var(--border-width) var(--border-color);
}

:root {
	--sidebar-width: 70px;

	--backgroun-color: hsl(240, 5.9%, 11%);
	--border-width: 1px;
	--border-color: hsl(240, 5.9%, 11%);
}