:root {
  --rosewater: 	#f4dbd6;
	--flamingo: 	#f0c6c6;
	--pink: 	#f5bde6;
	--mauve: 	#c6a0f6;
	--red: 	#ed8796;
	--maroon: 	#ee99a0;
	--peach: 	#f5a97f;
	--yellow: 	#eed49f;
	--green: 	#a6da95;
	--teal: 	#8bd5ca;
	--sky: 	#91d7e3;
	--sapphire: 	#7dc4e4;
	--blue: 	#8aadf4;
	--lavender: 	#b7bdf8;
	--text: 	#cad3f5;
	--subtext1: 	#b8c0e0;
	--subtext0: 	#a5adcb;
	--overlay2: 	#939ab7;
	--overlay1: 	#8087a2;
	--overlay0: 	#6e738d;
	--surface2: 	#5b6078;
	--surface1: 	#494d64;
	--surface0: 	#363a4f;
	--base: 	#24273a;
	--mantle: 	#1e2030;
	--crust: 	#181926;
}

@font-face {
  font-family: "CaskaydiaCoveNerdFont";
  src: url("../fonts/CaskaydiaCoveNerdFont-Regular.ttf") format("truetype");
  font-display: swap;
}

/*CSS Reset*/
h1, h2, h3, h4, h5, h6, p, span,
body, div, section, menu, article, pre {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    break-inside: avoid;
}

body {
  display: flex;
  justify-content: center;

  background-color: var(--base);
  font-family: "CaskaydiaCoveNerdFont", sans-serif;
}

main {
  display: flex;
  justify-content: center;

  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
  height: 100%;

  gap: 1vmax;
}

a {
  color: inherit;
}

a:focus, a:active {
  color: var(--mauve);
}

h1 {
  background-color: var(--surface2);
  min-width: 30vw;
  color: var(--lavender);

  padding: 0.6em;

  font-size: 1.6em;

  text-align: center;
  font-style: italic;
  font-weight: 600;

  border: 0.15vmax solid var(--rosewater);
  border-radius: 0.5vmin;

  margin-top: 3vh;
  margin-bottom: 1vh;
}

h2 {
  font-size: 1.2em;
  color: var(--pink);
}

section {
  background-color: var(--surface2);
  width: 70vw;
  color: var(--text);

  font-size: 1em;
  padding: 0.6em;

  border: 0.15vmax solid var(--rosewater);
  border-radius: 0.5vmin;
}

.bottom {
  margin-bottom: 5vh;
}

li::marker {
  content: "󰫣 ";
  color: var(--yellow);
}