/* CSS files add styling rules to your content */

body {
	font-family: "Righteous", "Helvetica Neue", helvetica, arial, sans-serif;
	margin: 2em;
	background-color: #F8CB00;
  }
  
  body > * {
	position: relative;
	z-index: 10;
  }
  
  .stripe-red {
	background-color: #F85131;
	width: 33vw;
	height: 45vh;
	transform: translateX(-40%);
	z-index: 5;
  }
  
  .stripe-blue {
	background-color: #4261B4;
	width: 15vw;
	height: 122vh;
	transform: translateX(160%);
	z-index: 4;
  }
  
  .stripe-green {
	background-color: #63C4A5;
	width: 15vw;
	height: 60vh;
	transform: translateX(215%);
	z-index: 2;
  }
  
  .stripe-orange {
	background-color: #F78E18;
	width: 32vw;
	height: 85vh;
	transform: translateX(10%);
	z-index: 3;
  }
  
  .stripe {
	position: fixed;
	bottom: 0;
	left: 50%;
	display: block;
	transform-origin: bottom center;
  }
  
  .stripe-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: bottom center;
	transform: skew(34deg) translateY(122%);
	animation: slidein 400ms 700ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }
  
  .reset {
	animation: none !important;
  }
  
  .stripe-container:nth-of-type(1) {
	animation-delay: 750ms;
  }
  
  .stripe-container:nth-of-type(2) {
	animation-delay: 775ms;
  }
  
  .stripe-container:nth-of-type(4) {
	animation-delay: 815ms;
  }
  
  @keyframes slidein {
	0% {
	  transform: skew(45deg) translateY(122%);
	}
	100% {
	  transform: skew(45deg) translateY(10vh);
	}
  }
  
  h1 {
	font-style: italic;
	color: #373fff;
  }
  
  #info-container {
	text-align: right;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90vw;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(calc(-50% + 3vw), -20%);
  }
  
  .text {
	font-size: 48px;
	line-height: 39px;
	color: #fff;
	position: relative;
	display: inline-block;
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	text-transform: uppercase;
	transform: scaleY(1.5);
	transform-origin: center bottom;
	overflow: hidden;
	padding-left: 50px;
  }
  
  .text span {
	position: relative;
	z-index: 2;
	letter-spacing: 5px;
	display: block;
	animation: textup 200ms 950ms ease-out forwards;
	  transform: translate3d(0, 100%, 0);
  }
  
  .text#zone span {
	animation-delay: 1050ms;
  }
  
  .text:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: black;
	width: calc(100% - 50px);
	height: 50%;
	transform-origin: bottom right;
	transform: skew(45deg);
	z-index: 0;
  }
  
  #zone {
	color: #000;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-color: white;
	transform: scaleY(0.6);
	letter-spacing: 0;
	animation: inleft 200ms 800ms ease-out forwards;
	  transform: scaleY(0.6) translate3d(-100vw, 0, 0);
  }
  
  #zone:after {
	background-color: white;
  }
  
  #zone-name {
	animation: inright 300ms 700ms ease-out forwards;
	  transform: scaleY(1.5) translate3d(100vw, 0, 0);
  }
  
  @keyframes inright {
	0% {
	  transform: scaleY(1.5) translate3d(100vw, 0, 0);
	}
	100% {
	  transform: scaleY(1.5) translate3d(0, 0, 0);
	}
  }
  @keyframes inleft {
	0% {
	  transform: scaleY(0.6) translate3d(-100vw, 0, 0);
	}
	100% {
	  transform: scaleY(0.6) translate3d(0, 0, 0);
	}
  }
  
  @keyframes textup {
	0% {
	  transform: translate3d(0, 100%, 0);
	}
	100% {
	  transform: translate3d(0, 0, 0);
	}
  }
  
  #act-container {
	perspective: none;
  }
  
  #act {
	width: 180px;
	height: 180px;
	background-color: #F78E18;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20px;
	position: relative;
	animation: rotatein 300ms 1250ms ease-out forwards;
	  transform: rotateY(90deg);
  }
  
  #act div {
	font-size: 180px;
	line-height: 1;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
	text-shadow: -5px 0 0 white;
  }
  
  #act .label {
	position: absolute;
	color: white;
	font-size: 12px;
	top: 32px;
	left: 50%;
	text-transform: uppercase;
	transform: translateX(calc(-50% - 2px));
  }
  
  @keyframes rotatein {
	0% {
	  transform: rotateY(90deg);
	}
	100% {
	  transform: rotateY(0);
	}
  }
  
  #shutter-container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
  }
  
  .shutter {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
  }
  
  .shutter .before, .shutter .after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
  }
  
  .shutter .before {
	  transform: translate3d(0, 0, 0);
	animation: unshutter 200ms ease-out forwards;
  }
  
  .shutter .after {
	top: 50%;
	  transform: translate3d(0, 0, 0);
	animation: unshutter-dn 200ms ease-out forwards;
  }
  
  .shutter.black .before, .shutter.black .after {
	background-color: black;
	animation-delay: 150ms;
  }
  .shutter.blue .before, .shutter.blue .after {
	background-color: #4261B4;
	animation-delay: 250ms;
  }
  .shutter.red .before, .shutter.red .after {
	background-color: #F85131;
	animation-delay: 350ms;
  }
  .shutter.green .before, .shutter.green .after {
	background-color: #63C4A5;
	animation-delay: 450ms;
  }
  .shutter.orange .before, .shutter.orange .after {
	background-color: #F78E18;
	animation-delay: 550ms;
  }
  
  @keyframes unshutter {
	0% {
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  transform: translate3d(0, -100%, 0);
	}
  }
  
  @keyframes unshutter-dn {
	0% {
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  transform: translate3d(0, 100%, 0);
	}
  }

  #help-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.35);
	visibility: hidden;
  }

  #help-container.active {
	visibility: visible;
  }

  #help-container #help {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ddd;
	max-width: 42%;
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 1);
  }

  #help-button {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 2rem;
  }

  #help-button button {
	border: none;
	background-color: #4261B4;
	color: #eee;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 50%;
	min-width: 50px;
	min-height: 50px;
	box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 1);
	cursor: pointer;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  #help-button button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 0.35rem 0.35rem 3px rgba(0, 0, 0, 1);
  }