body {
	--color-text: #e0e0e0;
	--color-text-secondary: #5e6262;
	--color-bg: #151616;
	--color-link: #5e6262;
	--color-link-hover: #e0e0e0;
	--color-date: #e0e0e0;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/*width*/
::-webkit-scrollbar {
	width:6px;
  }
  
  /*track*/
  ::-webkit-scrollbar-track {
	background:transparent;
	border-width:1px;
	border-style:none;
	border-radius:4px;
  }
  
  /*thumb*/
  ::-webkit-scrollbar-thumb {
	background:rgb(224, 68, 3);
	border-radius:4px;
  }

.char9 {
	margin-left: 12px;
}

#container {
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: -1;
	overflow: hidden;
	position: absolute;
}

canvas {
	display: block;
}

.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
	opacity: 0;
}

.content {
	display: grid;
	grid-template-columns: 100%;
	grid-auto-rows: 100%;
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 1;
	top: -96px;
	left: 0;
	justify-items: center;
	text-align: center;
	align-content: center;
	align-items: center;
}

.scroll {
	display: none;
}

.animation-done .scroll {
	display: block;
}

.grid-line {
	pointer-events: none;
}

 .content__item {
	grid-area: 1 / 1 / 2 / 2;
}

.content__item > * {
	opacity: 0;
	pointer-events: none;
}

.content__item--details {
	font-family: titling-gothic-fb-wide, sans-serif;
}

.content__location {
	margin: 0;
	font-weight: 300;
	color: var(--color-text-secondary);
}

.content__title {
	font-weight: 700;
	font-size: 9vw;
	margin: 0;
}


.content__title span {
	display: inline-block;
	opacity: 0;
}
.content__date {
	font-size: 3rem;
	font-weight: 700;
	margin: 1rem 0 0 0;
	color: var(--color-date);
}


.content__button {
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	font-size: 1.25rem;
	font-family: titling-gothic-fb-wide, sans-serif;
	font-weight: 700;
	position: relative;	
}

.content__button::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: currentColor;
	left: 0;
	top: 100%;
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
}

.content__button:hover::after {
	opacity: 1;
	transition: transform 0.3s, opacity 0.1s;
	transform: scale3d(1,1,1);
}

 .content__item .content__button {
	opacity: 1;
	pointer-events: auto;
}

.content__button:focus {
	outline: none;
}

@media screen and (min-width: 53em) {
	.frame {
		position: fixed;
		text-align: left;
		z-index: 10000;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 3rem 4rem;
		pointer-events: none;
		grid-template-columns: 40% 20% 40%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'deco demos demos'
							'... ... ...'
							'title title credits';
	}
	.content {
		height: 100vh;
		top: 0;
		justify-content: center;
		align-items: center;
	}
	.content__inner {
		margin: 0;
	}
	.content__item--columns {
		font-size: 2.15rem;
		display: grid;
		grid-template-rows: 100%;
		grid-template-columns: repeat(2, calc(50% - 2rem));
		padding: 0 4rem;
		grid-gap: 4rem;
	}
}