.conbg {
  width: 100%;
  height: 500px;
}
.bg2 {
  z-index: 2;
  position: relative;
  width: 70%;
  margin: 100px auto;
  transform: rotate(10deg);
  background-image: url(https://images.unsplash.com/photo-1623691183627-4d6075a8d0d7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzUwNDk&ixlib=rb-4.0.3&q=80);
  background-size: cover;
  background-position: right -50px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg1 {
  z-index: 3;
  position: relative;
  margin: auto;
  transform: rotate(-5deg);
  background-image: url(https://images.unsplash.com/photo-1575419268007-a9a5e6b1ce0b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzQ5NjY&ixlib=rb-4.0.3&q=80);
  background-size: cover;
  background-position: right -70px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg {
  z-index: 4;
  position: relative;
  margin: auto;
  transform: rotate(-5deg);
  height: 500px;
  background-image: url(https://images.unsplash.com/photo-1630534658718-395efda906cb?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzUxMDA&ixlib=rb-4.0.3&q=80);
  background-size: cover;
  background-position: right -50px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg-text {
  width: 100%;
  position: absolute;
  display: inline-block;
  bottom: 0;
  left: 0;
}
.bg-text a {
  margin: 5px;
  float: right;
}

#bg1:target .bg {
  -webkit-animation: ciut 1s forwards;
          animation: ciut 1s forwards;
}
#bg1:target {
  -webkit-animation: fre 0.3s forwards;
          animation: fre 0.3s forwards;
}
#bg2:target .bg1 {
  -webkit-animation: ciut 1s forwards;
          animation: ciut 1s forwards;
}
#bg2:target {
  -webkit-animation: fre1 0.3s forwards;
          animation: fre1 0.3s forwards;
}
#conbg:target .bg2 {
  -webkit-animation: ciut1 1s;
          animation: ciut1 1s;
}
@-webkit-keyframes fre1 {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes fre1 {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes fre {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes fre {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes ciut {
  0% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0);
  }
}
@keyframes ciut {
  0% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0);
  }
}
@-webkit-keyframes ciut1 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(370deg) scale(1);
  }
}
@keyframes ciut1 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(370deg) scale(1);
  }
}