@charset "UTF-8";
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DRoboto%2BMono%26display%3Dswap");
@font-face {
  font-family: hacker-font;
  src: url("/?originalUrl=https%3A%2F%2Famagd.github.io%2Ffonts%2Fttf%2FJetBrainsMono-Regular.ttf");
}
:root {
  --text-hover-color: #a01616; /* Example: a shade of orange */
  --strong-color: #a01616;
  
  /* dark mode */
  --background-color: #FFF;
  --text-color: #012;
}


  body {
    /* font-family: hacker-font; */
    font-family: 'Quicksand', sans-serif;
    font-size: 100%;
    color: var(--text-color);
    background-color: var(--background-color); }

  a {
    color: #57A;
    font-weight: bold;
    text-decoration: none; }

  a:hover {
    color: var(--text-hover-color); }

  p, ul, ol, dl {
    font-size: 100%;
    line-height: 32px; }

  .image-cropper {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 10px auto 15px auto;
    overflow: hidden;
    border-radius: 50%;
  }
  
  img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
  }

  @import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DKarla%7CSpace%2BMono");

  :root {
    --contentHeight: 30vh;
    --sectionWidth: 700px;
  }

  * {
    outline: 0;
    box-sizing: border-box;
  }

  /* body {
    background-color: #000;
  } */

  section {
    max-width: var(--sectionWidth);
    margin: 40px auto;
    width: 97%;
    color: #fff;
  }

  summary {
    display: block;
    cursor: pointer;
    padding: 10px;
    font-family: "Space Mono", monospace;
    /* font-size: 10px; */
    transition: .3s;
    border-bottom: 2px solid;
    user-select: none;
  }

  details summary:hover {
    color: var(--text-hover-color);
  }

  details > div {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 100%;
    user-select: none;
    padding: 0 20px;
    font-family: "Karla", sans-serif;
    line-height: 1.5;
  }

  details > div > img {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 20px;
  }

  details > div > p {
    flex: 1;
  }

  details[open] > summary {
    color: red;
  }

  @media (min-width: 768px) {
    details[open] > div > p {
      opacity: 0;
      animation-name: showContent;
      animation-duration: 0.6s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
      margin: 0;
      padding-left: 20px;
    }

    details[open] > div {
      animation-name: slideDown;
      animation-duration: 0.3s;
      animation-fill-mode: forwards;
    }

    details[open] > div > img {
      opacity: 0;
      height: 100%;
      margin: 0;
      animation-name: showImage;
      animation-duration: 0.3s;
      animation-delay: 0.15s;
      animation-fill-mode: forwards;
    }
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      height: 0;
      padding: 0;
    }

    to {
      opacity: 1;
      height: var(--contentHeight);
      padding: 20px;
    }
  }

  @keyframes showImage {
    from {
      opacity: 0;
      clip-path: inset(50% 0 50% 0);
      transform: scale(0.4);
    }

    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes showContent {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* details {
    padding: 4px;
    background-color: #8d5a5a;
    border: none;
    box-shadow: 1px 1px 2px #533333;
    cursor: pointer;
    padding-bottom: 20px;
    color: rgb(255, 255, 255);
  } */

  /* img {
    display: block;
    max-width: 100%; } */

  blockquote {
    letter-spacing: 3px;
    margin: 0px;
    margin-top: 40px;
    margin-bottom: 70px;
    padding: 0px;
    text-align: center;
    position: relative; }
    blockquote footer {
      position: absolute;
      bottom: -35px;
      font-size: 80%;
      color: #333333;
      letter-spacing: 0px;
      left: 0px;
      right: 0px; }
    blockquote p {
      display: inline;
      font-size: 120%;
      color: #828282;
      font-weight: 400; }

  strong {
    color: var(--strong-color); }

  /* Style the button that is used to open and close the collapsible content */
  .collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }

  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #ccc;
  }

  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }
  
  .collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
  }


  .wrapper {
    max-width: 800px;
    margin: 20px auto; }

