:root {
  --sign: crimson;
}

body {
	font-family: Segoe UI,sans-serif;
	font-size: 60px;
	text-align: left;
	color:#111;

	overflow-x: hidden;


}

a {
	color:red;
}



#poster {
	width:100vw;
	min-height:100vh;

	padding:18px;

	background-color: var(--sign);

	display: flex;
	grid-gap: 18px;
}

.sentence {
	width:calc((2 * (100vw / 3)) - 36px);
	padding:18px;

	flex-grow:2;

	background-color: white;

	font-weight: bold;
	line-height: 1.1em;
}

.signWord {
	color:var(--sign);
}

#info {
	width:calc((100vw / 3) - 36px);
	padding:18px;

	flex-grow:1;

	background-color: white;

	display:flex;
	flex-wrap: wrap;
	flex-direction:column;
	justify-content:space-between;

	font-size:45px;
}

#symbol {
	width:calc(100vw - 36px);
	height:calc(100vh - 36px);

	flex-grow:3;

	background-color: var(--sign);

	overflow: hidden;

	mix-blend-mode:difference;
}

#symbolText {
	position:relative;
	width:150%;
	height:150%;

	left:-100px;
	top:-80px;

	color:#fff;
	text-align: left;
	font-size:175px;
	letter-spacing:-15px;
	line-height:0.95em;
	font-style: italic;
}

.signSymbol {
	font-family: "Segoe UI Symbol" ;
}

.t-sub {
	color:var(--sign);
	text-transform: uppercase;
	letter-spacing:-2px;
	font-style: italic;
}