html, body {
	margin: 0;
	overflow: hidden;
	height: 100%;
	min-height: 100%;
}

body {
	background-color: rgb(16, 16, 16);
	height: 100%;
}

@font-face {
	font-family: neueEinstellung;
  	src: url('fonts/NeueEinstellung-Bold.ttf');
	font-weight: bold;
}

@font-face {
	font-family: neueEinstellung;
  	src: url('fonts/NeueEinstellung-Medium.ttf');
	font-weight: normal;
}

.light-title {
	color: white;
	font-size: 5em;
	position: fixed;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	font-family: neueEinstellung;
	font-weight: bold;
	display: inline-block;
	white-space: nowrap;
	animation-name: title-fade-in;
	animation-delay: 0.25s;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
	animation-fill-mode: forwards;
	z-index: 3;
}

@keyframes title-fade-in {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1.0;
	}
	80% {
		opacity: 1.0;
	}
	100% {
		opacity: 0.0;
	}
}

.background-image-container {
	width: 100%;
	height: 100%;
	z-index: -1;
	position: fixed;
	opacity: 0;
	animation-name: fade-in;
	animation-delay: 0.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	filter: brightness(0.8);
}

@keyframes fade-in {
	0% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

.background-pic {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	position: fixed;
	opacity: 0;
}

.bg1 {
	background-image: url(images/KC-1.jpg);
	animation-name: bg-image-animation;
	animation-delay: 1s;
}

.bg2 {
	background-image: url(images/KC-2.jpg);
	animation-name: bg-image-animation;
	animation-delay: 7s;
}

.bg3 {
	background-image: url(images/KC-3.jpg);
	animation-name: bg-image-animation;
	animation-delay: 13s;
}

.bg4 {
	background-image: url(images/KC-4.jpg);
	animation-name: bg-image-animation;
	animation-delay: 19s;
}

.bg5 {
	background-image: url(images/KC-5.jpg);
	animation-name: bg-image-animation;
	animation-delay: 25s;
}

@keyframes bg-image-animation {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.legal-and-contact {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	font-family: Helvetica, Arial, sans-serif;
	z-index: 8;
	margin-bottom: 8px;
	font-size: 12px;
}

.legal-copy {
	color: #cdcdcd;
	font-size: 0.8125em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	opacity: 0;
	animation-name: legal-copy-animation;
	animation-duration: 1s;
	animation-delay: 3.75s;
	animation-fill-mode: forwards;
}

@keyframes legal-copy-animation {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

.page-content {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 4;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	animation-name: fade-in;
	animation-delay: 1.5s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.name-and-description-container {
	color: white;
	font-size: 1.2em;
	font-family: neueEinstellung;
	font-weight: bold;
	display: inline-block;
	white-space: nowrap;
	text-align: center;
	z-index: 1;
	pointer-events: none;
}

#descriptions {
	font-weight: bold;
	font-size: 1.15em;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	margin-top: 10px;
	opacity: 0.75;
}

.description {
	display: inline-block;
	animation-name: description-animation;
	animation-iteration-count: infinite;
	opacity: 0;
	text-transform: uppercase;
	position: fixed;
	width: 100%;
}

.name-title {
	color: white;
	font-size: 1.5em;
	text-align: center;
	font-family: neueEinstellung;
	text-shadow: 3px 3px 4px #00000040;
	margin-top: 10px;
	opacity: 0.85;
}

@keyframes description-animation {
	0% { opacity: 0; }
	10% { opacity: 1; }
	15% { opacity: 0; }
	100% { opacity: 0; }
}

#details-and-links {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.detail-and-link-container {
	color: white;
	font-family: neueEinstellung;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
}

.bold-and-large {
	font-weight: bold;
	font-size: 1.2em;
	background-color: pink;
	padding-top: 3px;
	border-radius: 10px;
}

.click-to-description {
	font-weight: normal;
}

.detail-image {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 130px;
	width: auto;
	background-size: contain;
	padding-top: 10px;
	padding-bottom: 10px;
	transition: 0.3s;
	margin-top: 15px;
	margin-bottom: 10px;
	filter: brightness(1.0) drop-shadow(2px 2px 8px #00000055);
}

.detail-image:hover {
	transition: 0.3s;
	transform: rotateZ(10deg) rotateY(25deg);
	filter: brightness(1.25) drop-shadow(2px 2px 8px #00000055);
}

.khatto-logo {
	background-image: url('./images/khatto-black-emblem-300x300.png');
}

.last-groove-logo {
	background-image: url('./images/last-groove-rounded-icon.png');
}

.melanin-gamers-logo {
	background-image: url('./images/melanin-gamers-icon.png');
}

.scale-up-and-down {
	animation-name: scale-up-and-down-animation;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 5s;
}

@keyframes scale-up-and-down-animation {
	0% { transform: scale(1.0); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1.0); }
}

.scale-up-and-down-inverted {
	animation-name: scale-up-and-down-animation-inverted;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 5s;
}

@keyframes scale-up-and-down-animation-inverted {
	0% { transform: scale(1.15); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1.15); }
}

@media (orientation: landscape) {
	.background-pic {
	  background-size: auto 100%;
	  background-repeat: repeat-x;
	}

	.bg1 {
		background-image: url(images/KC-1.jpg), url(images/KC-2.jpg);
		background-repeat: no-repeat, repeat;
	}

	.bg2 {
		background-image: url(images/KC-2.jpg), url(images/KC-3.jpg);
		background-repeat: no-repeat, repeat;
	}

	.bg3 {
		background-image: url(images/KC-3.jpg), url(images/KC-4.jpg);
		background-repeat: no-repeat, repeat;
	}

	.bg4 {
		background-image: url(images/KC-4.jpg), url(images/KC-5.jpg);
		background-repeat: no-repeat, repeat;
	}

	.bg5 {
		background-image: url(images/KC-5.jpg), url(images/KC-1.jpg);
		background-repeat: no-repeat, repeat;
	}
}