:root {
	--size-type:45px;
	--sign:crimson;
	--grey:#3a3a3a;
}

body {
	font-family: input-mono-compressed, monospace;
	font-size: var(--size-type);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing:-0.03em;

	height:250vh;

	overflow-x: hidden;

	color:var(--grey);

/*	background: linear-gradient(to top, var(--sign), #fbfbfb);
	background-size: 200% 200%;*/
	background:#fbfbfb;
}

a {
	color:red;
}

#poster {
	width:100vw;
	height:200vh;
}

#info {
	position:fixed;
	top:1vw;
	right:1.5vw;

	font-size:4vh;
	font-weight: 400;
	text-align: right;

	animation: chromaber 3s ease-out 0s infinite alternate;
	text-shadow: -1px 1px 2px var(--sign), 1px -1px 2px magenta;
	/*color:var(--grey);*/
	color:white;
}

.t-date {
	/*border-top: 2px solid var(--grey);*/
	padding-top:0.2em;
}

.t-mada {
	/*border-top: 2px solid var(--grey);
	border-bottom: 2px solid var(--grey);*/
	padding-top:0.2em;
}

.t-sub {
	/*border-top: 2px solid var(--grey);*/
	padding-top:0.2em;
}

.sentence {
	font-size:4vw;

	animation: lineheight 3s ease-out 0s infinite alternate, chromaber 3s ease-out 0s infinite alternate;

	color:white;

	text-shadow: -3px 2px 5px magenta, 3px -2px 5px green;
}

.angle-left {
	position:absolute;
	width:50vw;
	top:40vh;
	right:66%;

	transform:rotate(-25deg) skew(-25deg);
	transform-origin:top right;

	text-align:right;

}

.angle-right {
	position:absolute;
	width:65vw;
	top:40vh;
	left:36%;

	transform:rotate(25deg) skew(25deg);
	transform-origin:top left;

	text-align:left;
}

.fade {
	opacity:66%;
}

.fade2 {
	opacity:33%;
}

.bg-left {
	height:200vh;

	z-index:-1;

	right:65%;
	background:linear-gradient(215deg, var(--sign), rgba(255,255,255,0));
	transform-origin:top right;
	opacity:0.7;
}

.bg-right {
	height:200vh;

	z-index:-1;

	left:35%;
	background:linear-gradient(-215deg, var(--sign), rgba(255,255,255,0));
	transform-origin:top left;
	opacity:0.6;
}

/*
.skew-left {
	letter-spacing:-0.2em;
	font-style: normal;
	transform:skew(23deg);
}
*/

.container {
	max-height:250vh;
}

/* animations */

.bounce {
	position:absolute;
	top:54vh;
	right:1em;

	animation: bounce 2.5s infinite;

	color:var(--sign);
	opacity:42%;
}

@keyframes movingGradient {
	0% {
		background-position:0% 50%;
	}
    50% {
    	background-position:100% 50%;
    }
    100% {
    	background-position:0% 50%;
    }
} 

@keyframes lineheight {
	0% {
		line-height:1em;
	}
	100% {
		line-height:3em;
	}
}

@keyframes chromaber {
	0% {
		text-shadow: 0px 0px 0px magenta, 0px -0px 0px green;
	}
	100% {
		text-shadow: -5px 5px 10px magenta, 5px -5px 10px green;
	}	
}