@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

:root {
	--theme-main-font: 'Noto Sans', sans-serif;
	--theme-main-font-size: 1rem;
	--theme-text-color: #fff;
	--theme-background-color: #2c2c2c;
	--theme-link-color: #79ddff;
	--theme-dim-shadow-color: #212121;
	--theme-shadow-color: #161616;
	--theme-gray-tansparent: #2121215f;
	--theme-alert-color: red;
}

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overflow-x: hidden;
}

body {
	background: url("/balls.jpg") var(--theme-background-color);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	color: var(--theme-text-color);
	font-family: var(--theme-main-font);
	font-size: var(--theme-main-font-size);
	margin: 0;
}

body.newyear {
	background-image: url("/newyear.jpg");
}


.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.text-left {
	text-align: left !important;
}

a {
	outline: 0;
	cursor: pointer;
	font-weight: bold;
	color: var(--theme-link-color);
	text-decoration: none;
	transition: 0.1s;
}

a:hover {
	filter: brightness(1.1);
}

#main {
	margin-top: clamp(1.5em, 3vw, 10em);
}

#main h1 {
	filter: drop-shadow(0 0 1rem var(--theme-shadow-color));
}

.graycard {
	margin: 0.5em auto;
	background: var(--theme-gray-tansparent);
	padding: 0.1rem max(2px, 2vw);
	width: min(80%, 37em);
	border-radius: 0.3em;
}

.scary-banner {
	background: var(--theme-alert-color);
	padding: 10px max(5px, 2vw);
}