:root{
    --red:red;
    text-align: center;
    font-family: "mendl-sans-dusk", sans-serif;
    font-weight: bold;
}
#gach{
    display:flex;
    justify-content: center;
    position: relative;
}
#gachapon {
    width: 60vw;
    max-height:80vh;
    overflow: hidden;
}
#handle {
    position: absolute;
    top: 69%;
    max-height:6vh;
    width:17vw;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.05);}
    100% {transform: scale(1);}

}
#handle:hover  {
    animation-name: move;
    animation-duration: 3s;
    animation-iteration-count: 3;
}
@keyframes move{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
#capsules {
    display: flex;
    width:100%;
    justify-content: space-evenly
}
.ball {
    display: inline-block;
    border: solid black 2px;
    padding: 1em;
    min-width: 3em;
    max-width: 3em;
    min-height: 3em;
    max-height: 3em;
    border-radius: 50%;
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
}
.ball:hover {
    color: var(--red);
    border-color: var(--red);
    animation-name: pulse;
    animation-duration: .5s;
}
.long {
    font-size: .7em;
}
a, a:visited {
    color: unset;
    text-decoration: none;
}
footer{
    text-align: center;
    opacity: .5;
    font-size: .8rem;
    font-weight: lighter;
}