:root {
	--sign:crimson;
}

body {
	font-family: input-mono-compressed, monospace;
	font-size: 60px;
	font-weight:400;

	overflow:hidden;
}

a {
	color:red;
}


.poster {
	width:100vw;
	height:100vh;

	background-image: linear-gradient(to right, var(--sign), #fabbbb);
}

.signSymbol {
	font-family: Segoe UI Symbol;
	/*color:var(--sign);*/
	font-size:0.9em;
	position:relative;
	bottom:0.05em;
}

#bottom {
	position:fixed;
	bottom:0;
	width:100vw;
	height:25vh;
	z-index:2;

	background:white;

	display:flex;
	grid-gap:10px;
	justify-content:space-around;
	padding:0.5em;

	color:#333;
}

#info {
	display:inline-block;

	font-size:2.3vh;
	text-align:left;
	text-transform:uppercase;
}

.info-block {
	display:block;
	margin-bottom:1em;
}


.sentence {
	width:60vw;

	font-weight:200;
	font-style:italic;
	font-size:3vh;
	text-align:left;
	line-height:1.1em;
	letter-spacing:-0.02em;
	color:black;
}

#top {
	position:fixed;
	left:-15em;
	top:0;
	transform-origin:100% 0; /* thank you to this page: https://css-tricks.com/snippets/css/text-rotation/ */
	transform:rotate(-90deg);

	color:white;
	font-family:Georgia;
	font-style:italic;
	text-transform:uppercase;
	letter-spacing:-0.01em;
	font-size:10vh;
	text-align: center;
	line-height:1.15em;

	animation:scroll 2s linear infinite;
}

/* animation */

@keyframes scroll {
	100% {
		transform:rotate(-90deg) translateY(-1.15em);
	}
}