body{
  margin: 0;
}
#flex-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  background: #f9c8dd;  /* fallback for old browsers */
  background: rgb(249,200,221);
  background: radial-gradient(circle, rgba(249,200,221,1) 0%, rgba(155,174,246,1) 100%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: #fff;

}
* {
  animation: show 0.3s ease-in-out;
}
@keyframes show{
  from {
    opacity: 90%;
  }
  to {
    opacity: 100%;
  }
}
#ip-data {
  min-width: 100vw;
  max-width: 500px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
}

#data:hover {
  color: black;
}


#data {
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
  text-shadow: 1px 1px 10px lightblue;
  color: #fff;
}

#text:hover {
  color: black;
}

#text {

  font-family: "Courier New", Courier, monospace;
  font-size: 50px;
  font-weight: 100;
  color: #fff;
}
#surfer-container {
  width: 350px;
  margin: 0 auto;
}
#surfer {
  height: 5px;
  width: 25px;
  position: relative;
  left: 0px;
  background-color: #fff;
  animation: 5s infinite alternate surf ease-in-out;
}
#circle-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 15px auto;
}
.circle {
  background: #03A9F4;
  height: 50%;
  width: 50%;
  margin: 0 auto;
  border-radius: 50%;
}
#c1 {
  animation: 2s infinite movec1 ease-in-out, blink infinite 2s;
}
#c2 {
  animation: 2s infinite movec2 ease-in-out, blink infinite 2s;
}
@keyframes blink {
  0% {
      opacity: 30%;
  }
  50% {
      opacity: 100%;
  }
  100% {
    opacity: 30%;
  }
}
@keyframes surf {
  from {
    transform: translateX(-110px);
  }
  to {
    transform: translateX(440px);
  }
}
@keyframes movec1 {
  33% {
    transform: translateX(-30px);
  }
  66% {
    transform: translateX(-30px);
    transform: translateY(30px);
  }
  99% {
    transform: translateX(0px);
  }
}
@keyframes movec2 {
  33% {
    transform: translateX(30px);
  }
  66% {
    transform: translateX(30px);
    transform: translateY(-30px);
  }
  99% {
    transform: translateX(0px);
  }
}
@media screen and (max-width:607px) {
  #surfer {
    display: none;
  }
}