@charset "UTF-8";
/* This first part with the star disables longpress on iOS so it doesn't get in the way of users tapping the bubbles. However, currently, on my janky iPhone 6 it looks like there is an issue with the mouseover animation that changes Spider-sha's expressions. Like, they need to be uploaded upfront before the user tap-holds a bubble. Also, users will tap a bubble instead of tap-hold it so they immediately open the link. I've tried endlessly to see if I could make tap do what tap-hold does--where the speech-bubble is revealing on the first tap--so the user needs to tap twice to open the link. If you know how to make my dream a reality, please help! */
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}  

html {
  Height: 100%;
}

body {
	  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	  height: 100%;
	  background-color: #010001;
	  margin: 0;
	}

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  height: 100%;
  overflow: auto;
}

/*This next part puts the video on loop behind all the other elements*/
.video-container {
  display: grid;
  justify-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left:50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.ontopofweb {
  z-index: 2;
}
/*This next part was for when I couldn't get the video to play on iOS. It's fixed now, but I'm worried deleting it might break something...*/
.still-container {
  display: grid;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left:50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
/*Below is the DIV that's styled to contain Spider-sha's expressions and keeps them centered above the video*/
	#Rectangle {
	  width: 200px;
	  height: 200px;
	  background-color: transparent;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	  }

/*How the bubbles expand on mouseover*/
	.button {
		position: absolute;
		opacity: 0.5;
		transition: 0.3s ease;
		cursor: pointer;
		}
	.button:hover {
		opacity: 1;
		transform: scale(3, 3);
		}
	.button:focus {
	  outline: 0;
		}

/*Position and size of clickable bubbles*/
/*ON Spider-sha, she is not a bubble, but she is clickable*/
	.aisha {
		position: relative;
		width: 200px;
		height: 200px;
		cursor: pointer;
		display: inline-block;
		}
/*Bubbles to Spider-sha's TOP RIGHT*/
	.owl {
		width: 50px;
		top: -100px;
		left: -100px;
		}
/*Bubbles to Spider-sha's TOP LEFT*/
	.monarch {
		width: 50px;
		top: -100px;
		left: 250px;
		}

/*Below is the styling, positioning, and animation of the speech bubbles. Note: "#SpeechBubble::before" is how the arrow is styled*/

/*Hover ON Spider-sha*/
	#SpeechBubbleAisha {
	  position: absolute;
	  transform-origin: 0% 100%;
	  text-align: center;
	  background-color: white;
	  color: black;
	  border-radius: 10px;
	  width: 100px;
	  padding: 10px;
	  left: 150px;
	  top: -10px;
	  transform: scale(0);
	  animation-fill-mode: forwards;
	}
	#SpeechBubbleAisha::before {
	  content: "";
	  display: block;
	  width: 0;
	  position: absolute;
	  bottom: 5px;
	  left: -24px;
	  border-style: solid;
	  border-width: 15px;
	  border-color: white transparent transparent white;
	  transform: rotate(180deg);
	}
/*Hover on bubbles to Spider-sha's TOP RIGHT*/
	#SpeechBubbleOwl {
	  position: absolute;
	  transform-origin: 0% 100%;
	  text-align: center;
	  background-color: white;
	  color: black;
	  border-radius: 10px;
	  width: 100px;
	  padding: 10px;
	  left: -45px;
	  top: -5px;
	  transform: scale(0);
	  animation-fill-mode: forwards;
	}
	#SpeechBubbleOwl::before {
	  content: "";
	  display: block;
	  width: 0;
	  position: absolute;
	  bottom: 2px;
	  left: 90px;
	  border-style: solid;
	  border-width: 15px;
	  border-color: white transparent transparent white;
	  transform: rotate(25deg);
	}
/*Hover on bubbles to Spider-sha's TOP LEFT*/
	#SpeechBubbleMonarch {
	  position: relative;
	  transform-origin: 0% 100%;
	  text-align: center;
	  background-color: white;
	  color: black;
	  border-radius: 10px;
	  width: 100px;
	  padding: 10px;
	  left: 140px;
	  top: -240px;
	  transform: scale(0);
	  animation-fill-mode: forwards;
	}
	#SpeechBubbleMonarch::before {
	  content: "";
	  display: block;
	  width: 0;
	  position: absolute;
	  bottom: 10px;
	  left: -20px;
	  border-style: solid;
	  border-width: 15px;
	  border-color: white transparent transparent white;
	  transform: rotate(175deg);
	}
/*Animation keyframes*/
	@keyframes expand-bounce {
	  0% {
		transform: scale(0);
	  }
	  50% {
		transform: scale(1.25);
	  }
	  100% {
		transform: scale(1);
	  }
	}

	@keyframes shrink {
	  0% {
		transform: scale(1);
	  }
	  100% {
		transform: scale(0);
	  }
	}

/*Modifications for phone sizes and my Macbook, this first one is for iPhone6, second is for Android... I don't know what the third is for*/
@media screen and (orientation: portrait) {
  body, html {
  overflow: hidden;
  font-family: '-apple-system','HelveticaNeue';
}

.video-container {
  transform: scale(0.62);
  overflow: visible;
}
	#SpeechBubbleOldDevil::before {
	  bottom: 70px;
	}
	#SpeechBubbleNewDevil::before {
	  bottom: 80px;
	}
}
@media (max-height: 728px) {
  body, html {
  overflow: hidden;
}

.video-container {
  transform: scale(0.65);
  overflow: visible;
}
	#SpeechBubbleAisha {
	  top: -18px;
	  left: 140px;
	}
	#SpeechBubbleMonarch::before {
	  bottom: 25px;
	  transform: rotate(185deg);
	}
}
@media (max-width: 375px) {
  body, html {
  overflow: hidden;
  font-family: '-apple-system','HelveticaNeue';
	}
.video-container {
  transform: scale(0.65);
  overflow: visible;
}

}