:root {
	--sign:crimson;
}

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

	overflow: hidden;


	color:white;
}

a {
	color:red;
}


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

	background-color:#101010;

	display:flex;
	justify-content: center;
}

.info {
	position: fixed;
	padding:0.2em;

	font-size:2.5vw;
	text-align:left;
	text-transform:uppercase;
}

.t-date {
	top:0;
	right:0;
}

.t-sub {
	top:0;
	left:0;
}

.t-mada {
	bottom:0;
	left:0;
}

.t-symbol {
	bottom:0;
	right:0;

	font-family: "Segoe UI Symbol";
}


.sentence {
	position:relative;
	margin:15px;
	max-width:40vw;
	margin:auto;
	z-index:2;

	/*font-family:Arial, sans-serif;*/
	font-weight:bold;
	font-style:italic;
	font-size:35px;
	text-align:center;
	line-height:1.5em;
	letter-spacing:0.05em;

}

.blackbg {
	background:black;
}

/* color animations */
.colorPulse {
	animation: colorPulse 3s infinite;
}

@keyframes colorPulse {
	0% {
		color:#fff;
	}
	50% {
		color:var(--sign);
	}
	100% {
		color:#fff;
	}
}


/* the following animations derived from: https://css-tricks.com/almanac/properties/o/offset-path/*/

.c-inner {
	position: absolute;
	top:50vh;
	left:50vw;
	width:70vw;

 	animation: move 10s linear infinite, scale 10s linear infinite;
}

.c-middle {
	position: absolute;
	top:50vh;
	left:50vw;
	width:95vw;

 	animation: move 12s linear infinite, scale 12s linear infinite;
}

.c-outer {
	position: absolute;
	top:50vh;
	left:50vw;
	width:120vw;

 	animation: move 15s linear infinite, scale 15s linear infinite;
}

.reverse {
	animation-direction: reverse;
}


.rotate {
	motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
 	offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');

 	border: 2px solid var(--sign);
 	border-radius: 50%;

}

@keyframes move {
  100% { 
    motion-offset: 100%;
    offset-distance: 100%;
  }
}

@keyframes scale {
	0% {
		height:30%;
	}
	50% {
		height:80%;
	}
	100% {
		height:30%;
	}
}