:root {
  --font-color: #E4DEED;
  --color1: rgb(0,0,0);
  --color2: rgb(31,24,34);
  --color3: rgb(48,27,40);
}

*, :before, :after {
	box-sizing: border-box;
}

body {
	background: rgb(0,0,0);
	background: linear-gradient(90deg, var(--color1) 0%, var(--color2) 73%, var(--color3) 100%);
	color: var(--font-color);
}

.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.py-24 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.marg-auto {
	margin-left: auto;
	margin-right: auto;
}

.max-w-screen {
	max-width: 100vw;
}

.min-h-screen {
	min-height: 100vh;
}

.max-h-screen {
	max-height: 100vh;
}

.items-center {
	align-items: center;
}

.mt-2r {
	margin-top: 2rem;
}

.ml-q {
	margin-left: .25rem;
}

.top-0 {
	top: 0;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.gap-1r {
	gap: 1rem;
}

.justify-between {
	justify-content: space-between;
}

.sticky {
	position: sticky;
}

.w-half {
	width: 50%;
}

.scroll-mt-6r {
	scroll-margin-top: 6rem;
}

.ul-unstyled {
	list-style-type: none;
}

nav {
	display: flex;
	flex-direction: column;
}

main {
	height: 100vh;
}

p {

}

.dot {
  height: 2.5rem;
  width: 2.5rem;
  background-color: var(--font-color);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.glyph {
  padding: 4px;
  width: 2em;
  height: 2em;
  text-align: center;
  vertical-align:bottom !important;
  align-items:center;
}

@media (min-width: 1024px) {
	.justify-between {
		justify-content: space-between;
	}
	
	.flex {
		display: flex;
	}
	
	.gap-1r {
		gap: 1rem;
	}
	
	.sticky {
		position: sticky;
	}
}