:root {
	--theme: #945191;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #181818;
}

::-webkit-scrollbar-thumb {
	background: var(--theme);
}

::-webkit-scrollbar-thumb:hover {
	background: #bbb;
}

html {
	scroll-behavior: smooth;
	height: 100%;
}

* {
	margin: 0px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
}

a, a:visited {
	color: var(--theme);
	text-decoration: none;
}

a:hover {
	color: #fff;
}

.header {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: x-large;
	background-color: #333;
	color: var(--theme);
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	position: fixed;
	z-index: 2;

	a {
		padding-left: 15px;
		padding-right: 15px;
		font-weight: 600;
	}
}

.body {
	text-align: center;

	.intro {
		margin-top: 55px;
		padding-top: 40px;
		background-color: var(--theme);

		padding-left: 20px;
		padding-right: 20px;

		h1 {
			color: #b7b7b7;
			font-size: 50px;
			padding-bottom: 10px;
		}

		h2 {
			color: #d9d9d9;
			font-size: 40px;
			padding-bottom: 40px;
		}

		h3 {
			color: #ffffff;
			font-size: 30px;
			padding-bottom: 5px;
		}
	}

	.faq {
		margin-top: 55px;
		padding-top: 30px;

		h1 {
			color: var(--theme);
			font-size: 50px;
			padding-top: 10px;
			padding-bottom: 20px;
		}

		.accordion {
			background-color: #eee;
			color: #444;
			cursor: pointer;
			padding: 18px;
			border: none;
			outline: none;
			font-size: 15px;
			transition: 0.4s;
			width: 80%;
			margin: auto;
			margin-top: 20px;
		}

		.active, .accordion:hover {
			background-color: #ccc;
		}

		.accordionPanel {
			background-color: #e8e8e8;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.2s ease-out;
			width: 80%;
			margin: auto;
			font-size: 20px;

			p {
				padding-left: 20px;
				padding-right: 20px;
			}


			a:hover {
				color: var(--theme);
				text-decoration: underline;
			}
		}
	}

	.donate-button-background {
		background-color: var(--theme);
		margin-top: 50px;
		width: 100%;

		padding-top: 50px;
		padding-bottom: 50px;

		h1 {
			color: white;
			font-size: 50px;
			padding-bottom: 25px;
		}

		h3 {
			color: white;
			padding-left: 15%;
			padding-right: 15%;
			padding-bottom: 35px;
		}

		.donate-button {
			padding-top: 10px;
			padding-bottom: 10px;

			margin-top: 25px;
			margin-bottom: 25px;

			cursor: pointer;
			border: none;
			outline: none;
			font-size: 15px;
			transition: 0.4s;

			width: 40%;
			height: 75px;

			h1 {
				color: var(--theme);
				font-size: 50px;
			}
		}

		.donate-button:hover {
			width: 43%;
		}
	}

	.discord-button-background {
		background-image: url("assets/discord_bg.png");
		background-size: cover;
		background-position: center;
		background-blend-mode: darken;
		background-color: rgb(0, 0, 0, 0.5);
		position: fixed;
		min-width: 100%;
		min-height: 100%;
		z-index: -1;
		top: 0;
	}

	.discord-button-banner {
		width: 100%;

		padding-top: 50px;
		padding-bottom: 50px;

		h1 {
			color: white;
			font-size: 50px;
			padding-bottom: 25px;
		}

		h3 {
			color: white;
			padding-left: 15%;
			padding-right: 15%;
			padding-bottom: 35px;
		}

		.discord-button {
			background-color: rgba(255, 255, 255, 1);

			padding-top: 10px;
			padding-bottom: 10px;

			margin-top: 25px;
			margin-bottom: 25px;

			cursor: pointer;
			border: none;
			outline: none;
			font-size: 15px;
			transition: 0.4s;

			width: 40%;
			height: 75px;

			h1 {
				color: #090b44;
				font-size: 50px;
			}
		}

		.discord-button:hover {
			width: 43%;
		}
	}

	.information {
		.backgroundvideo {
			position: fixed;
			min-width: 100%;
			min-height: 100%;
			z-index: -1;
			left: 50%;
			top: 0;
			transform: translateX(-50%) scale(1.05);
			filter: brightness(0.3) blur(3px);
		}

		padding-top: 150px;
		padding-bottom: 150px;

		h4 {
			color: #b2b2b2;
			font-size: 20px;

			width: 75%;
			margin: auto;
		}
	}

	.links {
		background-color: var(--theme);
		display: flex;
		justify-content: space-between;
		padding-left: 15%;
		padding-right: 15%;
		padding-top: 50px;
		padding-bottom: 50px;

		a {
			.image-container {
				transition: .5s ease;
				position: relative;
				width: 275px;
				height: 275px;

				img {
					transition: .5s ease;
					object-fit: cover;
					width: 275px;
					height: 275px;
				}

				p {
					color: white;
					text-align: center;
					opacity: 0;
					position: absolute;

					font-size: 30px;
					font-weight: 600;
					text-shadow: 2px 2px 4px #000000;

					transition: .5s ease;

					top: 50%;
					left: 50%;

					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
			}

			.image-container:hover {
				transform: scale(0.95) rotate(1deg);

				img {
					filter: brightness(0.4);
				}

				p {
					opacity: 1;
				}
			}
		}
	}

	.contact {
		background-color: #fff;
		padding-top: 100px;
		padding-bottom: 50px;

		h1 {
			color: var(--theme);
			font-size: 50px;
			padding-bottom: 20px;
		}

		h3 {
			padding-left: 15%;
			padding-right: 15%;
		}

		form {
			width: 40%;
			margin: auto;
			padding-top: 25px;
			padding-bottom: 50px;

			input[type=text], input[type=email], textarea {
				width: 100%;
				padding-top: 12px;
				padding-bottom: 12px;
				border: 2px solid #ccc;
				border-radius: 4px;
				resize: vertical;
			}

			label {
				padding: 12px 12px 12px 12px;
				display: inline-block;

				font-size: 20px;
			}

			#message {
				vertical-align: top;
				height: 100px;
			}

			input[type=submit] {
				background-color: var(--theme);
				color: white;
				padding: 12px 50px;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				float: right;

				transition: 0.2s;
			}

			.contact-form-container {
				border-radius: 5px;
				background-color: #f2f2f2;
				padding: 20px;
			}
		}
	}

	.memory-grid {
		padding-top: 75px;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.memory-item {
			background-color: #eee;
			padding: 20px;
			margin-left: 20px;
			margin-right: 20px;
			margin-bottom: 20px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;

			.author {
				font-style: italic;
				color: #666;
			}

			img {
				width: 100%;
				height: auto;
			}

			video {
				width: 100%;
				height: auto;
			}
		}
	}
}

