Страница 404 html для сайта с музыкой

<div class="desubstituted">
  <div class="serenced">
  <p class="p">4</p>
  <span class="malenoug">  
  <div class="kadolanation">
  <div class="gavailable"></div>
  <div class="gavailable-r"></div>
  <div class="kidsam"></div>
  <div class="golalking"></div>
  <div class="golalking golalking-r"></div>
  <div class="gavoduseded"></div>
  <div class="subsokeuted"></div>
  <div class="subsokeuted subsokeuted2"></div>
  </div>
  </span>
  <p class="p">4</p>
   
  <div class="pacegavailable">
  <p class="pacegavailableg"> К сожалению, страница, которую вы ищете, исчезла </p>
  <button class="methingolas">Главная</button>
  </div>
</div>
  </div>

<iframe style="width:0;height:0;border:0; border:none;" scrolling="no" frameborder="no" allow="autoplay" src="http://zornet.ru/ABVUN/Anisa/2Vvu.mp3"></iframe>

body{
  background: #18042b;
  background-image: linear-gradient( 135deg, #18022b 10%, #26194e 100%);
  background-attachment: fixed;
  background-size: cover;

}

.serenced {
  width: 100%;
  height: auto;
  margin: 48px auto;
  text-align: center;
  margin-bottom: 0;
}

.malenoug{
  width: 227px;
  height: 298px;
  display: inline-block;
  margin: auto;
  overflowX: hidden;
}

.serenced .p {
  height: 100%;
  color: #baeaf7;
  font-size: 275px;
  margin: 38px;
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-family: 'Combo', cursive;
}

.kadolanation {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 9% auto 0;
animation: ani9 0.7s ease-in-out infinite alternate ;}

@keyframes ani9 {
  0%{
  transform: translateY(10px);  
  }
   
  100%{
  transform: translateY(30px);  
  }

}

.kadolanation > * {
  position: absolute;
  top: 0; left: 0;
}

.gavailable{
  top: -18px;
  width: 208px;
  height: 198px;
  background: #a3bbc1;
  border-radius: 0 49% 0 49%;
  transform: rotate(45deg);
  background: #2c224a;
}
.gavailable-r {
  left: 18px;
  width: 207px;
  height: 198px;
  background: #bcdce4;
  border-radius: 0 49% 0 49%;
  transform: rotate(45deg);
  background: #58439c;
}
.kidsam {
  width: 198px;
  height: 198px;
  background: #c4e9f3;
  border-radius: 0 49% 0 49%;
  transform: rotate(45deg);
}
.golalking {
  width: 20px; height:20px;
  background: #111113;
  border-radius: 50%;
  top: 15%; left: 11.5%;
  transition: .3s linear;
}
.golalking-r{left: 24%;}

.gavoduseded {
  width: 65px;
  height: 18px;
  background: #7b0724;
  top: 21%;
  left: 13%;
  border-radius: 53% / 0 0 100% 100%;
}
.gavoduseded::after{
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 12px solid #f7f6f9;
  left: 8px;
   
}
.gavoduseded::before{
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 12px solid #f7f6f9;
  left: 38px;
}

.subsokeuted {
  width: 8px;
  height: 15px;
  background: #840021;
  top: 22%; left: 16%;  
  border-radius: 18px;
}
.subsokeuted::after{
  width: 2px;
  height: 10px;
  background: #f7f6f9;
  top: 18%; left: 8%;  
  border-radius: 18px;
   
}
.subsokeuted2 {
  top: 23%; left: 20%;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(130deg);
  animation: subsokeuted 2s linear infinite;
  opacity: 0;
}
@keyframes subsokeuted {
  0% {opacity: 1;}  
  100% {background:red; opacity: 0; top:50%;}
   
}

.pacegavailable {transform: translateY(-50px);}

.serenced p.pacegavailableg {
  text-align: center;
  color: #c5e9f3;
  font-size: 25px;
  font-family: 'Combo', cursive;
  margin-bottom: 7px;
}
button.methingolas {
  font-size: 27px;
  font-family: 'Combo', cursive;
  border: none;
  padding: 9px 18px;
  cursor: pointer;
  transition: 0.5s linear;
  z-index: 9;
  border-radius: 7px;
  background: #9ad0de;
  color: #221940;
  box-shadow: 0 0 8px 0 #95b1b9;
  margin-top: 8px;
}
button:hover {
  box-shadow: 0 0 18px 0 #ddf4f9;
}