.ball {
pointer-events: none;
position: absolute;
border-radius: 50%;
-webkit-animation: implode 10s ease-in-out;
animation: implode 10s ease-in-out;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes implode {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
5%, 30% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}

@keyframes implode {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
5%, 30% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.frame, #wrap, html, body, .block-mobile {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}

* {
background-repeat: no-repeat;
}

body {
font-family: 'Mali', cursive;
background: url("https://kolejnykrok.absolwencinawalizkach.pl/wp-content/themes/kolejnykrok/img/home/background.png") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.perspective {
-webkit-perspective: 1800px;
perspective: 1800px;
-webkit-perspective-origin: 50% 10%;
perspective-origin: 50% 10%;
}

.preserve-3d {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

#avatar {
position: absolute;
-webkit-transform-origin: bottom;
transform-origin: bottom;
left: 0;
bottom: 0;
right: 9vw;
margin: auto;
width: 770px;
height: 890px;
z-index: 20;
}
#avatar div {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.body {
bottom: -40px;
left: 0;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.body .head {
top: -195px;
left: 138px;
}
.body .head img {
-webkit-transform: translateZ(15px);
transform: translateZ(15px);
}
.body .head .bun {
top: -70px;
left: 50px;
-webkit-transform: translateZ(-50px);
transform: translateZ(-50px);
}
.body .head .eyes {
top: 175px;
left: 97px;
-webkit-transform: translateZ(-5px);
transform: translateZ(-5px);
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}

.upperarm {
top: 188px;
right: -190px;
-webkit-transform: translateZ(40px);
transform: translateZ(40px);
-webkit-transform-origin: 75px 70px;
transform-origin: 75px 70px;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.upperarm .forearm {
bottom: -5px;
right: -5px;
-webkit-transform-origin: 70% 88%;
transform-origin: 70% 88%;
-webkit-transform: translateZ(15px) rotateX(-10deg);
transform: translateZ(15px) rotateX(-10deg);
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.upperarm .forearm .hand {
top: -202px;
left: -170px;
-webkit-transform-origin: 70% 90%;
transform-origin: 70% 90%;
-webkit-transform: translateZ(10px) rotateX(10deg);
transform: translateZ(10px) rotateX(10deg);
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.upperarm .forearm .hand .brush {
top: -165px;
left: 115px;
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: rotateX(-20deg) scale(1.1);
transform: rotateX(-20deg) scale(1.1);
}

.sig {
position: absolute;
text-align: center;
width: 100%;
bottom: 1vh;
color: #986d5b;
}

.block-mobile {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
color: #c43a30;
}

#wrap1, #wrap2, #wrap3, #wrap4{
font-size:27px;
font-weight:700;
padding:40px 15px;
background: rgba(255, 255, 255, 0.7);
position:absolute;
width:350px;
text-align:center;
text-transform: uppercase;
}

h1#wrap0, h2#wrap0{
color: #E85353;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

h1#wrap0{
font-size:35px;
padding-left:20px;
letter-spacing: 3px;
}

h2#wrap0{
font-size:25px;
padding-left:20px;
letter-spacing: 1px;
}

a body{
color:#7F006E;
}

#wrap0{
top:0;
left:50%;
}

#wrap1{
top:30%;
left:10%;
}

#wrap2{
top:30%;
right:10%;
}

#wrap3{
top:65%;
left:10%;
}

#wrap4{
top:65%;
right:10%;
}