@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap');
html, body {
	margin: 0;
	height: 100%;
	overflow: hidden
}
body{
	background-color: #272744;
	margin:0;
	padding:0;
	display: flex;
}
h1{
	position: absolute;
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-size: 15vh;
	line-height: 97.5%;
	left: 10%;
	top:-80px;
	letter-spacing: 0.085em;
	color: #7187FF;
	mix-blend-mode: exclusion;
	z-index: 1;
}
#line{
	pointer-events:none;
	position: fixed;
	width: 215vh;
	height: 17vw;
	left: -80vh;
	top: 4vw;
	opacity: 0.5;
	background: #414161;
	mix-blend-mode:exclusion;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 90px;
	transform: rotate(65deg);
	z-index: 3;
	background-image: repeating-linear-gradient(0deg, #d8d8e9, #d8d8e9 30px, transparent 30px, transparent 60px, #d8d8e9 60px), repeating-linear-gradient(90deg, #d8d8e9, #d8d8e9 30px, transparent 30px, transparent 60px, #d8d8e9 60px), repeating-linear-gradient(180deg, #d8d8e9, #d8d8e9 30px, transparent 30px, transparent 60px, #d8d8e9 60px), repeating-linear-gradient(270deg, #d8d8e9, #d8d8e9 30px, transparent 30px, transparent 60px, #d8d8e9 60px);
	background-size: 6px 100%, 100% 6px, 6px 100% , 100% 6px;
	background-position: 0 0, 0 0, 100% 0, 0 100%;
	background-repeat: no-repeat;
}
#lineB{
	pointer-events:none;
	position: fixed;
	width: 215vh;
	height: 17vw;
	left: -80.3vh;
	top: 4vw;
	background: #272744;
	border-radius: 90px;
	transform: rotate(65deg);
}
.dots{
	z-index: -1;
	position: fixed;
	left: -16vw;
	height: 700px;
	bottom: -5vw;
	width: 50%;
	background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='10 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23939393' fill-opacity='0.2' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
	transform: rotate(65deg);
}
.arrow{
	position: absolute;
	right: 0;
	bottom: 12vh;
	width:16.5vw;
	height:19.9vw;
}
.char{
	position: fixed;
	right: 10vh;
	bottom: 0;
	z-index: -1;
	display:flex;
	width:61.2vw;
	height:56.2vw;
	animation: pulseC 8s infinite;
}
.squigglys{
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: url(imgs/SQUIGGLY.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size:140vmin;
	z-index: -1;
	opacity: 0.2;
}
#play{
	pointer-events:auto;
	transition: 0.5s ease-in;
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	width: 24.5vw;
	height: 10vh;
	right: 62%;
	top:43vh;
	color:white;
	font-family: 'Jost';
	font-style: normal;
	letter-spacing: 0.135em;
	font-size: 3vw;
	background: #37375D;
	border: 1px solid #000000;
	box-shadow: 0px 4px 25px 15px rgba(0, 0, 0, 0.6);
	border-radius: 30px;
	animation: pulseP 4s infinite;
}
#play:hover{
	background: #5d5dbe;
	transition: 0.5s ease-in-out;
}
#about:hover{
	background: #5d5dbe;
	transition: 0.5s ease-in-out;
}
#about{
	pointer-events:auto;
	transition: 0.5s ease-in-out;
	z-index: 3;
	box-sizing: border-box;
	position: absolute;
	width: 24.5vw;
	height: 10vh;
	right: 62%;
	top:43vh;
	color: #000000;
	font-family: 'Jost';
	font-style: normal;
	letter-spacing: 0.135em;
	font-size: 3vw;
	background: #37375D;
	border: 1px solid #000000;
	box-shadow: 0px 4px 25px 15px rgba(0, 0, 0, 0.6);
	border-radius: 30px;
	margin-top: 14vh;
}
a{
	z-index: 99999;
}
  @keyframes pulseP {
	0% {
		transform: scale(1);
	  box-shadow: 0px 4px 25px 16px rgba(0, 0, 0, 0.6);
	}
	
	50% {
		transform: scale(0.99);
	  box-shadow: 0px 4px 25px 10px rgba(0, 0, 0, 0.4);
	}
	
	100% {
		transform: scale(1);
	  box-shadow: 0px 4px 25px 16px rgba(0, 0, 0, 0.6);
	}
	
  }
  @keyframes pulseC {
	0% {
		transform-origin: 0% 0%;
		transform: scale(1);
	}
	
	50% {
		transform-origin: 150% 100%;
		transform: scale(0.99);
	}
	
	100% {
		transform-origin: 100% 150%;
		transform: scale(1);
	}
}