:root {
	--color-primary: #8041ff;
	--color-primary-dark: #6634cc;
	--color-primary-darker: #572cae;
	--color-secondary: #34ccc4;
	--color-text: rgb(255 255 255 / 0.8);
}

::selection {
	background-color: var(--color-secondary);
	color: var(--color-text);
}

body {
	margin: 0;
	padding: 0 0 30px 30px;
	background-color: var(--color-primary-dark);
	position: fixed;
	inset: 0;
	font-family: Inter, sans-serif;
}

.container {
	height: 100%;
}

.content {
	padding-left: 30px;
	height: 100%;
	background-color: var(--color-primary);
	border-bottom-left-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	position: relative;
	overflow: hidden;
	gap: 40px;
}

.content::before {
	content: '';
	background-color: var(--color-primary-darker);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 60px;
	right: 0;
	z-index: -1;
}

.logo {
	width: 140px;
	height: 140px;
	fill: var(--color-primary-dark);
	border-radius: 8px;
}

h1 {
	margin: 0;
	color: var(--color-text);
	font-size: 40px;
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
}

p {
	margin: 10px 0 0;
	color: var(--color-primary-dark);
	font-size: 26px;
	font-weight: 600;
}

a {
	padding: 0 30px;
	height: 80px;
	background-color: var(--color-primary-dark);
	border-top-left-radius: 8px;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 22px;
	font-weight: 600;
	text-decoration: none;
}

.icon {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

@media (min-width: 768px) {
	body {
		padding: 10cqmin;
	}

	.container {
		container-type: size;
		container-name: resize-box;
		display: grid;
	}

	.content {
		container-type: size;
		padding: 0;
		margin: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 0.5cqmin;
		flex-direction: row;
		justify-content: start;
		gap: 0;
		align-items: center;
	}

	.content::before {
		left: 0;
		right: calc(50% + 26cqw);
	}

	@container resize-box (aspect-ratio > 16 / 9) {
		.content {
			width: auto;
			height: 100%;
		}
	}

	.logo {
		margin: 0 6cqw;
		width: 18cqw;
		height: 18cqw;
		border-radius: 0.5cqw;
	}

	h1 {
		font-size: 6cqw;
	}

	p {
		margin-top: 1cqw;
		font-size: 3cqw;
	}

	a {
		padding: 0;
		width: 24cqw;
		height: 6cqw;
		border-top-left-radius: 0;
		border-top-right-radius: 0.5cqw;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 2cqw;
		gap: 1cqw;
		transition: background-color 200ms;
	}

	a:hover {
		background-color: #6d37d9;
	}

	span {
		position: relative;
	}

	span::after {
		content: '';
		height: 0.12em;
		width: 100%;
		background-color: var(--color-secondary);
		position: absolute;
		bottom: 0;
		left: 0;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 200ms;
	}

	a:hover span::after {
		transform: scaleX(1);
	}

	.icon {
		width: 2.5cqw;
		height: 2.5cqw;
		transition: fill 200ms;
	}

	a:hover .icon {
		fill: var(--color-secondary);
	}
}