:root {
	--primary-color: hsl(100.65 24.41% 24.9%);
	--accent-color: #fafafa;
	--border-color: #cce5d4;
}

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

@-webkit-keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}

	60% {
		opacity: 0.6;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}

	60% {
		opacity: 0.6;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
}

main {
	display: grid;
	place-items: center;
	padding: 1rem;
	max-width: -webkit-max-content;
	max-width: -moz-max-content;
	max-width: max-content;
	padding-inline: 2rem;
	margin: 6.25rem auto;
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.main-header::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 15rem;
		background-color: var(--primary-color);
		z-index: -1;
	}

.main-header {
	display: grid;
	justify-items: center;
	gap: 1rem;
	position: relative;
	top: -50%;

	a.homepage {
		order: -1;
	}

	&:focus-within :focus {
		outline: none;
		border: 0.5rem solid var(--primary-color);
		border-radius: 999rem;
	}
}

.main-logo {
	border: 1rem solid white;
	border-radius: 999rem;
}

.main-text {
	text-align: center;
	color: var(--primary-color);
	/* margin-top: 3.75rem; */
}

/* Loading Screen */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	flex-direction: column;
	color: white;

	img {
		width: 500px;
		margin-bottom: 1.5rem;
		opacity: 0;
		transform: translateY(2.5rem);
		-webkit-animation: fadeUp 1.8s ease-out forwards;
						animation: fadeUp 1.8s ease-out forwards;
	}

	.loader__text {
		font-size: 1.5rem;
	}
}

/* Main Content */
#links {
	display: none;
	font-size: 1rem;
}

.link {
	display: grid;
	gap: 0.75rem;
	position: relative;
	top: calc(-10% - 1rem);

	.link-icon {
		width: 4rem;
		height: 4rem;
		border-radius: 999rem;
		border: 1px solid  hsla(100.65 24.41% 24.9%/ 0.1);
		padding: 0.5rem;
		background: white;
	}

	.link__anchor {
		font-size: 1.125rem;
		font-weight: 600;
		text-decoration: none;
		color: var(--primary-color);

		&:hover {
			color: white;

			~.icon-arrow::before {
					color: white;
			}
		}

	}
	
	a::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	&:focus-within :focus {
		outline: none;
		color: white;
	}

	.link__item {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: var(--accent-color);
	border: 1px solid  hsla(100.65 24.41% 24.9%/ 0.4);
	border-radius: 0.5rem;
	position: relative;
	transition: background 0.3s;

		&:hover, &:focus-within {
			background: var(--primary-color);
		}
		&:focus-within .icon-arrow::before {
			color: white;
		}

		img {
			order: -1;
		}
		
		.icon-arrow {
			margin-left: auto;
		
			&::before {
				content: "→";
				position: relative;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				background-color: transparent;
				font-size: 2rem;
				color: var(--primary-color);
				line-height: 50%;
				z-index: 1;
			}
		}
	}
}