body{
  background-color: hotpink;
  color:greenyellow;
  font-size: 100px;
  overflow: hidden;

}





#outer{
    margin-right:10px;
    top:500px;
    animation-duration: 8s;
    animation-name: spinType;
    animation-iteration-count: infinite;
    position: absolute;
  }




@keyframes spinType {
  0% {
    transform: rotate(0deg);
  }



  100% {
    transform: rotate(360deg);
  }
}

.inner{
  margin-top:-600px;
  position:absolute;
  animation-duration: 8s;
  animation-name: spinType;
  animation-iteration-count: infinite;

}


@media screen and (max-width: 1024px){
body{background-color: hotpink}.inner{width:100%;text-align: center;}
#outer{width:100%;}
}



@media screen and (max-width: 768px){
body{background-color: gold}.inner{width:100%;text-align: center;margin-top:-255px}
#outer{width:100%;}
}


@media screen and (max-width: 480px){
body{background-color: lightskyblue}.inner{width:100%;text-align: center;}
#outer{width:100%;}
}


@media screen and (max-width: 320px){
body{background-color: lightpink}.inner{width:100%;text-align: center;}
#outer{width:100%;}
}