a {
  color: white;
}
a:link {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  cursor: pointer;
}
a:focus {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}

.x-background {
  background-color: black;
  z-index: -99;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  height: calc(100% + 40px);
  position: fixed;
  left: 0px;
  top: 0px;
  overflow: hidden;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: white;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 0px rgb(26, 1, 117), 0px 1px 0px black, 1px 0px 0px rgb(26, 1, 117),
    1px 1px 0px rgb(26, 1, 117);
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: middle;
}

#sites {
  font-size: 14px;
}

#contact {
  flex: 0;
  font-size: 12px;
  padding-bottom: 10px;
  height: calc(0% + 40px);
}

#content {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
}

#contact,
#content {
  font-family: "cardo-1", "cardo-2", "Palatino Linotype", Palatino, Palladio,
    "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style",
    "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond",
    "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook",
    "Century Schoolbook L", Georgia, serif;
  font-weight: 100;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}

#name {
  font-family: "vinila-condensed", sans-serif;
  font-weight: 100;
  font-style: italic;
  font-size: 70px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}






.background {
  position: fixed;
  z-index: -999;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
        45deg,
        rgb(26, 1, 117) 0%,
        rgba(225, 5, 34, 0) 70%
      )
      repeat scroll 0% 0%,
    linear-gradient(135deg, rgb(225, 5, 152) 10%, rgba(49, 5, 209, 0) 80%)
      repeat scroll 0% 0%,
    linear-gradient(
        225deg,
        hsla(179, 81%, 45%, 1) 10%,
        rgba(10, 219, 216, 0) 80%
      )
      repeat scroll 0% 0%,
    rgba(0, 0, 0, 0)
      linear-gradient(315deg, rgb(189, 5, 245) 100%, rgba(9, 245, 5, 0) 70%)
      repeat scroll 0% 0%;
}

/* Keyframe Animations */
@keyframes floatCircular {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(40vw, 30vh) rotate(90deg);
  }
  50% {
    transform: translate(0, 60vh) rotate(180deg);
  }
  75% {
    transform: translate(-40vw, 30vh) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes slideHorizontal {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(60vw) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes floatVertical {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-50vh) rotate(120deg);
  }
  66% {
    transform: translateY(50vh) rotate(240deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

/* Shapes */
.background .shape {
  filter: blur(300px);
  position: fixed;
}

.background .shape:nth-child(1) {
  background-color: #ffb0d8;
  top: 5vh;
  left: 45vw;
  width: 25vw;
  height: 25vw;
  animation: floatCircular 20s ease-in-out infinite;
}

.background .shape:nth-child(2) {
  left: 8vw;
  bottom: 5vh;
  background-color: #c26cf3;
  width: 18vw;
  height: 20vw;
  animation: slideHorizontal 15s ease-in-out infinite;
}

.background .shape:nth-child(3) {
  background-color: #87cfdf;
  bottom: 5vh;
  right: 8vw;
  width: 25vw;
  height: 25vw;
  animation: floatVertical 18s ease-in-out infinite;
}