footer {
	background-color: #181818;
	color: #fff;

	.footer-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 50px;
		padding: 75px 150px;

		.footer-item {
			h3 {
				color: var(--theme);
				padding-bottom: 5px;
			}

			p {
				text-align: justify;
			}
		}
	}

	.copyright {
		background-color: #121212;
		padding-top: 20px;
		padding-bottom: 20px;
		text-align: center;
	}
}

/* Media Queries */
@media (max-width: 768px) {
	.header {
		font-size: large;

		a {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.body {
		.intro {
			margin-top: 40px;
			padding-top: 30px;

			h1 {
				font-size: 40px;
				padding-bottom: 5px;
			}

			h2 {
				font-size: 30px;
				padding-bottom: 30px;
			}

			h3 {
				font-size: 25px;
				padding-bottom: 5px;
			}
		}

		.faq {
			margin-top: 40px;
			padding-top: 20px;

			h1 {
				color: var(--theme);
				font-size: 40px;
				padding-top: 5px;
				padding-bottom: 10px;
			}

			.accordion {
				padding: 15px;
				font-size: 14px;
				margin-top: 15px;
			}

			.accordionPanel {
				font-size: 18px;

				p {
					padding-left: 15px;
					padding-right: 15px;
				}
			}
		}

		.donate-button-background {
			margin-top: 40px;

			h1 {
				font-size: 40px;
				padding-bottom: 20px;
			}

			h3 {
				padding-left: 10%;
				padding-right: 10%;
				padding-bottom: 30px;
			}

			.donate-button {
				margin-top: 20px;
				margin-bottom: 20px;

				font-size: 14px;

				width: 50%;
				height: 60px;

				h1 {
					font-size: 40px;
				}
			}

			.donate-button:hover {
				width: 53%;
			}
		}

		.discord-button-banner {
			h1 {
				font-size: 40px;
				padding-bottom: 20px;
			}

			h3 {
				padding-left: 10%;
				padding-right: 10%;
				padding-bottom: 30px;
			}

			.discord-button {
				font-size: 14px;

				width: 50%;
				height: 45px;

				h1 {
					font-size: 20px;
				}
			}

			.discord-button:hover {
				width: 53%;
			}
		}

		.information {
			padding-top: 100px;
			padding-bottom: 100px;

			h4 {
				font-size: 18px;
				width: 90%;
			}
		}

		.links {
			display: flex;
			flex-direction: column;
			align-items: center;

			padding-left: 10%;
			padding-right: 10%;
			padding-top: 40px;
			padding-bottom: 40px;

			a {
				margin-bottom: 20px;

				.image-container {
					width: 175px;
					height: 175px;
					margin-bottom: 20px;

					img {
						width: 175px;
						height: 175px;
					}

					p {
						font-size: 24px;
					}
				}

				.image-container:hover {
					transform: scale(0.9) rotate(1deg);
				}
			}
		}

		.contact {
			padding-top: 80px;
			padding-bottom: 40px;

			h1 {
				font-size: 40px;
				padding-bottom: 10px;
			}

			h3 {
				padding-left: 10%;
				padding-right: 10%;
			}

			form {
				width: 70%;

				input[type=text], input[type=email], textarea {
					padding-top: 10px;
					padding-bottom: 10px;
				}

				label {
					font-size: 18px;
				}

				#message {
					height: 80px;
				}

				input[type=submit] {
					padding: 10px 40px;
				}
			}
		}

		.memory-grid {
			display: grid;
			grid-template-columns: 1fr;
		}
	}

	footer {
		.footer-grid {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 20px;
			padding: 50px 100px;

			.footer-item {
				h3 {
					padding-bottom: 3px;
				}

				p {
					font-size: 14px;
				}
			}
		}

		.copyright {
			padding-top: 15px;
			padding-bottom: 15px;
		}
	}
}

@media (max-width: 915px) {
	.body {
		.links {
			a {
				.image-container {
					width: 175px;
					height: 175px;

					img {
						width: 175px;
						height: 175px;
					}

					p {
						font-size: 22px;
					}
				}
			}
		}
	}

	footer {
		.footer-grid {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 20px;
			padding: 50px 100px;

			.footer-item {
				h3 {
					padding-bottom: 3px;
				}

				p {
					font-size: 14px;
				}
			}
		}

		.copyright {
			padding-top: 15px;
			padding-bottom: 15px;
		}
	}
}