@font-face {
	font-family: "TeXGyreHeros-BoldItalic";
	font-style: normal;
	font-weight: 900;
	src: url("fonts/texgyreheros-bolditalic.woff") format("woff");
}

:root {
	--banner-bg-color: black;
	--banner-color: white;
	--bg: #8f8f8f;
}

.banner {
	background: var(--banner-bg-color);
	color: var(--banner-color);
	position: fixed;
	padding: 1rem;
	z-index: 40;
	font-family: "TeXGyreHeros-BoldItalic";
	font-weight: 900;
	transform: rotate(-30deg);
	bottom: 5%;
	right: -15%;
	width: 110%;
	font-size: 2rem;
	line-height: 3rem;
	transition: opacity 0.2s linear;
	/* fade-in and fade-out for the screen take-over */
	animation: var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
}

.banner:hover {
	opacity: 0.05;
}

@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.8;
	}
}

/* Larger than mobile screen */
@media (min-width: 40rem) {
	.banner {
		right: -20%;
		font-size: 6rem;
		line-height: 7rem;
	}
}

/* Larger than tablet screen */
@media (min-width: 80rem) {
	.banner {
		font-size: 8rem;
		line-height: 9rem;
	}
}

/* Larger than desktop screen */
@media (min-width: 120rem) {
	.banner {
		font-size: 10rem;
		line-height: 11rem;
	}
}

/* BANNER ANIMATION */

.marquee {
	overflow: hidden;
	position: relative;
	padding-left: 100%;
	/* Some browsers may require -webkit-animation */
	-webkit-animation: reduce 30s linear infinite;
	animation: reduce 30s linear infinite;

	--offset: 20vw;
	--move-initial: calc(-70% + var(--offset));
	--move-final: calc(-50% + var(--offset));
}

.marquee__inner {
	white-space: nowrap;
	display: inline-block;
	/* Some browsers may require -webkit-animation */
	-webkit-animation: scroll var(--ad) linear infinite;
	animation: scroll var(--ad) linear infinite;
	transform: translate3d(var(--move-initial), 0, 0);
}

/* Creates two blck-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
	z-index: 1;
	top: 0;
	left: 0;
	position: absolute;
	width: 40%;
	height: 100%;
	content: "";
	display: block;
	background: linear-gradient(to right, var(--banner-bg-color), transparent);
}

.marquee::after {
	left: auto;
	right: 0;
	transform: rotate(180deg);
}

/* Some browsers may require @-webkit-keyframes */
@keyframes reduce {
	to {
		padding-left: 0;
	}
}

@keyframes scroll {
	to {
		transform: translateX(-100%);
	}
}
