/* GENERAL */
html {
	overflow-x: hidden;
}

body {
	margin: 0;
}

::selection {
	background: #ed3737;
	color: #000;
}


/* LOADER */
#loader {
	background: rgb(3, 0, 0);
	height: 100%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999;
}

#loaderContainer {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
}

/* WRAPPER */
#wrapper {
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 100%);
	backdrop-filter: contrast(5.2);
	z-index: 0;
}

/* HERO */
#hero {
	position: relative;
	height: 100vh;
	width: 100%;
}

#logo_wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#mainpage_logo {
	text-align: center;
	position: absolute;
	width: 100%;
	top: 200px;
	animation: floatUpDown 3s ease-in-out infinite alternate;
}

#fuckubus-logo {
	max-width: 99%;
}

#wip-sticky {
	position: absolute;
	max-height: 40%;
	left: 50%;
	top: 50%;
	transform: translate(6vmin, 0px);
}

#ratingContainer {
	bottom: 1%;
	right: 1%;
	height: 10%;
	position: absolute;
	z-index: 1;
}

@keyframes floatUpDown {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-2vh);
	}
}


/* BACKGROUND */
#wrapper {
	height: 100%;
	width: 100%;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("/img/LustBG-blur.jpg");
	filter: contrast(1.15); /* brings the colors out a little more */

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* DETAILS SECTION */
#hellish-content {
	padding: 6em 0;
	position: relative;
	z-index: 2;

	background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%), url("/img/hellish-pattern.png") repeat;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(14, 4, 4, 1) 7em);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(14, 4, 4, 1) 7em);
}

#hellish-content section {
	color: #eceaea;
	max-width: 70em;
	margin: 0 auto;
}

#hellish-content h1 {
	font-family: "Playwrite AR", cursive;
	font-size: 3em;
	text-align: center;

	padding-bottom: 0.1em;
}

#hellish-content p {
	font-family: "Platypi", serif;
	/*color: #d59090;*/
	font-size: 1.5em;
	text-align: justify;
}

#hellish-content h5 {
	font-family: "Cinzel", serif;
	font-size: 0.8em;
	color: #d1a7a7;
}

#hellish-content hr {
	border-color: #6f3232;
	border-width: 0.5em;
	border-radius: 1rem;
	height: auto;
	margin: 5em auto;
	width: 80em;
}

#featured-image {
	text-align: center;
}

#featured-image h5 {
	position: absolute;
	left: 55%;
	transform: rotate(15deg);
	font-size: 0.9em;
	font-weight: 900;
	-webkit-text-stroke: 0.3em rgba(0, 0, 0, 0.9);
	paint-order: stroke fill;
}

#featured-image img {
	border-radius: 1em;
	width: 40em;
}

@media only screen and (max-width: 1280px) {
	#mainpage_logo {
		top: 35vh;
	}

	#hellish-content {
		margin-top: -7em;
		padding-top: 10em;
		z-index: 0;
	}

	#hellish-content section {
		max-width: 90vw;
	}

	#hellish-content h1 {
		font-size: 1.5em;
		padding-bottom: 1em;
	}

	#hellish-content p {
		font-size: 1em;
	}

	#hellish-content h5 {
		font-size: 0.8em;
	}

	#hellish-content hr {
		border-width: 0.4em;
		width: 15em;
	}

	#featured-image h5 {
		right: 3vw;
		transform: rotate(15deg);
	}

	#featured-image img {
		width: 90vw;
		max-width: 99%;
	}
}