html, body {
  width: 70%;
  height: 70%;
  scale: .96;
  position: absolute;
  top:210px;
}
body {
    padding-top: 200px;
    background-size: 140vh;
background-image: url(Illustration2.png);
  font-family: 'MyCustomFont';
    margin: 0;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('Punk\ Typewriter.otf') format('opentype');
}
.whole {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .65s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
        /*.............................. boxes */
.color-box {
  z-index: 1; 
  width: 900px; 
  height: 600px; 
  background-color: rgb(174, 175, 175);
  position: absolute;
  left:500px; bottom:490px;
  border-radius: 15px; border: 5px solid #808080;
}
.usernamebox {
  z-index: 1; 
  width: 450px;         
  height: 120px;
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:540px; bottom:945px;
  border-radius: 8px;
}
    .username {
     z-index: 1; 
     width: 450px;         
     height: 150px;
     position: absolute;
     left:560px; bottom:920px;
}
.textbox {
  z-index: 1; 
  width: 750px;
  height: 350px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:600px; bottom:520px;
  border-radius: 8px;
}
.border {
  z-index: 2; 
  width: 320px;
  height: 182px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:635px; bottom:555px;
  border-radius: 8px; border: 3px solid #adadad;
}
.border2 {
  z-index: 2; 
  width: 320px;
  height: 182px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:980px; bottom:555px;
  border-radius: 8px; border: 3px solid #adadad;
}
        /*.............................. text */
 .introtext {
  z-index: 20; 
  width: 400px;
  height: 300px;        
  position: absolute;
  left:630px; bottom:753px;
}

 .quote {
  z-index: 20; 
  width: 1000px;
  height: 300px;        
  position: absolute;
  left:630px; bottom:700px;
}

 .header1 {
  z-index: 20; 
  width: 290px;
  height: 300px;        
  position: absolute;
  left:655px; bottom:620px;
}
 .header2 {
  z-index: 20; 
  width: 290px;
  height: 300px;        
  position: absolute;
  left:1000px; bottom:620px;
}

 .text {
  z-index: 20; 
  width: 310px;
  height: 300px;        
  position: absolute;
  left:648px; bottom:570px;
}
.text2 {
  z-index: 20; 
  width: 310px;
  height: 300px;        
  position: absolute;
  left:994px; bottom:570px;
}
        /*................................... imgs */
.bow {
    z-index: 3; 
position: absolute;
width: 450px;
left:640px; bottom:50px;
}
.cross {
    z-index: 4; 
position: absolute;
width: 400px;
left:720px; bottom:220px;
}
.lace {
    z-index: 2; 
position: absolute;
width: 900px;
left:503px; bottom:370px;
}
.lace_border {
    z-index: 0; 
position: absolute;
width: 1250px;
left:320px; bottom:470px;
}
.bow2 {
    z-index: 7; 
position: absolute;
width: 270px;
left:1300px; bottom:280px;
}
.circle {
    z-index: 8;
position: absolute;
width: 200;
left:1350px; bottom:430px;
}
.heart {
    z-index: 9; 
position: absolute;
width: 220px;
left:1300px; bottom:310px;
}
.bow3 {
    z-index: 3; 
position: absolute;
width: 430px;
left:250px; bottom:200px;
}

         /* ..................................... buttons */
.bone_button_1 {
    z-index: 6; 
position: absolute;
width: 400px;
left:1520px; bottom:700px;
  transform: translateY(-5);
  transition: transform 0.1s ease-out;
}

.bone_button_1:hover {
  /* Move the image upwards by 10 pixels on hover */
  transform: translateY(-5px);
}
.bone_button_2 {
    z-index: 6; 
position: absolute;
width: 400px;
left:1520px; bottom:490px;
  transform: translateY(-5);
  transition: transform 0.1s ease-out;
}
.bone_button_1:hover {
  animation: bounce 0.7s;
  display: inline-block;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  12.5% { transform: translateY(-6px) rotateY(-10deg); }
  37.5% { transform: translateY(5px) rotateY(7deg); }
  62.5% { transform: translateY(-3px) rotateY(-5deg); }
  87.5% { transform: translateY(2px) rotateY(2deg); }
  100% { transform: translateY(0); }
}
.bone_button_2:hover {
  animation: bounce 0.7s;
  display: inline-block;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  12.5% { transform: translateY(-5px) rotateY(-10deg); }
  37.5% { transform: translateY(4px) rotateY(7deg); }
  62.5% { transform: translateY(-3px) rotateY(-5deg); }
  87.5% { transform: translateY(2px) rotateY(2deg); }
  100% { transform: translateY(0); }
}
        /*........................................... art imgs */
.coinin {
    z-index: 6; 
position: absolute;
width: 330px;
left:270px; bottom:100px;
}
.coinin:hover {
  animation: bounce 0.7s;
  display: inline-block;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  12.5% { transform: translateY(-5px) rotateY(-10deg); }
  37.5% { transform: translateY(4px) rotateY(7deg); }
  62.5% { transform: translateY(-3px) rotateY(-5deg); }
  87.5% { transform: translateY(2px) rotateY(2deg); }
  100% { transform: translateY(0); }
}
.ellisframe {
    z-index: 7; 
position: absolute;
width: 475px;
left:1170px; bottom:885px;
transform: rotate(15deg);
}

.acielchibi {
    z-index: 7; 
position: absolute;
width: 230px;
left:1020px; bottom:850px;
}