/* Styles go here */
body {
  background-color: #000000;
}

div {
  width: 100%;
  height: 30%;
  border: 0px ;
}

#top {
  background-image: url(colorwater.gif);
  background-repeat: repeat;
  background-size: contain;

  transform: rotate(180deg);
  position: absolute;
  top: 0;
}


#middle {
    background-color: #000;
    width: 90%;
    height: 40%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#bottom {
  background-image: url(colorwater.gif);
  background-repeat: repeat;
  background-size: contain;

  transform: rotate(0deg);
  position: absolute;
  bottom: 0;
}

.cdlogo {
    width: 312;
    height: 216;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 400;
    margin: auto;
    animation: colorhue 3s infinite linear;
}

.mfcrrotate {
    width: 250;
    height: 250;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: -400;
    
    margin: auto;
    animation: rotation 6s infinite linear;
}

.mfcrlogo {
    width: 125;
    height: 125;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: -400;
    margin: auto;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes colorhue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(359deg);
  }
}