@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
	margin: 0;

	font: normal 16px;
	font-family: 'Inter', sans-serif;
	font-weight: 100;
	line-height: 1.6em;
}

@media (prefers-color-scheme: dark) {
	body {
		background: rgb(22, 22, 22);
		color: white;
	}

	.box-title {
		background: linear-gradient(47deg, rgb(204, 51, 178) 0%, rgb(87, 52, 240) 100%);
	}

	.box-1 {
		background: linear-gradient(47deg, rgb(32, 32, 32) 0%, rgb(25, 25, 25)100%);
	}

	.box-2 {
		background: linear-gradient(70deg, rgb(25, 25, 25)0%, rgb(32, 32, 32) 100%);
	}

	.links {
		background: linear-gradient(20deg, rgb(200, 183, 53) 0%, rgb(236, 170, 47)100%);
	}
}

@media (prefers-color-scheme: light) {
	body {
		background: #EBEBEB;
		color: white;
	}

	.box-title {
		background: linear-gradient(47deg, rgb(204, 51, 178) 0%, rgb(87, 52, 240) 100%);
	}

	.box-1 {
		background: linear-gradient(-40deg, rgb(39, 39, 39) 0%, rgb(85, 85, 85)100%);
	}

	.box-2 {
		background: linear-gradient(110deg, rgb(149, 149, 149)0%, rgb(92, 92, 92)100%);
	}

	.links {
		background: linear-gradient(20deg, rgb(200, 183, 53) 0%, rgb(236, 170, 47)100%);
	}
}

.container {
	width: 85%;
	margin: auto;
}

.box-title {
	border-radius: 15px;
	line-height: 2em;
	margin-top: 9%;
	padding: 4%;
	padding-left: 9%;
}

.box-1 {
	border-radius: 15px;
	margin-top: 9%;
	padding: 18%;
}

.box-2 {
	border-radius: 15px;
	margin-top: 9%;
	margin-bottom: 10%;
	padding: 18%;
}

.links {
	border-radius: 15px;
	margin-top: 9%;
	margin-bottom: 10%;
	padding: 18%;
}

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

h1 {
	font-weight: 700;
}

p1 {
	font-weight: 100;
}