/* =Header *//*************************************************************/
  .header {
    overflow: hidden; }

  .navigation {
    float: left; }

  .logo {
    font-size: 300%;
    font-weight: 700;
    color: var(--strong-color);
    display: block; }

  .logo:hover {
    opacity: 0.8; }

  .menu {
    color: #828282;
    font-size: 150%;
    margin: 0px;
    margin-top: 6px;
    padding: 0px;
    list-style-type: none; }

  .menu__entry {
    display: inline-block;
    margin-right: 25px; }
  .menu__entry:last-child {
    margin-right: 0px; }

  /* Modify this existing class for the font change and smaller size */
  .menu__entry a {
    font-weight: 400;
    font-size: 80%; /* Adjust the percentage as needed to make it smaller */
  }

  /* Add this new class for the hover effect */
  .menu__entry a:hover {
    color: #a01616; /* This will turn the text red on hover */
  }

  .menu__entry a {
    font-weight: 400; }

  .social-links {
    margin-bottom: 0;
    padding-left: 0;
    float: right;
    font-size: 150%;
    color: #828282;
    list-style-type: none; }

  .social-links__entry {
    display: inline-block;
    margin-left: 10px; }

  /* Add this new class for the hover effect */
  .social-links a:hover {
    color: var(--strong-color);
    }

