/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Load Fonts */
@font-face { font-family: "spn"; src: url("../assets/fonts/Supernatural_Knight.ttf"); }
@font-face { font-family: "tag"; src: url("../assets/fonts/Tagesschrift-Regular.ttf"); }
@font-face { font-family: "bf"; src: url("/assets/fonts/Buche-FREE.otf"); }

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 80px;
    width: 75%;
    margin: 0 auto;
    padding-top: 66px;
}

.grid-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-pic {
	position: absolute;
	left: 5px;
	top: 18px;
    height: 120px;
    width: auto;
    padding: 0px 16px;
	margin-top: -8px;
}

/* Page Styling */
body {
	margin-top: 12px;
    height: 100%;
    min-height: 100%;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("../assets/bgs/cool-bg.png");
}

.title {
    position: relative;
    display: flex;
    justify-content: center;
    font-family: "spn";
    font-size: 68px;
	font-weight: bolder;
    color: rgb(242, 242, 242);
    text-shadow: 0px 0px 80px rgb(209, 209, 209);
    filter: drop-shadow(0 0 25px rgb(16, 124, 110));
    margin-top: 50px;
}

.subtitle {
	padding-top: 16px;
	position: relative;
	display: flex;
	justify-content: center;
	font-family: "bf";
	font-size: 42px;
	color: rgb(227, 227, 227);
	text-shadow: 0px 0px 10px rgb(102, 201, 201);
}

/* Mixed Ipsums */
.mixed-pic-wrapper {
    display: inline-block;
    padding: 10px;
    filter: drop-shadow(0 0 25px oklch(57.792% 0.15967 47.058));
}

.mixed-pic {
    height: 320px;
    width: auto;
    border: 2px solid oklch(59.771% 0.15045 53.631 / 0.622);
}

.mixedBtn {
    cursor: pointer;
    text-decoration: none;
    font-family: "tag";
    font-size: 28px;
    color: oklch(69.039% 0.16431 58.51);
    background-color: oklch(28.908% 0.00003 271.152);
    padding: 15px;
    margin-top: 13px;
    border: 3px solid;
    box-shadow: 2px 2px 4px black;
    filter: drop-shadow(0 0 10px oklch(61.424% 0.14481 59.436));
}


/* Dean Ipsums */
.dean-pic-wrapper {
	display: inline-block;
	padding: 10px;
	filter: drop-shadow(0 0 25px oklch(65.351% 0.22203 142.449));
}

.dean-pic {
	height: 325px;
	width: auto;
	border: 2px solid oklch(70.551% 0.23977 142.461 / 0.858);
}

.deanBtn {
	font-family: "tag";
	font-size: 28px;
	text-decoration: none;
	cursor: pointer;
	border: 3px solid;
	background-color: oklch(28.908% 0.00003 271.152);
	color: oklch(65.351% 0.22203 142.449);
	padding: 15px;
	margin-top: 13px;
	box-shadow: 2px 2px 4px black;
	filter: drop-shadow(0 0 10px oklch(70.551% 0.23977 142.461 / 0.858));
}


/* Sam Ipsums */
.sam-pic-wrapper {
	display: inline-block;
	padding: 10px;
	filter: drop-shadow(0 0 25px oklch(78.194% 0.131 88.75));
}

.sam-pic {
	height: 325px;
	width: auto;
	border: 2px solid oklch(75.245% 0.12603 88.846 / 0.903);
}

.samBtn {
	font-family: "tag";
	font-size: 28px;
	text-decoration: none;
	cursor: pointer;
	border: 3px solid;
	background-color: oklch(28.908% 0.00003 271.152);
	color: oklch(78.194% 0.131 88.75);
	padding: 15px;
	margin-top: 13px;
	box-shadow: 2px 2px 4px black;
	filter: drop-shadow(0 0 10px oklch(75.245% 0.12603 88.864 / 0.903));
}


/* Cas Ipsums */
.cas-pic-wrapper {
	display: inline-block;
	padding: 10px;
	filter: drop-shadow(0 0 25px oklch(79.582% 0.11988 236.135));
}

.cas-pic {
	height: 325px;
	width: auto;
	border: 2px solid oklch(71.609% 0.1289 237.903 / 0.901);
}

.casBtn {
	font-family: "tag";
	font-size: 28px;
	text-decoration: none;
	cursor: pointer;
	border: 3px solid;
	background-color: oklch(28.908% 0.00003 271.152);
	color: oklch(80.909% 0.11217 235.616);
	padding: 15px;
	margin-top: 13px;
	box-shadow: 2px 2px 4px black;
	filter: drop-shadow(0 0 10px oklch(71.889% 0.16125 241.587 / 0.901));
}

.crowley-pic-wrapper {
	display: inline-block;
	padding: 10px;
	filter: drop-shadow(0 0 25px oklch(38.829% 0.15187 28.205));
}

.crowley-pic {
	height: 325px;
	width: auto;
	border: 2px solid oklch(41.749% 0.15531 27.273 / 0.841);
}

.crowleyBtn {
	font-family: "tag";
	font-size: 28px;
	text-decoration: none;
	cursor: pointer;
	border: 3px solid;
	background-color: oklch(28.908% 0.00003 271.152);
	color: oklch(48.957% 0.19222 28.282);
	padding: 15px;
	margin-top: 13px;
	box-shadow: 2px 2px 4px black;
	filter: drop-shadow(0 0 10px oklch(41.749% 0.15531 27.273 / 0.841));
}

/* Responsive */
@media (max-width: 600px) {
	.grid {
		gap: 60px;
	}


	body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.logo-pic {
		position: relative;
		height: 100px;
		width: auto;
	}

	.title {
		font-size: 50px;
		margin-top: 20px;
	}

	.subtitle {
		font-size: 32px;
	}

	.mixed-pic {
		height: 310px;
		width: auto;
	}

	.mixedBtn,
	.deanBtn,
	.samBtn,
	.casBtn,
	.crowleyBtn {
		font-size: 26px;
		margin-top: 10px;
	}

	.crowleyBtn {
		margin-bottom: 30px;
		margin-top: 20px;
	}


	.dean-pic,
	.sam-pic,
	.cas-pic,
	.crowley-pic {
		height: 315px;
		width: auto;
	}
}

@media (min-width: 601px) and (max-width: 1100px) {
	body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.grid {
		padding-top: 70px;
	}

	.logo-pic {
		position: relative;
		height: 150px;
		width: auto;
	}

	.title {
		margin-top: 25px;
		margin-bottom: 10px;
		font-size: 68px;
	}

	.crowleyBtn {
		margin-top: 20px;
		margin-bottom: 30px;
	}
}