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

        /*.............................. text */
.text {
  z-index: 20; 
  width: 300px;
  height: 100px;        
  position: absolute;
left:950px; bottom:930px;
}
.text2 {
  z-index: 20; 
  width: 350px;
  height: 100px;        
  position: absolute;
left:605px; bottom:930px;
}
.status {
  z-index: 20; 
  width: 300px;
  height: 100px;        
  position: absolute;
left:1245px; 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 {
  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 {
    z-index: 6; 
position: absolute;
width: 400px;
left:1520px; bottom:490px;
  transform: translateY(-5);
  transition: transform 0.1s ease-out;
}

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

.tos_button {
    z-index: 6; 
position: absolute;
width: 150px;
left:1240px; bottom:720px;
  transform: translateY(-5);
  transition: transform 0.1s ease-out;
}

.tos_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); }
}
.info_button {
    z-index: 6; 
position: absolute;
width: 150px;
left:1240px; bottom:820px;
  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);
}
.commsheet {
    z-index: 50; 
position: absolute;
width: 670px;
left:567px; bottom:565px;
}

.commsheet:hover {
    opacity:0;
}
.commsheetgif {
    z-index: 50; 
position: absolute;
width: 670px;
left:567px; bottom:565px;
transition:transform 1.25s ease-out;
opacity:0;
}

.commsheetgif:hover {
    -webkit-transform:scale(1.9); 
    transform:scale(1.9);
    opacity:1;
}