/** CSS begins **/

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

body {
	margin: 0;
	background-image:
		linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
		url(backgrounds/262.jpg);
	background-color: black;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	color: white;
	font-family: 'Raleway', sans-serif;
}

h1 {
	font-size: 3em;
	font-family: 'Righteous', sans-serif;
	font-style: normal;
	font-weight: normal;
	margin-block-start: 0;
	margin-block-end: .25em;
}

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

svg {
	fill: #ffffff80;
	width: 36px;
	height: 36px;
	margin: 4px;
	transition: fill 0.25s ease-out;
}

svg:hover {
	fill: white;
}

svg:active {
	fill: #ffffffa0;
}

#container, #header, #social, #links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#container {
	text-align: center;
	min-height: 100vh;
}

#header {
	margin-bottom: 32px;
}

#logo {
	border-radius: 92px;
	height: 184px;
	width: 184px;
	background-image: url(logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: #00000080 0px 8px 8px 0px;
}

#social {
	flex-direction: row;
}

#links {
	background-color: #000000a0;
	padding: 16px 32px;
	border-radius: 16px;
	backdrop-filter: brightness(200%) contrast(125%) saturate(150%) blur(32px);
}

#links > a {
	background-color: #ffffff50;
	font-size: 1.5em;
	color: white;
	padding: 8px 16px;
	margin: 4px 0px;
	border-radius: 16px;
	width: 100%;
	transition: background-color 0.25s ease-out;
}

#links > a:hover {
	background-color: #ffffff80;
}

#links > a:active {
	background-color: #ffffff60;
}