body{
background-image: url("https://nakar803.github.io/assets/imgs/entry4.png");
background-repeat: no-repeat;background-size:90%; background-color:lightcyan; font-family:"helvetica"; font-weight:bolder;
margin-top:565px; margin-left:275px}

h1{text-align: center;font-size: 85px; color:lightcyan;margin-top:-;}
h2{text-align: center; margin-top:;font-size: 50px; color:lightcyan}
h3{text-align: center; font-size: 65px;margin-top; color:lightcyan}
h4{text-align: center; font-size: 35px; margin-top:-; color:lightcyan;}



h1 {
  width: 175px;
  height: 175px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
margin-top:-100px
}

@keyframes example {
  0%   {background-color:lightpink; left:px; top:-px;right: }
  25%  {background-color:lightpink; left: ; top:-px;}
  50%  {background-color:lightpink; left:; top:;}
  75%  {background-color:lightpink; left:0px; top:;}
  100% {background-color:lightpink; left:0px; top:10px;}
}

h2 {
  width: 175px;
  height: 175px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  margin-left:200px; margin-top:-500px

}

@keyframes example {
  0%   {background-color:lightpink; left:; top:-100px;right: }
  25%  {background-color:lightpink; right:; top:-px;}
  50%  {background-color:lightpink; left:; top:;}
  75%  {background-color:lightpink; left:0px; top:;}
  100% {background-color:lightpink; left:0px; top:0px;}
}

h3 {
  width: 175px;
  height: 175px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  margin-left:400px; margin-top:-400px

}

@keyframes example {
  0%   {background-color:lightpink; left:; top:-500px;right: }
  25%  {background-color:lightpink; right:; top:-px;}
  50%  {background-color:lightpink; left:; top:;}
  75%  {background-color:lightpink; left:0px; top:;}
  100% {background-color:lightpink; left:0px; top:500px;}
}


h4 {
  width: 175px;
  height: 175px;
  background-color: hotpink;
  position: relative;
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  margin-left:600px; margin-top:100px

}

@keyframes example {
  0%   {background-color:lightpink; left:; top:-400px;right: }
  25%  {background-color:lightpink; right:; top:-px;}
  50%  {background-color:lightpink; left:; top:;}
  75%  {background-color:lightpink; left:0px; top:;}
  100% {background-color:lightpink; left:0px; top:200px;}
}


@media screen and (max-width: 1024px){body{background-color:gold}
h1{text-align: center;font-size: 65px; color:gold;margin-top:-;}
h2{text-align: center; margin-top:;font-size: 50px; color:gold}
h3{text-align: center; font-size:55px;margin-top; color:gold}
h4{text-align: center; font-size: 45px; margin-top:-; color:gold;}}
div{transform: scale(0.8) translate(-300px,400px); }


@media screen and (max-width: 768px){body{background-color:mistyrose}
h1{text-align: center;font-size: 85px; color:mistyrose;margin-top:-;}
h2{text-align: center; margin-top:;font-size: 50px; color:mistyrose}
h3{text-align: center; font-size: 65px;margin-top; color:mistyrose}
h4{text-align: center; font-size: 35px; margin-top:-; color:mistyrose;}
div{transform: scale(0.7) translate(-400px,200px);; }
}

@media screen and (max-width: 480px){body{background-color:crimson}
h1{text-align: center;font-size: 85px; color:crimson;margin-top:-;}
h2{text-align: center; margin-top:;font-size: 50px; color:crimson}
h3{text-align: center; font-size: 65px;margin-top; color:crimson}
h4{text-align: center; font-size: 35px; margin-top:-; color:crimson;}
div{transform: scale(0.6); }
}

@media screen and (max-width: 320px){body{background-color:sienna}
h1{text-align: center;font-size: 85px; color:sienna;margin-top:-;}
h2{text-align: center; margin-top:;font-size: 50px; color:sienna}
h3{text-align: center; font-size: 65px;margin-top; color:sienna}
h4{text-align: center; font-size: 35px; margin-top:-; color:sienna;}
div{transform: scale(0.3)  translate(-800px,-1000px); }
}
