.top {
  background-color: rgb(191, 170, 48);   
  color: white;              
  padding: 10px 0;           
  text-align: left;        
  font-size: 5px;
  padding-left: 30px;
}
.back-button{
    color: white;
    font-size: 34px;
  padding: 12px 20px;
  text-decoration: none;
}
.animation{
     width: 250px;
    position: absolute;
    bottom: 110px;
    right: 20px;
    height: 200px;
    width: 200px;

}
.saffron{
    width: 600px;
    position: absolute;
    top: 120px;
    left: -80px;
}
.wrapper {
      max-width: 720px;
      margin: 0 auto;
    }

    .background {
      background-color: antiquewhite;
      border: 2px solid #d8dde6;
      border-radius: 16px;
      padding: 360px;
      box-shadow: 0 6px 18px rgba(0,0,0,.06); 
      top: 110px;
      left:10px;
      width: 500px;
      position: absolute;
      
    }
.characters {
    position: absolute;
    height: 780px;
    width: 400px;
    bottom: 16px;
    right: 585px;
}
.text {
  position: absolute;
  top: 40px;
  right:60px;
}
.text1 {
  position: absolute;
  bottom: 40px;
  right:70px;
}
.text2 {
  position: absolute;
  right: 80px;
  top: 180px;
}
.saffron-spells{
  position: absolute;
  top: 100px;
  right: 30px;
width: 950px;
  height: 300px;
}
.weapon{
  position: absolute;
  bottom: 10px;
  right: 30px;
}
.artifact {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 360px;
  width: 360px;
}
.textweapon{
position: absolute;
color: rgb(234, 185, 94);
right: 220px;
bottom: 170px;
}
.textartifact{
position: absolute;
color: rgb(234, 185, 94);
left: 100px;
bottom: 80px;
}
.heroes {
  position: absolute;
  bottom: 10px;
  height: 360px;
  width: 860px;
  left: 380px;
}