:root {
	--bg-color: #ffffff;
	--text-color: #1A122F;
	--font-family: 'Hanken Grotesk', sans-serif;
	--base-font-weight: 400;
	--base-font-size: 16px;
	--highlight-color: #CF49FF;
	--secondary-text-color: #5E596D;
}

html {
	font-size: var(--base-font-size);
}

body {
	max-width: 1333px;
	width: 90%;
	margin: 0 auto;
	padding: 1rem 1rem 2rem;
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-family);
	font-weight: var(--base-font-weight);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Typography */
h1 {
	font-size: 1.5rem;
	font-weight: 600;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: var(--highlight-color);
}

::selection {
	color: #FFF;
	background: var(--highlight-color);
}

/* Layout */
main {
	max-width: 850px;
	margin: 10rem auto 0;
	flex: 1;
}

main p {
	font-size: 1.25rem;
	margin-top: 3.75rem;
}

/* Button */
.button {
	display: block;
	width: 162px;
	height: 60px;
	margin: 4rem auto 0;
	line-height: 58px;
	text-align: center;
	background-image: linear-gradient(180deg, #DD81FE 0%, #AD0EFC 100%);
	box-shadow: 0 1px 2px rgba(151, 0, 227, 0.29), 0 4px 8px rgba(98, 4, 192, 0.2), inset 0 -5px 4px rgba(202, 96, 255, 0.5);
	border-radius: 16px;
	color: #fff;
	font-size: 1.25rem;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.button:hover {
	color: #fff;
	transform: scale(1.05);
	background-image: linear-gradient(180deg, #E190FE 0%, #AD0EFC 100%);
	box-shadow: 0 1px 2px rgba(166, 0, 227, 0.29), 0 6px 10px rgba(98, 4, 192, 0.3), inset 0 -10px 7px rgba(213, 96, 255, 0.5);
}

.button:active {
	background-image: linear-gradient(180deg, #BF47EB 0%, #9F21DE 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(98, 4, 192, 0.2);
	transform: translateY(1px);
}

/* Footer */
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4rem;
	color: var(--secondary-text-color);
}

footer ul {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer li {
	margin-left: 2rem;
}

footer a {
	text-decoration: none;
}

@media (max-width: 768px) {
	:root {
		--base-font-size: 14px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #202020;
		--text-color: #ffffff;
		--secondary-text-color: #B6A7DC;
	}
}