body,
html {
    position: relative;
    height: 100%;

}

*,
*:before,
*:after {
    position: absolute;
}

.logo {
    top: 100%;
    width: 100%;
    left: 0%;
}

.screen {
    width: 530px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bike-screen {
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 130%;
    overflow: hidden;
}

.bike {
    bottom: 4px;
    left: 50%;
    width: 80px;
    height: 139px;
    margin-left: -40px;
    animation:
        bike-translate 7s ease-in-out infinite,
        bike-shake .5s linear infinite .75s;
    transform-origin: 50% 100%;
}

.left-handle,
.right-handle {
    top: 15px;
    width: 26px;
    height: 4px;
    border-radius: 1px;
    background: #000;
}

.left-handle {
    left: 0;
    transform: rotate(-20deg);
}

.right-handle {
    right: 0;
    transform: rotate(20deg);
}

.headlight {
    width: 26px;
    height: 26px;
    top: 0;
    left: 50%;
    margin-left: -13px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #000;
}

.headlight:before {
    content: '';
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #000;
}

.headlight:after {
    content: '';
    width: 100%;
    height: 3px;
    bottom: -2px;
    left: 0;
    border-radius: 1px;
    background: #000;
}

.left-suspension {
    width: 11px;
    height: 26px;
    top: 32px;
    left: 15px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAH0lEQVQIW2NkAAIWCYP/IBofYCSkAGYI8QqJsRZkKwCpfwUxsQUgTAAAAABJRU5ErkJggg==) repeat-y;
    background-size: 100% auto;
    background-position-y: 1px;
}

.left-suspension:before {
    content: '';
    width: 8px;
    height: 30px;
    bottom: 95%;
    left: 2px;
    border-radius: 1px;
    background: #fff;
    box-shadow: inset 0 0 1px 3px #000;
}

.left-suspension:after {
    content: '';
    width: 2px;
    height: 2px;
    top: 100%;
    left: 5px;
    box-shadow:
        -2px 0 1px #000,
        2px 0 1px #000;
}

.left-support {
    width: 11px;
    height: 48px;
    top: 60px;
    left: 15px;
    border-radius: 1px;
    background: #fff;
    box-shadow: inset 0 0 1px 3px #000;
}

.right-suspension {
    width: 11px;
    height: 26px;
    top: 32px;
    right: 15px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAH0lEQVQIW2NkAAIWCYP/IBofYCSkAGYI8QqJsRZkKwCpfwUxsQUgTAAAAABJRU5ErkJggg==) repeat-y;
    background-size: 100% auto;
    background-position-y: 1px;
}

.right-suspension:before {
    content: '';
    width: 8px;
    height: 30px;
    bottom: 95%;
    right: 2px;
    border-radius: 1px;
    background: #fff;
    box-shadow: inset 0 0 1px 3px #000;
}

.right-suspension:after {
    content: '';
    width: 2px;
    height: 2px;
    top: 100%;
    right: 4px;
    box-shadow:
        -2px 0 1px #000,
        2px 0 1px #000;
}

.right-support {
    width: 11px;
    height: 48px;
    top: 60px;
    right: 15px;
    border-radius: 1px;
    background: #fff;
    box-shadow: inset 0 0 1px 3px #000;
}

.body {
    top: 30px;
    left: 15px;
    border-top: 32px solid #000;
    border-right: 50px solid #000;
    border-left: 0px solid transparent;
    border-bottom: 5px solid transparent;
}

.wheel {
    overflow: hidden;
    width: 30px;
    height: 86px;
    bottom: 0;
    left: 25px;
    border-radius: 20px;
    box-shadow: inset 0 0 1px 3px #000;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAABKADAAQAAAABAAAABAAAAADXsdAcAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAAATElEQVQIHQ3IsQmAMBBA0X9nDAl2FpaCYzmJIzqFlWBhKUIMJJ6+8smyzgZG2nZqenBWCqJK00UQcPk48UNPmEbEt+ibM/W6kRj+8HxrKhWUoMI6FQAAAABJRU5ErkJggg==) repeat;
    background-size: 4px 4px;
}

.wheel:after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJklEQVQYV2NkgABjKI2LOstIhCKwZtooJNqNBPwBkQa5kSgwgAoBGPoCpNTsO2QAAAAASUVORK5CYII=) repeat;
    animation: wheel 1s linear infinite;
}

.road {
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 6px;
    background: #000000;
    animation: road 7s ease-in-out;
}

@keyframes wheel {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 100%
    }
}

@keyframes road {
    0% {
        width: 0%;
    }

    6% {
        width: 120%;
    }

    8% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

@keyframes bike-translate {
    0% {
        transform: translateY(100%)
    }

    6% {
        transform: translateY(-20%)
    }

    8% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes bike-shake {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(-2deg)
    }

    50% {
        transform: rotate(0)
    }

    75% {
        transform: rotate(2deg)
    }

    100% {
        transform: rotate(0)
    }
}

h1 {
    bottom: 20px;
    right: 20px;
    margin: 0;
    font-size: 20px;
    font-family: 'Oswald';
    color: #fff;
    text-align: right;
}