@import 'fonts.css';
@import 'resets.css';
@import 'general.css';

.home {
	margin: 100px;
	max-width: 1000px;
	padding: 30px 40px;
	background-color: #0003;
	backdrop-filter: blur(12px);
	border-radius: 20px;
	border: 1px solid #fff3;

	mark {
		background-color: rgba(255, 255, 0, 0.1);
		color: inherit;
	}

	h1 {
		font-size: 60px;
		font-weight: 900;
		border-bottom: 1px solid var(--primary);
		display: inline-block;
		margin-bottom: 20px;
	}

	h2 {
		margin-top: 12px;
	}
	p {
		margin-top: 4px;
	}
}

@media screen and (max-width: 900px) {
	.home {
		margin: 80px;

		h1 {
			font-size: 52px;
		}
	}
}

@media screen and (max-width: 700px) {
	.home {
		margin: 50px;

		h1 {
			font-size: 42px;
		}
	}
}

@media screen and (max-width: 600px) {
	.home {
		margin: 30px;
		padding: 20px 30px;

		h1 {
			font-size: 32px;
		}
	}
}