/* 
CSS RESET
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 100%;
}

ul,
ol {
    list-style: none;
}

img,
video {
    width: 100%;
}

a {
    color:black;
    text-decoration: none;
}



/* 
STYLES
*/


.blurry-ellipse {
  position: absolute;
  border-radius: 50% / 40%;
  filter: blur(5rem);
  z-index: 1000;
}

.ellipse1 {
  width: 18.75rem;
  height: 9.5rem;
  background: rgba(255, 0, 200, 0.4);
  animation: moveEllipse1 12s ease-in-out infinite alternate;
}

.ellipse2 {
  width: 18rem;
  height: 12rem;
  background: rgb(23, 102, 124);
  animation: moveEllipse2 15s ease-in-out infinite alternate;
}

@keyframes moveEllipse1 {
  0% {
    top: 10%;
    left: 0%;
    transform: scale(1);
  }
  50% {
    top: 40%;
    left: 40%;
    transform: scale(1.2);
  }
  100% {
    top: 80%;
    left: 100%;
    transform: scale(1);
  }
}

@keyframes moveEllipse2 {
  0% {
    top: 70%;
    left: 100%;
    transform: scale(1);
  }
  50% {
    top: 30%;
    left: 50%;
    transform: scale(1.3) rotate(20deg);
  }
  100% {
    top: 0%;
    left: 0%;
    transform: scale(1);
  }
}