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

:root {
	--text-clr: #1d212e;
	--body-bg: hsl(300, 2%, 90%);
	--error-bg: hsl(0, 100%, 75%);
	--accent-bg: hsl(0, 4%, 90%);
	--accent-hover-bg: hsl(0, 4%, 85%);
	--bdr-clr: #d7d6da;

	--default-bdr: 0.5em;
	--default-gap: 1.5em;
}

:focus-visible {
	outline: 0.2em solid var(--blue);
}

::selection {
	background: hsl(225, 73%, 95%);
}

body {
	width: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--default-gap);
	padding-top: 2em;
	background: var(--body-bg);
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.1rem;
}
main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5em;
	height: 80%;
	color: var(--text-clr);
	width: 100%;
	max-width: 60em;
}
img {
	max-width: 100%;
	height: auto;

	&.logo {
		width: 12em;
		aspect-ratio: 1;
		border-radius: 20em;
		border: 0.25em solid whitesmoke;
	}
}

.left {
	flex: 2;
	display: flex;
	flex-direction: column;
	gap: var(--default-gap);

	@media (max-width: 45em) {
		align-items: center;
	}
}
.right {
	flex: 3;
	background: var(--accent-bg);
	height: 100%;
	border-radius: var(--default-bdr);
	padding: var(--default-gap);
	border: 0.125em solid var(--bdr-clr);
}

.links-container {
	display: flex;
	flex-direction: column;
	gap: var(--default-gap);
	margin-top: 1em;

	& a {
		display: flex;
		align-items: center;
		font-family: "Space Grotesk", sans-serif;
		gap: var(--default-gap);
		color: var(--text-clr);
		text-decoration: none;
		font-size: 1.2rem;
		padding: calc(var(--default-gap) * 0.75);
		width: 100%;
		min-width: 20em;
		border: 0.125em solid var(--bdr-clr);
		border-radius: var(--default-bdr);

		&:hover {
			background: var(--accent-hover-bg);
		}
		&:active {
			transform: scale(0.99);
		}
		@media (max-width: 30em) {
			min-width: auto;
		}
	}
	& a > svg:last-of-type {
		margin-left: auto;
	}
}

noscript {
	position: fixed;
	inset: 0;
	background: var(--error-bg);
	z-index: 100;
	display: grid;
	place-content: center;
	font-size: 1.5rem;
	text-align: center;
	padding: var(--default-gap);
	line-height: 1.8;
}
noscript > span {
	border: 0.2em solid hsl(0, 100%, 60%);
	display: inline-block;
	padding: 0.6em;
}
noscript > a {
	color: hsl(4deg 41% 22%);
	text-decoration: underline;
}
noscript > a:hover {
	text-decoration: none;
}
body:target > noscript {
	display: none;
}

@media (any-pointer: coarse) {
	a {
		padding: 0.5em;
		display: inline-block;
	}
}