@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');

body {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Domine", serif;
	background:#0b0c0f;
	color:#fff;
}

a {
	text-decoration:none;
	color:#eb1e1e;

	animation-name: slide;
	
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	animation-duration:0.2s;
}

[data-ir-role="choice"] {
	text-decoration:none;
}

a:hover {
	color:#990909;
}

[data-ir-role="container"][data-ir-active="true"] {
	position: absolute;
	height: 100%;
	width: 55vw;
	padding: 2rem;
	overflow-y: scroll;
	overflow-x:hidden;
	scrollbar-width:thin;
	scroll-behavior: smooth;
	right: 0;
	font-size: 1.4rem;
	line-height:1.8rem;
	background:#16181d;
z-index:10;
}

#portrait {
	background: #16181d;
	border: 1vw #16181d solid;
	height: 36.5vw;
	width: 25vw;
	right: 54vw;
	z-index: 11;
	top: calc(50vh - 18.25vw);
	position: absolute;
}

#portrait img {
	width:100%;
}

#background {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	transition:background 4s;
}

.black {
	background:#0b0c0f
}

.white {
	background:#a8b0c6
}

.graphic-green {
	animation-name: greengraphic;
	
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	animation-duration:2s;
}
.graphic-red {
	animation-name: redgraphic;
	
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	animation-duration:2s;
}

.buffer {
	box-shadow:0 0 0 0 rgba(0,0,0,0);
}

@keyframes greengraphic {
	0% {box-shadow: inset 0px 0px 32px 6px rgba(25,209,41,0);}
	50% {box-shadow: inset 0px 0px 31px 34px rgba(25,209,41,1);}
	100% {box-shadow: inset 0px 0px 32px 6px rgba(25,209,41,0);}
  }

  @keyframes redgraphic {
	  0% {box-shadow: inset 0px 0px 4rem 1rem rgba(189,32,32,0);}
	  50% {box-shadow: inset 0px 0px 7rem 3rem rgba(189,32,32,1);}
	  100% {box-shadow: inset 0px 0px 4rem 1rem rgba(189,32,32,0);}
	}

#blackout {
	background:#000;
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;

	animation-name: fade;
	
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	animation-duration:3s;

	z-index:9999;
}
@keyframes fade {
	from {opacity:0;}
	to {opacity:1;}
  }

[data-ir-role="choicebox"] {
	display: flex;
	flex-flow: column;
	gap: 0.6rem;
}

[data-ir-role="choicebox"] a:nth-child(1)::before {
	content:"1. ";
}

[data-ir-role="choicebox"] a:nth-child(2)::before {
	content:"2. ";
}

[data-ir-role="choicebox"] a:nth-child(3)::before {
	content:"3. ";
}

[data-ir-role="continue"] {
	background-color: white;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
	margin-left: auto;
	height: calc(0.866 * 1rem);
	width: 1rem;
}

[data-ir-role="text"] {
	animation-name: slide;
	
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	animation-duration:0.2s;

	margin-top:0;
}
@keyframes slide {
	from {transform:translateX(100%);}
	to {transform:translateX(0%);}
  }

[data-ir-role="text"]::before {
	content: "You — ";
}

.skeleton::before {
	content: "LOST SKELETON — "
}


.knot::before, .latex::before, .string::before {
	color:#eb1e1e;
}

.urge::before, .party::before {
	color:#990909;
}

.urge::before {
	content: "THE URGE ";
}

.party::before {
	content: "THE PARTY ";
}

.knot::before {
	content: "KNOT ";
}

.latex::before {
	content: "LATEX ";
}

.string::before {
	content: "STRING ";
}

.end::before {
	color:#4f3e6f;
}

.end::before {
	content: "THE END ";
}

.twinge::before {
	color:#eee;
	content: "A TWINGE OF SOMETHING ";
}

.kuu::before {
	content:"KUU — ";
}

.green::before {
	content:"GREEN SKELETON — ";
}

.blue::before {
	content: "THE ONE WHO WILL COME IN THE NIGHT ";
	color:#3d9ef8;
}

.memory::before {
	content: "MEMORIES OF BETTER TIMES ";
	color:#00ff99;
}

.ash::before {
	content: "ASH WILLIAMS FROM THE EVIL DEAD — "
}

.skill {
	opacity:0.7;
}

.skill::before {
	content:"[";
}

.skill::after {
	content:"]";
}