@media (prefers-color-scheme: light) {
	:root {
		--background-color: #FFFFFF;
		--title-color: #000000;
		--subtitle-color: #000000;
		--quote-color: #616060;
		--icon-color: #616060;
		--project-title: #000000;
		--project-description: #3a3a3a;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #1c1b1b;
		--title-color: #FFFFFF;
		--subtitle-color: #FFFFFF;
		--quote-color: #a3a3a3;
		--icon-color: #a3a3a3;
		--project-title: #FFFFFF;
		--project-description: #a3a3a3;
	}
}

@font-face {
    font-family: verdana;
    src: url("./fonts/verdana.ttf");
}

* {
	scroll-behavior: smooth;
	overflow: hidden;
}

body {
	background-color: var(--background-color);
}

h1 {
	font-family: verdana;
	font-size: 100px;
	font-weight: bold;
	color: var(--title-color);
}

h2 {
	font-family: verdana;
	font-size: 70px;
	font-weight: bold;
	color: var(--subtitle-color);
}

h4 {
	color: var(--project-title);
}

p.project-description {
	color: var(--project-description);
}

p.quote {
	font-family: verdana;
	font-size: 30px;
	color: var(--quote-color);
}

a:hover, a:visited, a:link, a:active {
	text-decoration: none;
}

i {
	color: var(--icon-color);
	font-size: 48px;
	transition: 0.3s;
}

.icon {
	margin-left: 8px;
	margin-right: 8px;
}

.curseforge-svg {
	width: 48px;
	height: 48px;
}

.curseforge {
	fill: var(--icon-color);
	transition: 0.3s;
}

.curseforge:hover {
	fill: #f36f21;
}

.github:hover {
	color: black;
}

.instagram:hover {
	color: #E1306C;
}

.youtube:hover {
	color: #FF0000;
}

.twitter:hover {
	color: #1da1f2;
}

.twitch:hover {
	color: #9147ff;
}

.planetmc:hover {
	color: #6ec310;
}

.stackoverflow:hover {
	color: #f4842c;
}

.cfx:hover {
	color: #00ab45;
}

.arr:hover {
	color: #141414;
}