:root {
	--sign:crimson;
}

body {
	font-family: proxima-nova, sans-serif;
	font-size: 60px;
	font-weight:600;

	overflow-x: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;*/
}

#grid {
	width:100vw;
	display:flex;
	flex-wrap:wrap;
}

.grid-block {
	min-width:calc(100vw / 7);
	min-height:calc(100vh / 4);
	display: flex;
	justify-content: center;
	align-items: center;
	color:white;

	border:0.5px solid var(--sign);

	flex-grow:1;
}

.grid-block:hover {
	animation: bgfade 0.25s linear;
	background:var(--sign);
	color:#fff;
}

.grid-text {
	text-align:center;
	margin:20px;
}

#info {
	min-height:25vh;

	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items: center;

	padding-left:30px;
	padding-right:30px;

	border:0.5px solid var(--sign);
	background:var(--sign);
	color:#fff;

	font-family:proxima-nova, sans-serif;
	font-weight:200;
	font-size:5vh;
	text-transform:uppercase;
	letter-spacing:-0.035em;
}

#info:hover {
	animation:bgfade 0.25s linear reverse;
	background:#fff;
	color:var(--sign);
}

.info-block {

}

.sentence {
	
}


/* animations */
@keyframes bgfade {
	0% {
		background:#fff;
		color:var(--sign);
	}
	100% {
		background:var(--sign);
		color:#fff;
	}

}




/* shapes 

.square {
	width:20vh;
	height:20vh;
	background:var(--sign);
	box-shadow: 10px 10px 20px 10px var(--sign);
}

.circle {
	width:20vh;
	height:20vh;
	border-radius:100%;
	background:var(--sign);
	box-shadow: 10px 10px 20px 10px var(--sign);
}

.oval {
	width:30vh;
	height:20vh;
	border-radius:100%;
	background:var(--sign);
	box-shadow: 0px 0px 30px 10px var(--sign);
}

.inline {
	display:inline-block;
}

.overflow {
	overflow:scroll;
}
*/