:root {
	/* Polar Night colors */
	--darkest1: #2e3440;
	--darkest2: #3b4252;
	--darkest3: #434c5e;
	--darkest4: #4c566a;

	/* Snow Storm colors */
	--lightest1: #eceff4;
	--lightest2: #e5e9f0;
	--lightest3: #d8dee9;

	/* Nord Aurora misc colors */
	--red: #bf616a;
	--orange: #d08770;
	--yellow: #ebcb8b;
	--green: #a3be8c;
	--purple: #b48ead;

	/* Frost */
	--blue1: #b5d2d9; /* Permafrost Blue */
	--blue2: #81a1c1;
	--blue3: #5e81ac;

	--ease: cubic-bezier(0, 0.6, 0.3, 1);
}

#content {
	margin: auto;
	max-width: 60rem;
	padding: 1rem;
	min-height: calc(100vh - 7rem);
}
a { text-decoration: none; }
hr { color: var(--darkest4); }
body {
	margin: 0;
	min-height: 100vh;
	color: var(--lightest2);
	font-family: 'Sora';
	background: var(--darkest1);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.card {
	background-color: var(--darkest4);
	padding: 1rem;
	border-radius: 0.3rem;
	text-align: center;
	max-width: 50rem;
	margin: 1rem auto;
}
.card h1, .card h2 { margin: 0.1rem; font-weight: initial; }
.card h2 { font-size: 1.3rem; }
.card p { color: var(--lightest3); margin: 0; }


button, .button {
	background: transparent;
	border-radius: 5px;
	padding: 10px;
	color: white;
	cursor: pointer;
	border: 0;
	margin: 5px;
	border: 2px solid #ffffff5c;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	transition: gap .2s var(--ease);
}

button:hover { gap: 0.5rem; }
button:active { gap: 0.6rem; }

/* Mobile tap highlight */
html { -webkit-tap-highlight-color: var(--blue3); }