*{
margin: 0px;
padding: 0px;
}
body{
background-color: blueviolet;
animation-name: salar;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@keyframes salar{
  0% {
    background-color: blueviolet;
  }
  20% {
    background-color: hotpink;
  }
  37% {
    background-color: rgb(7, 148, 127);
  }
  50% {
    background-color: green;
  }
  62% {
    background-color: red;
  }
  85% {
    background-color: yellow;
  }
  100% {
    box-shadow: 0 0 0px blue;
  }
}
.box1{
    width: 12vw;
    border: 1px solid red;
    background-color: black;
    height: 10vh;
}
.box1:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box2{
    width: 12vw;
    border: 1px solid red;
    background-color: black;
    height: 10vh;
}
.box2:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box3{
    width: 12vw;
    border: 1px solid red;
    background-color: black;
    height: 15vh;
}
.box3:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box4{
    width: 12vw;
    border: 1px solid red;
    background-color: black;
    height: 20vh;
}
.box4:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box5{
    width: 24vw;
    border: 1px solid red;
    background-color: black;
    height: 20vh;
}
.box5:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box6{
    width: 24vw;
    border: 1px solid red;
    background-color: black;
    height: 20vh;
}
.box6:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box7{
    width: 24vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box7:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box8{
    width: 24vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box8:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.level{
    width: 18vw;
    height: 18vh;
    margin: 10px;
    background-color: blueviolet;
    color: rgb(122, 166, 255);
font-size: 29px;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
border: 4px solid wheat;
}
.box12{
    width: 36vw;
    border: 1px solid red;
    background-color: black;
    height: 40vh;
}
.box12:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box11{
    width: 36vw;
    border: 1px solid red;
    background-color: black;
    height: 40vh;
}
.box11:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 800px){
.level:hover{
    width: 18vw;
    height: 18vh;
    margin: 10px;
    background-color: rgb(156, 62, 245);
    color: rgb(17, 4, 255);
font-size: 32px;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
border: 6px solid rgb(0, 0, 0);
box-shadow: 20px 20px 20px black;
}
.box9{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 20vh;
}
.box9:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box10{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 24vh;
}
.box10:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box12{
    width: 36vw;
    border: 1px solid red;
    background-color: black;
    height: 40vh;
}
.box12:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box11{
    width: 36vw;
    border: 1px solid red;
    background-color: black;
    height: 40vh;
}
.box11:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
}

.box9{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 25vh;
}
.box9:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box10{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 28vh;
}
.box10:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 800px){
    .box12{
    width: 54vw;
    border: 1px solid red;
    background-color: black;
    height: 43vh;
}
.box12:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box11{
    width: 54vw;
    border: 1px solid red;
    background-color: black;
    height: 43vh;
}
.box11:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

 .box1{
    width: 15vw;
    border: 1px solid red;
    background-color: black;
    height: 10vh;
}
 .box2{
    width: 15vw;
    border: 1px solid red;
    background-color: black;
    height: 10vh;
}
.box3{
    width: 20vw;
    border: 1px solid red;
    background-color: black;
    height: 15vh;
}
 .box4{
    width: 20vw;
    border: 1px solid red;
    background-color: black;
    height: 15vh;
}
.level{
    width: 20vw;
    height: 15vh;
    margin: 10px;
}
.box7{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box7:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box8{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box8:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box9{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box9:active{
    background-image: url(download.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.box10{
    width: 33vw;
    border: 1px solid red;
    background-color: black;
    height: 30vh;
}
.box10:active{
    background-image: url(images.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
}