* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;

    background: rgb(122,188,255);
    background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
}

#happyGary {
    position: absolute;
    width: 100%; height: 25vw;
    top: calc(50vh - 27vw / 2 - 3vw);
    padding-top: 2vw;

    font-family: Roboto, Arial;
    font-size: 20vw;
    text-align: center;
    animation: happyGary 1.2s infinite steps(2);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

#garyMusic {
    position: absolute;
    left: 10px; top: 10px;
    z-index: 10000;
}

@keyframes happyGary {
    0% { transform: translate(0, 0); }

    24.9999% { transform: translate(0, 0); }
    25% { transform: translate(-0.5vw, 2vw); }

    49.9999% { transform: translate(0, 0); }
    50% { transform: translate(0, 0) scaleX(-1); }

    74.9999% { transform: translate(0, 0) scaleX(-1); }
    75% { transform: translate(0.5vw, 2vw) scaleX(-1); }

    99.9999% { transform: translate(0, 0) scaleX(-1); }
    100% { transform: translate(0, 0); }
}