.hh-wrapper {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 2147483647;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hh-wrapper,
.hh-wrapper * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hh-imgs {
position: relative;
width: 50vmin;
height: 50vmin;
overflow: hidden;
cursor: pointer;
}
.hh-imgs img {
width: 50vmin;
height: 150vmin;
}
.hh-aha {
font-size: 5vmin;
position: absolute;
display: none;
transform: rotate(-10deg);
}
.hh-help {
font-size: 3vmin;
position: absolute;
top: 35%;
left: 70%;
}
.hh-imgs:active img {
animation: hit steps(2) 0.067s forwards;
}
.hh-imgs:active .hh-aha {
display: initial;
animation: aha 0.1s forwards;
}
.hh-imgs:active .hh-help {
display: none;
}
.hh-backup {
margin-top: 1em;
background: #3EB8FD;
border-radius: 10px;
border: 2px solid #FD5F8A;
padding: 0.5em;
}
.hh-backup a {
text-decoration: none;
}
.hh-backup span {
color: white;
}
.hh-exit {
background: #FD5F8A;
border-radius: 50%;
border: 2px solid #3EB8FD;
position: absolute;
right: 5%;
top: 5%;
width: 10vmin;
height: 10vmin;
color: white;
font-size: 5vmin;
display: table;
text-align: center;
}
.hh-exit-text {
display: table-cell;
vertical-align: middle;
}
@media only screen and (max-width: 600px) {
.hh-imgs {
width: 100vmin;
height: 100vmin;
}
.hh-imgs img {
width: 100vmin;
height: 300vmin;
}
.hh-aha {
font-size: 10vmin;
}
.hh-help {
font-size: 6vmin;
}
.hh-imgs:active img {
animation: hit-mobile steps(2) 0.067s forwards;
}
}
@keyframes hit {
to {
transform: translate(0, -100vmin);
}
}
@keyframes hit-mobile {
to {
transform: translate(0, -200vmin);
}
}
@keyframes aha {
from {
top: 30%;
left: 70%;
}
to {
top: 10%;
left: 65%;
}
}