@charset "UTF-8";

/* Font: Source Code Pro */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600&display=swap');

/* Font: Lato */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

body {
  /* animation */
	animation: body 1s 0.5s forwards;     /* animates fade in */
	opacity: 0;                           /* invisible upon image load */

  /* page alignment */
  text-align: center;

  margin: 0;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;

  background: linear-gradient(45deg,#F17C58, #E94584, #24AADB, #27DBB1,#FFDC18, #FF3706);
  background-size: 600% 400%;
  animation: gradient 40s ease infinite;
  animation-direction: normal;

  z-index: -1;
}

.centered {
  height: 100%;

}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1 {
  font-family: 'Source Code Pro';        /* scropt font for h1 */
  font-weight: normal;                  /* sets font-weight back to non-bold */
  color: white;                         /* sets font color */
  letter-spacing: -5px;
  line-height: 1;                     /* keeps h1 line space closer */
  /* text-shadow: x-coordinate, y-coordinate, blur radius, color of shadow */
  text-shadow: 1px 2px 4px grey;
}

h3 {
  font-family: "Roboto", sans-serif;
	font-weight: normal;
  color: white;
  line-height: 1;
}

h1, h3 {
  margin: 0.25em;
}

/* translate3d(tx (abscissa), ty (ordinate), tz) */
@keyframes body {
	0% {
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

/* Small Mobile Style */
@media only screen and (max-width: 373px) {


  h1 { font-size: 50px; }
  h3 { font-size: 20px; }
}

/* iPhone 6/7/8 Mobile */
@media only screen and (min-width: 375px) {


  h1 { font-size: 65px; }
  h3 { font-size: 25px; }
}

/* iPhone X Mobile */
@media only screen and (width: 375px) and (height: 812px) {


  h1 { font-size: 65px; }
  h3 {
    font-size: 25px;
    line-height: 1.25;
   }
}

/* Pixel Mobile Style */
@media only screen and (min-width: 410px) {


  h1 { font-size: 60px; }
  h3 { font-size: 25px; }
}


/* Plus Mobile Style */
@media only screen and (width: 414px) {


  h1 { font-size: 75px; }
  h3 { font-size: 25px; }
}

/* Tablet Style */
@media only screen and (min-width: 600px) {


  h1 { font-size: 75px; }
  h3 { font-size: 25px; }
}

/* Desktop Style */
@media only screen and (min-width: 961px) {


  h1 { font-size: 75px; }
  h3 { font-size: 25px;}
}