body, html{
	width: 100vw;
	height: 100vh;
	overflow-x:hidden;
	overflow-y:hidden;
	margin: 0;
	padding: 0;
	background-color: #000;
  	background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13),       transparent),
    radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);
}

#canvas1{
	width: auto;
	height: 100vh;
	z-index: 1;
	pointer-events: visible; /* to get rid of moving background */
	/* pointer-events: none; */
}

#canvas2 {
	width: auto;
	height: 100vh;
	z-index: 98;
	pointer-events: none;
  }

#name, #description{
	position: absolute;
	pointer-events: none;
	z-index:9;
	/* font-family: 'Roboto', sans-serif; */
	font-family: 'Luckiest Guy', cursive;
	/* font-family: 'Press Start 2P', cursive; */
}

#name{
	font-size:650%;
	width:90%;
	top: 8vh;
	left: 5vw;
	/* margin: 5vh 0 0 3%; */
	color:rgb(238, 238, 238);
	transition:1s;
}

#description{
	font-size:30%;
	color:rgb(211, 211, 211);
}

  
@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}


  
/* Tooltip text */
#tooltiptext {
	font-size:40%;
	visibility: hidden;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	text-align: center;
	border-radius: 6px;
	width: 200px;
	bottom: 130%;
	left: 50%;
	margin-left: -100px; /* Use half of the width (120/2 = 60), to center the tooltip */
   
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
  
  /* Show the tooltip text when you mouse over the tooltip container */
#projects-btn:hover #tooltiptext {
	visibility: visible;
	transition: 0.6s;
}

#projects-div{
	position: absolute;
	z-index:9;
}

#projects-btn{
	display:inline-block;
	font-size:70%;
	pointer-events: auto;
	font-family: 'Luckiest Guy', cursive;
	color:rgb(255, 255, 255);
	background-color: rgba(121, 68, 154, 0);
	border:none;
}

#projects-btn:hover{
	cursor:pointer;
	color:rgba(138, 250, 241, 0.829);

	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 0.5s;
  
	/* When the animation is finished, start again */
	animation-iteration-count: infinite;
}

#projects-btn:active{
	color:rgba(255, 255, 255, 0.829);
}

.project-link{
	font-size:90%;
	position: relative;
	pointer-events: auto;
	font-family: 'Luckiest Guy', cursive;
	color:rgba(34, 192, 255, 0.822);
	text-decoration: none;
}

.project-link:hover{
	text-decoration: underline;
	color:rgb(60, 195, 248);
	font-size:94%;
}

#allProjects{
	display:flex;
	flex-direction: column;
	position: relative;
	font-size:250%;
	margin-top: 26.5vh;
	top: -100%;
	left: 5vw;
	z-index: 9;
}
.flex-child{
	margin-top: 1.6%;
}

canvas {
	position: fixed;
	width: 100%;
	height: 100%;
  }

.key{
	position: absolute;
	transition: 0.4s;
	border: 0;
	overflow: hidden; /*to prevent ripple from escaping*/
	top:0%; /*to prevent project stuff from pushing it down*/
}

.white:hover{
	background-color: rgba(204, 204, 204, 0.055);
	transition: 0.1s;
	border: solid 2px rgba(124, 255, 244, 0.726);
}

.white:hover ~ .black{
	background-color: rgba(0, 0, 0, 1);
	transition: 0s;
}

.black:hover{
	transition: 0.1s;
	border: solid 2px rgba(124, 255, 244, 0.726)
}

.white{
	background-color: rgba(204, 204, 204, 0.01);
	z-index:1;
	height: 100vh;
	width: 12.1vw;
}

.black{
	/* background-color: rgba(0, 0, 0, 1); */
	background-color: rgba(0, 0, 0, 0.74);
	z-index:2;
	height: 56vh;
	/* height: 56vh; */
	/* height: 66vh; */
	/* top: -10vh; */
	width: 9.01vw;
	border-radius: 10px;
	border: solid 1px rgba(41, 255, 237, 0.15)
}

/* it's either this or the ripple */
.key:active{
	background-color: rgba(204, 204, 204, 0);
	opacity:0.8;
	transition: 0.1s;
	border-bottom: white 5px solid;
}
/* .black:active{
	opacity:0.9;
	background-color: rgb(156, 156, 156);
} */

span.ripple {
	position: absolute; /* The absolute position we mentioned earlier */
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 800ms linear;
	background-color: rgba(138, 250, 241, 0.829);
}

@keyframes ripple {
	to {
	  transform: scale(3);
	  opacity: 0;
	}
}

.keys_out{
	transition:1s;
	animation: keys_animate_out 1s forwards;
}

@keyframes keys_animate_out {
	0% { top:0%; opacity:1 }
	70% {opacity:0}
	100% { top:100%; opacity:0}
}

.keys_in{
	transition:1s;
	animation: keys_animate_in 1s forwards;
}

@keyframes keys_animate_in {
	0% { top:100%; opacity:0 }
	70% {opacity:1}
	100% { top:0%; opacity:1}
}

.projects_out{
	transition:1s;
	animation: projects_animate_out 1s forwards;
}

@keyframes projects_animate_out {
	0% { top:0%; opacity:1 }
	70% {opacity:0}
	100% { top:-100%; opacity:0}
}

.projects_in{
	transition:1s;
	animation: projects_animate_in 1s forwards;
}

@keyframes projects_animate_in {
	0% { top:-100%; opacity:0 }
	70% {opacity:1}
	100% { top:0%; opacity:1}
}