body {
    font-size: 14pt;
}
#game_tagline {
    font-family:cursive;
    color: white;
}
#event_text {
    font-family: cursive;
    font-size: .8em;
    
}
#display_region {
    position: relative;
}
.obj {
    box-sizing: border-box;
    position: absolute;
}
#display_area {
    position: absolute;
    background-color: green;
    border: 1px solid silver;
    top: 0px;
    left: -10px;
    width: 100vw;
    height: 100px;
}
#sidewalk2 {
    background-color: silver;
    top: 25%;
    left: 0px;
    width: 100vw;
    height: 9vw;
}
#dog2 {
    top: 15%;
    left: 35%;
    width: 10vw;
    height: 10vw;
    animation: dogkick 4s linear infinite;
}
#dog_img {
    width: 100%;
    height: 100%;
}
@keyframes dogkick {
    0% {
        transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-30deg);
    }
    30% {
        transform: rotateZ(0deg);
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(0px);
    }
    70% {
        transform: translateY(-15px);
    }
}
#ball {
    border: 1px solid transparent;
    border-radius: 100%;
    background-color: green;
    background-color: transparent;
    top: 7vw;
    left: 44.5%;
    width: 4vw;
    height: 4vw;
    animation: ball_roll 4s ease-out infinite;
}
#ball_img {
    width: 100%;
    height: 100%;
    background-color: transparent;
    filter: drop-shadow(0px 0px 1px white);
}
@keyframes ball_roll {
    0% {
/*        transform: translateX(0vw) rotateZ(-360deg);*/
        transform: translateX(0vw) rotateZ(-360deg);
    }
    25% {
        transform: translateX(8vw) rotateZ(0deg);
    }
}

#flake_ball {
    top: 7vw;
    left: 44.5%;
    width: 4vw;
    height: 4vw;
    animation: ball_roll 4s linear infinite;
}
.flake {
    width: 5vw;
    height: 1px;
    border-width: 1px;
    position: relative;
    box-sizing: border-box;
    border-radius: 25%;
}
.line1 {
    border-top: 1px solid #e0ffff;
    border-bottom: 1px solid #e0ffff;
    background-color: #e0ffff;
    transform: 
        translateX(0px)
        translateY(3px)
        rotate(30deg); 
}
.line2 {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: white;
    transform: 
        translateX(0px)
        translateY(1px)
        rotate(-30deg);
}
.line3 {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f0f0f0;
    transform: 
        translateX(1px)
        rotate(-90deg);
    width: 4.75vw;
}

#sidewalk_box1 {
    left: 0vw;
}
#sidewalk_box2 {
    left: 20vw;
}
#sidewalk_box3 {
    left: 40vw;
}
#sidewalk_box4 {
    left: 60vw;
}
#sidewalk_box5 {
    left: 80vw;
}
.walkbox {
    border-left: 1px solid gray;
    top: 23%;
    width: 2vw;
    height: 10.3vw;
    animation: walkway_move 4s linear infinite;
}
@keyframes walkway_move {
    0% {
        transform: translateX(20vw) rotateZ(30deg);
    }
    100% {
        transform: translateX(0vw) rotateZ(30deg);
    }
}