@import url('https://fonts.googleapis.com/css?family=Griffy');

body, html {
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	font-size: 1em;
	color: #ffffff;
	background-color: #000000;
}

#delta {
	font-family: 'Merriweather', serif;
	position: fixed;
	cursor: default;
	bottom: 5px;
	right: 15px;
	font-size: 10px;
}

#net {
    position: fixed;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    right: 0;
    top: 0;
}

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

.item {
	align-self: center;
	opacity: 1;
	animation: fade 2s linear;
	font-family: 'Press Start 2P', fantasy;
}

@keyframes fade {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

/* RGB */
/*$color1: rgba(242, 243, 174, 1);
$color2: rgba(237, 211, 130, 1);
$color3: rgba(252, 158, 79, 1);
$color4: rgba(255, 82, 27, 1);
$color5: rgba(2, 1, 34, 1);*/

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: "Roboto Slab", serif;
}

.morphing {
  position: relative;
  font-size: 120px;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  filter: contrast(25) blur(1px);
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: word 16s infinite ease-in-out;
          animation: word 16s infinite ease-in-out;
}
.word:nth-child(1) {
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
}
.word:nth-child(2) {
  -webkit-animation-delay: -14.5454545455s;
          animation-delay: -14.5454545455s;
}
.word:nth-child(3) {
  -webkit-animation-delay: -13.0909090909s;
          animation-delay: -13.0909090909s;
}
.word:nth-child(4) {
  -webkit-animation-delay: -11.6363636364s;
          animation-delay: -11.6363636364s;
}
.word:nth-child(5) {
  -webkit-animation-delay: -10.1818181818s;
          animation-delay: -10.1818181818s;
}
.word:nth-child(6) {
  -webkit-animation-delay: -8.7272727273s;
          animation-delay: -8.7272727273s;
}
.word:nth-child(7) {
  -webkit-animation-delay: -7.2727272727s;
          animation-delay: -7.2727272727s;
}
.word:nth-child(8) {
  -webkit-animation-delay: -5.8181818182s;
          animation-delay: -5.8181818182s;
}
.word:nth-child(9) {
  -webkit-animation-delay: -4.3636363636s;
          animation-delay: -4.3636363636s;
}
.word:nth-child(10) {
  -webkit-animation-delay: -2.9090909091s;
          animation-delay: -2.9090909091s;
}
@-webkit-keyframes word {
  0%, 5%, 100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%, 80% {
    filter: blur(1em);
    opacity: 0;
  }
}
@keyframes word {
  0%, 5%, 100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%, 80% {
    filter: blur(1em);
    opacity: 0;
  }
}