html, body {
  width: 70%;
  height: 70%;
  scale: .96;
  position: absolute;
  top:210px;
}
body {
    padding-top: 200px;
    background-size: 140vh;
background-image: url(Illustration2.png);
    margin: 0;
}
.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: 850px; 
  background-color: rgb(174, 175, 175);
  position: absolute;
  left:500px; bottom:240px;
  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: 570px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:600px; bottom:335px;
  border-radius: 8px;
}
.border {
  z-index: 2; 
  width: 680px;
  height: 150px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:625px; bottom:728px;
  border-radius: 8px; border: 3px solid #adadad;
}
.border2 {
  z-index: 2; 
  width: 680px;
  height: 150px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:625px; bottom:558px;
  border-radius: 8px; border: 3px solid #adadad;
}
.border3 {
  z-index: 2; 
  width: 680px;
  height: 150px;        
  background-color: rgb(230, 230, 230); 
  position: absolute;
  left:625px; bottom:385px;
  border-radius: 8px; border: 3px solid #adadad;
}
        /*.............................. text */
.text {
  z-index: 20; 
  width: 650px;
  height: 300px;        
  position: absolute;
  left:640px; bottom:755px;
}
.text2 {
  z-index: 20; 
  width: 650px;
  height: 300px;        
  position: absolute;
  left:640px; bottom:583px;
}
.text3 {
  z-index: 20; 
  width: 650px;
  height: 300px;        
  position: absolute;
  left:640px; bottom:408px;
}
.footertext {
  z-index: 20; 
  width: 650px;
  height: 300px;        
  position: absolute;
  left:640px; bottom:75px;
}
        /*................................... imgs */

.lace {
    z-index: 2; 
position: absolute;
width: 950px;
left:486px; bottom:160px;
}
.lace_border {
    z-index: 0; 
position: absolute;
width: 1250px;
left:315px; bottom:160px;
}
.lace_border2 {
    z-index: 0; 
position: absolute;
width: 1250px;
left:315px; bottom:480px;
}
.bow2 {
    z-index: 7; 
position: absolute;
width: 270px;
left:1300px; top:910px;
}
.circle {
    z-index: 8;
position: absolute;
width: 200;
left:1355px; top:923px;
}
.bow3 {
    z-index: 3; 
position: absolute;
width: 430px;
left:250px; top:850px;
}
         /* ..................................... 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); }
}

.info_button {
    z-index: 6; 
position: absolute;
width: 200px;
left:1020px; bottom:950px;
  transform: translateY(-5);
  transition: transform 0.1s ease-out;
}

.info_button:hover {
  transform:scale(1.028,1.028) translate3d(0,0,0);
}

@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);
}