/* =Titles *//*************************************************************/
  .page-title {
    margin: 30px auto 0px auto;
    text-align: center; }

  .page-title__text {
    font-weight: 700;
    font-size: 150%; }

  .page-title__subtitle {
    font-weight: 400;
    font-size: 75%;
    color: #828282; }

/* =Post teasers *//*************************************************************/
  .list-posts {
    list-style-type: none;
    padding: 0px; }

  .post-teaser {
    margin-bottom: 15px;
    font-weight: 700; }

  .post-teaser__title {
    font-size: 100%;
    color: #828282; }

  .post-teaser__date {
    font-size: 100%;
    float: right;
    vertical-align: middle;
    color: #828282; }

  .post-teaser__month {
    width: 100%;
    text-align: center;
  }

  .empty-post-list {
    font-size: 150%;
    font-weight: 700;
    color: #333333;
    text-align: center; }

/* =Post page *//*************************************************************/
  .about {
    color: #828282;
    text-align: center;
    line-height: 24px; }

  .about__divider {
    font-size: 100%;
    letter-spacing: 9.09px; }

  .about__text {
    font-size: 100%; }

  .center-text {
    text-align: center;
  }

/* =Page navigation *//*************************************************************/
  .PageNavigation {
    display: block;
    width: auto;
    overflow: hidden;
  }

  .PageNavigation a {
    display: block;
    width: 50%;
    float: left;
    margin: 1em 0;
  }

  .PageNavigation .next {
    text-align: right;
  }

/* =Main Page *//*************************************************************/
  #about-img {
    border-radius: 13%;
    max-width: 125px;
    margin: auto;
    margin-bottom: 3%;
  }

  #describe-text {
      display: block;
      text-align: center;
      width: 100%; }

/* =Small screen *//*************************************************************/
  @media (max-width: 500px) {
    p, ul, ol, dl {
      font-size: 100%;
      line-height: 1.6; }

    .wrapper {
      width: 90%;
      margin: 15px auto; }

    .navigation,
    .social-links {
      display: block;
      text-align: center;
      width: 100%; }

    .social-links {
      font-size: 200%;
      margin: 10px auto; }

    .page-title {
      margin-top: 10px;
      margin-bottom: 30px; }

    .page-title__text {
      font-size: 150%; }

    .page-title__subtitle {
      font-size: 65%; }

    .post-teaser__title {
      font-size: 150%;
      display: block;
      text-align: center;
      width: 100%; }

    .post-teaser__date {
      font-size: 100%;
      margin-top: 10px;
      float: none;
      display: block;
      text-align: center;
      width: 100%; }

  }








/* timeline */
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DLondrina%2BSolid%3Awght%40100%3B300%26display%3Dswap");

/* * {
	box-sizing: border-box;
} */

html {
	scroll-behavior: smooth;
}

.content {
	width: 100vw;
	height: 100vh;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10vh 0vmin 2vmin 0vmin;
  width: 100%;
}

/* this is the box at the bottom of the page */
.timeline::before {
	content: "";
	position: fixed;
	width: 100vw;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: white;
	height: 8vh;
  border-top: 2px solid black;
}

.timeline::after {
	content: "";
	position: absolute;
	width: 0.5vmin;
	background: linear-gradient(
		180deg,
		red 0 47vh,
		orange 0 296vh,
		#0f760f 0 663vh,
		#196099 0 751vh,
		#0e0c0c 0 100%
	);
	background: #201f1f;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -0.25vmin;
	z-index: -1;
}

.timeline > li {
	text-align: left;
	background: rgb(117, 13, 13);
	list-style-type: none;
	padding: 0 4vmin 0 0;
	position: relative;
	background-color: inherit;
	width: 50%;
	/* perspective: 30vmin; */
	perspective-origin: bottom;
  cursor: pointer; /* Changes cursor to hand icon when hovering */
  transition: opacity 0.3s ease; /* Smooth transition for opacity changes */
}

.photo-gallery {
  position: relative;
}
.photo {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}
.photo-gallery:hover .photo {
  transform: translateX(calc(-50vw + var(--x))) translateY(calc(-50vh + var(--y)));
}


.timeline h2 {
  font-size: 1.5em; /* Adjust the size as needed */
  color: #000; /* Title color */
}

.timeline p {
  font-size: 1em; /* Paragraph text size */
  color: #333; /* Text color */
  margin: 0.5em 0; /* Space above and below the text */
}

.project-images {
  display: flex; /* Layout images in a row */
  gap: 10px; /* Spacing between images */
}

.project-images img {
  width: auto; /* Maintain aspect ratio */
  height: 100px; /* Example fixed height */
  object-fit: cover; /* To keep aspect ratio */
}

/* don't know what this is */
.timeline > li:nth-child(even) {
	text-align: left;
	left: 50%;
	padding: 0 0 0 4vmin;
}

/* this is the black arrow on the vertical timeline */
.timeline > li:before {
	content: " ";
	height: 0;
	position: absolute;
	top: 1vmin;
	width: 0;
	z-index: 1;
	right: 3vmin;
	border: medium solid #100d0d;
	border-width: 1vmin 0 1vmin 1vmin;
	border-color: #fff0 #fff0 #fff0 #252222;
}

.timeline > li.no-before:before {
  content: none;
}

/* this is the black arrow on the vertical timeline for the even numbered children */
.timeline > li:nth-child(even):before {
	border-color: #fff0 #262323 #fff0 #fff0;
	border-width: 1vmin 1vmin 1vmin 0;
	right: inherit;
	left: 3vmin;
}

/* this is the icon on the vertical timeline */
.timeline > li:after {
	content: "";
	position: absolute;
	width: 4.5vmin;
	height: 4.5vmin;
	right: -2.25vmin;
	background-color: white;
	border: 0.5vmin solid #000000;
	top: -0.25vmin;
	border-radius: 50%;
	z-index: 1;
	background: url("/?originalUrl=https%3A%2F%2Famagd.github.io%2Ftimeline_media%2Frobot_head.png")no-repeat center center;
	background-size: contain;
	box-sizing: border-box;
}

/* this is the icon on the vertical timeline */
.timeline > li:after {
  content: "";
  position: absolute;
  width: 4.5vmin;
  height: 4.5vmin;
  right: -2.25vmin;
  top: -0.25vmin;
  border-radius: 25%;
  z-index: 1;
  background: white url("/?originalUrl=https%3A%2F%2Famagd.github.io%2Ftimeline_media%2Frobot.gif") no-repeat center center;
  background-size: contain;
  box-sizing: border-box;
  border: 0.5vmin solid #000000;
}


/* this is the icon on the vertical timeline for the even numbered children */
.timeline > li:nth-child(even):after {
	left: -2.25vmin;
}

/* this one changes many things */
.timeline > li > *:not(h2) {
	width: 100%;
	display: inline-block;
	padding: 0.5vmin;
}

.timeline > li time {
	background: #fff;
	float: right;
	width: auto;
	font-size: 3vmin;
	border-radius: 0.25vmin;
  margin-top: -5px;
}

.timeline > li:nth-child(even) time {
  float: left;
}

.timeline > li time span {
  font-size: 1.5vmin;
	line-height: 0.25vmin;
	top: -1vmin;
	position: relative;
	margin-left: 0.5vmin;
	color: #666;
}

.timeline > li time span em {
	font-size: 1.1vmin;
	text-transform: uppercase;
	font-style: normal;
	color: #999;
	float: right;
}

/* the date text on the vertical timeline */
.timeline > li time strong {
	font-weight: normal;
	color: rgb(133, 17, 17);
}

/* the title of each child on the vertical timeline */
.timeline > li > strong {
	color: #fdfdfd;
	font-weight: 300;
	padding: 0.25vmin 0;
}

/* the title of each child on the vertical timeline */
.timeline > li > strong span {
	float: right;
	background: #9e0d0d;
	padding: 0.5vmin 1vmin;
	border-radius: 0.25vmin;
	width: 100%;
	font-size: 1.85vmin;
	letter-spacing: 0.025vmin;
  border-radius: 10px;
}

/* Set default opacity for child elements and ::after pseudo-element */
.timeline > li > *, .timeline > li::after {
  opacity: 1;
}

/* Change opacity on hover, but exclude the ::after pseudo-element */
.timeline > li:hover > * {
  opacity: 0.75;
}


/* position of the title of each child on the vertical timeline */
.timeline > li:nth-child(even) > strong span {
	float: left;
}

/* not sure what this is, I think it's the hover link */
.timeline > li > span a {
	position: absolute;
	top: 8.9vmin;
	right: 4.5vmin;
	/* width: 40vw; */
	height: 10vmin;
	background: #ffffff80;
	text-decoration: none;
	text-align: center;
	font-weight: 100;
	font-size: 5vmin;
	line-height: 10vmin;
	color: #000000ad;
	opacity: 0;
}

/* not sure what this is */
.timeline > li:nth-child(even) > span a {
	right: inherit;
}

.timeline > li > span a:before {
	content: "+";
}

/* .timeline > li > span a:hover {
	opacity: 1;
} */

/* TODO: this is the text paragraph on the vertical timeline */
.timeline > li > span {
	overflow: hidden;
	transition: all 0.5s ease 0s;
	background: #484848;
	right: 2vmin;
	margin-top: -0.5vmin;
	width: 100%;
	color: #fff;
	border-radius: 0.25vmin;
	display: flex;
  flex-direction: column;
  justify-content: center;
	font-weight: 100;
	letter-spacing: 0.1vmin;
  border-radius: 10px;
}

.timeline > li .image-container .horizontal-image-cover,
.timeline > li .image-container .horizontal-image-contain {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  /* background-color: #6f6f6f; */
  border: black 2px solid;
  border-radius: 5px;
}

.timeline > li .image-container .horizontal-image-cover > img {
  object-fit: cover;
  overflow: hidden;
  margin: 0;
  /* border: black 1px solid; */
  width: -webkit-fill-available;
}

.timeline > li .image-container .horizontal-image-contain > img {
  object-fit: contain;
  margin: 0;
  /* border: black 1px solid; */
  width: -webkit-fill-available;
}

.timeline > li:nth-child(even) > span {
	right: initial;
	left: 2vmin;
	transform-origin: left top;
  /* transform: translateX(0%);  */
}

.timeline > li:last-of-type {
	margin-bottom: 45vmin;
}

/* the text paragraph on the vertical timeline */
.timeline > li > span:after {
	content: "";
	width: 100%;
	text-shadow: 0 0 1px #000, 0 0 1px #000;
	font-size: 1.85vmin;
}

.timeline > li .project-description {
	width: 100%;
	text-shadow: 0 0 1px #000, 0 0 1px #000;
	font-size: 1.85vmin;
  padding: 5px;
  display: block;
}

.timeline > li .project-description ul {
  list-style-type: disc;
}

.timeline > li .hidden {
  display: none;
}

/* selector is the horizontal bar at the bottom of the page */
.selector {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 5vmin;
	background: white;
	z-index: 3;
	padding-top: 1vmin;
  left: 0;
}

/* this is an item on the selector */
.selector a {
	opacity: 1;
	position: absolute;
	margin: 10px;
	left: 0;
	text-decoration: none;
	background: white;
	padding: 0.15vmin 0.25vmin 0.1vmin;
	min-width: 2vw;
	display: inline-block;
	color: rgb(137, 15, 15);
	border-left: 1px solid #000;
	font-size: 1.65vmin;
}

.selector a:before {
  content: "";
  width: 2.5vmin;
  height: 2.5vmin;
  position: absolute;
  top: -4vmin;
  background: url("/?originalUrl=https%3A%2F%2Famagd.github.io%2Ftimeline_media%2Frobot.png") no-repeat center center;
  background-size: contain;
  filter: drop-shadow(0 0 0.2vmin #000);
  border-radius: 0%;
}

.selector a:hover:before {
  opacity: 0.5;
}


.selector a:after {
	content: "";
	margin-left: 0.25vmin;
	font-size: 1.5vmin;
	position: fixed;
	border: 0.75vmin solid transparent;
	border-bottom-color: #120e0e;
	top: -1.5vmin;
	left: 0.5vmin;
}

.selector a span {
	font-size: 1.25vmin;
	color: #333;
	margin-left: 0.25vmin;
}


a[href="#jhu"] { left: 0vw; }
a[href="#diffuser"] { left: 3.65vw; }
a[href="#s4wm"] { left: 7.30vw; }
a[href="#rl-algorithms"] { left: 10.95vw; }
a[href="#blast"] { left: 14.60vw; }
a[href="#mlml"] { left: 18.25vw; }
a[href="#rl_study"] { left: 21.90vw; }
a[href="#ms_thesis"] { left: 25.55vw; }
a[href="#ms_coursework"] { left: 29.20vw; }
a[href="#lane_seg"] { left: 32.85vw; }
a[href="#kaist_start"] { left: 36.50vw; }
a[href="#uav_path_planning"] { left: 40.15vw; }
a[href="#uav_localization"] { left: 43.80vw; }
a[href="#idao"] { left: 47.45vw; }
a[href="#ml_competition"] { left: 51.10vw; }
a[href="#inno_coursework"] { left: 54.75vw; }
a[href="#inno_start"] { left: 58.40vw; }
a[href="#nugrad"] { left: 62.05vw; }
a[href="#sesc"] { left: 65.70vw; }
a[href="#acm"] { left: 69.35vw; }
a[href="#6dof"] { left: 73vw; }
a[href="#vacuum"] { left: 76.65vw; }
a[href="#path_following"] { left: 80.30vw; }
a[href="#plc"] { left: 83.95vw; }
a[href="#festo"] { left: 87.60vw; }
a[href="#nu_coursework"] { left: 91.25vw; }
a[href="#nu_start"] { left: 94.90vw; }
a[href="#must_start"] { left: 98.55vw; }




a strong {
	background: var(--text-hover-color);
	color: white;
	position: absolute;
	top: 9vmin;
	font-weight: 300;
	padding: 0.5vmin 0.75vmin;
	width: max-content;
	border-radius: 0.25vmin;
  left: var(--selector-width, 0);
	transition: top 0.1s ease 0s;
	z-index: -1;
}

a:hover strong {
	top: -9vmin;
	transition: top 0.5s ease 0s;
}

a strong:before {
	content: "";
	border: 0.85vmin solid #fff0;
	border-top-color: #1c1c1c;
	position: absolute;
	bottom: -1.7vmin;
  left: var(--selector-before-width, 5px);
}

.timeline > li {
	margin-top: 5vh;
}

/*** PORTRAIT ***/

@media only screen and (orientation: portrait) {
	body:before {
		left: -95vh;
	}

	.timeline > li time {
		font-size: 2em;
	}

	.timeline > li > strong span,
	.timeline > li > span:after {
		font-size: 1em;
	}

	.selector {
		width: 12vw;
		background: linear-gradient(90deg, #fff0 0 15%, #fff8 0 17%, #fff0 0 100%);
		top: 0;
		right: 0;
		height: 100vh;
	}
	.selector a {
		display: block;
		left: 4vmin;
		font-size: 1em;
	}

	.selector a:before {
		top: 0vmin;
		left: -3.5vmin;
	}

	.selector a:after {
		border-bottom-color: #fff0;
		border-right-color: #fff;
		top: 0.5vmin;
		left: -1.65vmin;
	}

	.selector a strong,
	.selector a:hover strong {
		display: none;
	}

a[href="#jhu"] {
    top: 2vh;
}
a[href="#diffuser"] {
  top: 6vh;
}
a[href="#s4wm"] {
    top: 10vh;
}
a[href="#blast"] {
    top: 14vh;
}
a[href="#mlml"] {
    top: 18vh;
}
a[href="#rl_study"] {
    top: 22vh;
}
a[href="#ms_thesis"] {
    top: 26vh;
}
a[href="#ms_coursework"] {
    top: 30vh;
}
a[href="#lane_seg"] {
    top: 34vh;
}
a[href="#kaist_start"] {
    top: 38vh;
}
a[href="#uav_path_planning"] {
    top: 42vh;
}
a[href="#uav_localization"] {
    top: 46vh;
}
a[href="#idao"] {
    top: 50vh;
}
a[href="#ml_competition"] {
    top: 54vh;
}
a[href="#inno_coursework"] {
    top: 58vh;
}
a[href="#inno_start"] {
    top: 62vh;
}
a[href="#nugrad"] {
    top: 66vh;
}
a[href="#sesc"] {
    top: 70vh;
}
a[href="#acm"] {
    top: 74vh;
}
a[href="#6dof"] {
    top: 78vh;
}
a[href="#vacuum"] {
    top: 82vh;
}
a[href="#path_following"] {
    top: 86vh;
}
a[href="#plc"] {
    top: 90vh;
}
a[href="#festo"] {
    top: 94vh;
}
a[href="#nu_coursework"] {
    top: 98vh;
}
a[href="#nu_start"] {
    top: 102vh;
}
a[href="#must_start"] {
    top: 106vh;
}


}

/* =Glitch effect, Source: http://codepen.io/bulby97/pen/fcvay */
  .glitch {
    position: relative;
    animation: glitch 2s steps(100) infinite; }

  @keyframes glitch {
    0% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    1% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    2% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    3% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    4% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    5% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    6% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    7% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    8% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    9% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    10% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    11% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    12% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    13% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    14% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    15% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    16% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    17% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    18% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    19% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    20% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    21% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    22% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    23% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    24% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    25% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    26% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    27% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    28% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    29% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    30% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    31% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    32% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    33% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    34% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    35% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    36% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    37% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    38% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    39% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    40% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    41% {
      text-shadow: 50px 0 0 blue, -50px 0 0 lime; }
    42% {
      text-shadow: 0 0 0 blue, 0 0 0 lime; }
    43% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    44% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    45% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    46% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    47% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    48% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    49% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    50% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    51% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    52% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    53% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    54% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    55% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    56% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    57% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    58% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    59% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    60% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    61% {
      text-shadow: 30px 0 0 red, -30px 0 0 lime; }
    62% {
      text-shadow: 0 0 0 red, 0 0 0 lime; }
    63% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
    64% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
    65% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
    66% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
    67% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    68% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    69% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    70% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    71% {
      text-shadow: 70px 0 0 red, -70px 0 0 blue; }
    72% {
      text-shadow: 0 0 0 red, 0 0 0 blue; }
    73% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    74% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    75% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    76% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue; }
    77% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    78% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    79% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    80% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue; }
    81% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    82% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    83% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    84% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    85% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
    86% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    87% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    88% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    89% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    90% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime; }
    91% {
      text-shadow: 60px 0 0 lime, -60px 0 0 blue; }
    92% {
      text-shadow: 0 0 0 lime, 0 0 0 blue; }
    92% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    93% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    94% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    95% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
    96% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    97% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    98% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    99% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
    100% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime; } }
  /* Custom */
  .go-home {
    text-align: center; }