@font-face{ 
	font-family: 'comic';
	src: url('COMIC.TTF') format('truetype');
}
body {
	overflow:hidden;
	margin: 0;
	height: 100%;
}
#ytvid {
    display:flex;
    position:absolute;
    animation: spin 210s linear infinite;
    align-items:center;
    justify-content:center;
    top: 90px;
    width: 100%;
    pointer-events:none;
    right:0;
    bottom:90px;
}
#mainBod {
	background-image: url(gifs/mathe-3039691-small.gif);
	background-repeat: repeat;
	background-color: #8b8b8b;
	border: 70px solid;
	content: "";
	height: 100%;
	box-sizing: border-box;
	border-image: url(gifs/archbtw.gif);
	border-image-slice: 28 28 fill;
	border-image-repeat: round;
	border-image-width: 333px;
}
h1 {
	animation-name: h1blink;
	animation-duration:1s;
	animation-iteration-count: infinite;
	font-size: 369%;
	font-family: 'comic', sans-serif;
	background: #00FCEC;
	background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
a {
	display: inline-block;
	background: #00FCEC;
	background: linear-gradient(to right, #00FCEC 17%, #FF69E6 66%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: wavy underline;
}
li:hover a{
    animation-name: blink;
    animation-duration: 2s;
   animation-iteration-count: infinite;
}

li:visited {
	color: cyan;
	text-decoration: none;
}
li {
	font-size: 300%;
	font-family: 'comic', sans-serif;
	color: cyan;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

#footer img {
	height: 31px
}

@keyframes spin {
  from {
    transform: perspective(1900px) translate3d(20rem,10px,0rem) scale(70%);
  }
  to {
    transform: perspective(1900px) translate3d(20rem,10px,10rem) scale(100%) rotateZ(5deg) rotateY(5deg)rotateX(54deg);
  }
}

@keyframes h1blink {
    0% {color: pink;text-shadow:text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	18% {color: cyan;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	22% {color: pink; text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
		25% {color: cyan;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
		53% {color: pink;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	57% {color: cyan;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	100% {color: pink;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	20%, 24%, 55% {color: cyan;
    text-shadow: none;
  }
}


@keyframes blink {
    0% { color: white;text-shadow:text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	18% { color: white;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	22% {color: white; text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
		25% {color: white;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
		53% {color: pink;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
	57% {color: pink;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	100% {color: pink;text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #ff01ec,
      0 0 80px #ff01ec,
      0 0 90px #ff01ec,
      0 0 100px #ff01ec,
      0 0 150px #ff01ec;
  }
	20%, 24%, 55% {color: white;
    text-shadow: none;
  }
  from {
   transform: perspective(1200px) translate3d(10rem,10px,10rem) scale(150%) rotateX(75deg) rotateZ(220deg);
  }
  to {
    transform: perspective(800px) translate3d(10rem,10px,30rem) scale(150%) rotateX(75deg) rotateZ(370deg);
  }
}