@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");

:root {
	--primary: #8ab4f8;
	--primary-v: #1a73e8;
	--dp00: #202124;
	--dp01: #303134;
	--dp02: #404144;
	--dp03: #505154;
	--dp04: #606164;
	--he-text: rgba(255, 255, 255, 1);
	--me-text: rgba(255, 255, 255, 0.6);
	--le-text: rgba(255, 255, 255, 0.4);
	--border: rgba(255, 255, 255, 0.24);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 20px;
	background: var(--dp00);
	color: var(--he-text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	word-break: break-word;
}

header {
	display: flex;
	justify-content: space-between;
	padding: 16px 64px;
	font-size: 20px;
	background: var(--dp01);
}

.nav-elements {
	list-style: none;
}

.nav-element {
	color: var(--primary);
	transition: all 200ms ease;
}

main {
	padding: 0 64px 24px 64px;
}

h1,
.home-hi,
.hero,
.hero p,
h1,
h2 {
	line-height: 1.2;
}

p,
ol li {
	line-height: 1.6;
}

code {
	font-family: "Roboto Mono", sans-serif;
	display: inline-block;
	padding: 0 0.4em;
	border-radius: 6px;
	background: var(--dp01);
}

@media screen and (max-width: 424px) {
	header {
		padding: 16px 32px;
	}

	main {
		padding: 0 32px 24px 32px;
	}
}

a,
a:hover,
a:active {
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.nav-home,
.nav-home:hover,
.nav-home:active {
	color: var(--he-text);
	text-decoration: none;
}

::-webkit-scrollbar {
	display: none;
}