body {
    text-align: center;
    background-color: skyblue;
    font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif;
    width: 100%;
}

.moo {
    width: 1111px;
    text-align: left;
    display: inline-block;
}

/* fonts */
h1 {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.3999996185303px;
}
h3 {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 15.3999996185303px;
}
p {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}
blockquote {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
}
pre {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714302062988px;
}


.board {
	position: relative;
	width: 900px;
	height: 900px;
	background-color: #999;
}

.booger {
	position: absolute;
    width: 100px;
    height: 100px;
    margin: auto;
    background-size: 100px auto;
	background-position: center;
	background-repeat: no-repeat;
    cursor: pointer;
}

.current-player {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: auto;
    background-size: 100px auto;
    background-position: center;
    background-repeat: no-repeat;
}


.booger.green, .current-player.green {
	/*background-color: green; */
	background: url('../img/cow.png');
	background-size: 80% auto;
	background-position: center;
	background-repeat: no-repeat;

}

.booger.red, .current-player.red {
	/*background-color: lightsalmon; */
	background: url('../img/horse.png');
	background-size: 80% auto;
	background-position: center;
	background-repeat: no-repeat;
}

.spin {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.move-up {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}


.move-right {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-right;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-right;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-right;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-right;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}


.move-down {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-left {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-left;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-left;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-left;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-left;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-up-left {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up-left;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up-left;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up-left;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up-left;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-up-right {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up-right;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up-right;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up-right;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up-right;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-down-left {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down-left;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down-left;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down-left;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down-left;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-down-right {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down-right;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down-right;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down-right;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down-right;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}



.move-up-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}


.move-right-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-right-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-right-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-right-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-right-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}


.move-down-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-left-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-left-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-left-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-left-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-left-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-up-left-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up-left-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up-left-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up-left-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up-left-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-up-right-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-up-right-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-up-right-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-up-right-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-up-right-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-down-left-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down-left-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down-left-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down-left-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down-left-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}

.move-down-right-2x {
    /*margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;*/
    -webkit-animation-name: move-down-right-2x;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: move-down-right-2x;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: move-down-right-2x;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: move-down-right-2x;
    animation-duration: 1500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    z-index: 9001;
}



/** left */
@-ms-keyframes move-up {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(0,-50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(0,-100px, 0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-up {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(0, -50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(0, -100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-up {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(0,-50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(0,-100px,0) rotate(360deg) scale(1); }
}
@keyframes move-up {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(0,-50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(0,-100px,0) rotate(360deg) scale(1); }
}

/** right */
@-ms-keyframes move-right {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(50px,0,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(100px,0,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-right {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(50px,0,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(100px,0,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-right {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(50px,0,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(100px,0,0) rotate(360deg) scale(1); }
}
@keyframes move-right {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(50px,0,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(100px,0,0) rotate(360deg) scale(1); }
}

/** move down */

@-ms-keyframes move-down {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(0,50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(0,100px, 0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-down {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(0,50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(0,100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-down {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(0,50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(0,100px,0) rotate(360deg) scale(1); }
}
@keyframes move-down {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(0,50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(0,100px,0) rotate(360deg) scale(1); }
}

/** move left */
@-ms-keyframes move-left {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-50px,0,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(-100px,0,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-left {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-50px,0,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(-100px,0,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-left {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-50px,0,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(-100px,0,0) rotate(360deg) scale(1); }
}
@keyframes move-left {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-50px,0,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(-100px,0,0) rotate(360deg) scale(1); }
}

/** up-left */

@-ms-keyframes move-up-left {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-50px,-50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-up-left {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-50px,-50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-up-left {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-50px,-50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(1); }
}
@keyframes move-up-left {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-50px,-50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(-100px,-100px,0) rotate(360deg) scale(1); }
}

/** Up-right */
@-ms-keyframes move-up-right {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(50px,-50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(100px,-100px,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-up-right {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(50px,-50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(100px,-100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-up-right {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(50px,-50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(100px,-100px,0) rotate(360deg) scale(1); }
}
@keyframes move-up-right {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(50px,-50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(100px,-100px,0) rotate(360deg) scale(1); }
}


/** down right */
@-ms-keyframes move-down-right {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(50px,50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(100px,100px,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-down-right {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(50px,50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(100px,100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-down-right {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(50px,50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(100px,100px,0) rotate(360deg) scale(1); }
}
@keyframes move-down-right {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(50px,50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(100px,100px,0) rotate(360deg) scale(1); }
}

/** down-left */
@-ms-keyframes move-down-left {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-50px,50px,0) rotate(180deg) scale(2); }
    100% { -ms-transform: translate3d(-100px,100px,0) rotate(360deg) scale(1); }
}
@-moz-keyframes move-down-left {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-50px,50px,0) rotate(180deg) scale(2); }
    100% { -moz-transform: translate3d(-100px,100px,0) rotate(360deg) scale(1); }
}
@-webkit-keyframes move-down-left {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-50px,50px,0) rotate(180deg) scale(2); }
    100% { -webkit-transform: translate3d(-100px,100px,0) rotate(360deg) scale(1); }
}
@keyframes move-down-left {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-50px,50px,0) rotate(180deg) scale(2); }
    100% { transform: translate3d(-100px,100px,0) rotate(360deg) scale(1); }
}


/** left 2x */
@-ms-keyframes move-up-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(0,-100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(0,-200px, 0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-up-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(0, -100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(0, -200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-up-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(0,-100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(0,-200px,0) rotate(720deg) scale(1); }
}
@keyframes move-up-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(0,-100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(0,-200px,0) rotate(720deg) scale(1); }
}

/** right 2x */
@-ms-keyframes move-right-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(100px,0,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(200px,0,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-right-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(100px,0,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(200px,0,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-right-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(100px,0,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(200px,0,0) rotate(720deg) scale(1); }
}
@keyframes move-right-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(100px,0,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(200px,0,0) rotate(720deg) scale(1); }
}

/** move down 2x */

@-ms-keyframes move-down-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(0,100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(0,200px, 0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-down-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(0,100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(0,200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-down-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(0,100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(0,200px,0) rotate(720deg) scale(1); }
}
@keyframes move-down-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(0,100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(0,200px,0) rotate(720deg) scale(1); }
}

/** move left 2x */
@-ms-keyframes move-left-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-100px,0,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(-200px,0,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-left-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-100px,0,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(-200px,0,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-left-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-100px,0,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(-200px,0,0) rotate(720deg) scale(1); }
}
@keyframes move-left-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-100px,0,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(-200px,0,0) rotate(720deg) scale(1); }
}

/** up-left 2x */

@-ms-keyframes move-up-left-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(-200px,-200px,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-up-left-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(-200px,-200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-up-left-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-100px,-100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(-200px,-200px,0) rotate(720deg) scale(1); }
}
@keyframes move-up-left-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-100px,-100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(-200px,-200px,0) rotate(720deg) scale(1); }
}

/** Up-right 2x */
@-ms-keyframes move-up-right-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(100px,-100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(200px,-200px,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-up-right-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(100px,-100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(200px,-200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-up-right-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(100px,-100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(200px,-200px,0) rotate(720deg) scale(1); }
}
@keyframes move-up-right-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(100px,-100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(200px,-200px,0) rotate(720deg) scale(1); }
}


/** down right 2x */
@-ms-keyframes move-down-right-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(100px,100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(200px,200px,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-down-right-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(100px,100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(200px,200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-down-right-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(100px,100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(200px,200px,0) rotate(720deg) scale(1); }
}
@keyframes move-down-right-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(100px,100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(200px,200px,0) rotate(720deg) scale(1); }
}

/** down-left 2x */
@-ms-keyframes move-down-left-2x {
    0% { -ms-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -ms-transform: translate3d(-100px,100px,0) rotate(360deg) scale(2); }
    100% { -ms-transform: translate3d(-200px,200px,0) rotate(720deg) scale(1); }
}
@-moz-keyframes move-down-left-2x {
    0% { -moz-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -moz-transform: translate3d(-100px,100px,0) rotate(360deg) scale(2); }
    100% { -moz-transform: translate3d(-200px,200px,0) rotate(720deg) scale(1); }
}
@-webkit-keyframes move-down-left-2x {
    0% { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { -webkit-transform: translate3d(-100px,100px,0) rotate(360deg) scale(2); }
    100% { -webkit-transform: translate3d(-200px,200px,0) rotate(720deg) scale(1); }
}
@keyframes move-down-left-2x {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-100px,100px,0) rotate(360deg) scale(2); }
    100% { transform: translate3d(-200px,200px,0) rotate(720deg) scale(1); }
}

/*
.booger:before {
    height: 0;
    width: 40px;
    content: "";
    position: absolute;
    border-bottom: 30px solid #f7f7f7;
    border-left: 30px solid #666;
    border-right: 30px solid #666;
    border-radius: 50%;
}

.booger:after {
    height: 0;
    width: 40px;
    content: "";
    position: absolute;
    border-top: 30px solid #f7f7f7;
    border-left: 30px solid #666;
    border-right: 30px solid #666;
    border-radius: 50%;
    margin: 70px 0 0 0;
}*/


@keyframes jiggle {
    0% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(1deg);
    }
}

.booger.selected {
	animation: jiggle 0.2s infinite;
    -webkit-animation: jiggle 0.2s infinite;
    -moz-animation-duration: 0.2s;
    -moz-animation-name: jiggle;
    -moz-animation-iteration-count: infinite;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(1deg);
    }
}

@-moz-keyframes jiggle {
    0% {
        -moz-transform: rotate(-1deg);
    }
    50% {
        -moz-transform: rotate(1deg);
    }
}

.board {
    border: 1px solid black;
    display: inline-block;
}

.tile {
	display: inline-block;
	width: 98px;
	height: 98px;
	border: 1px solid black;
}

/* css pattern taken from http://lea.verou.me/css3patterns/#cicada-stripes */
.tile:nth-child(even) {
	background-color: forestgreen; /* #026873; */
    background-image: linear-gradient(180deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(180deg, transparent 50%, rgba(255,255,255,.19) 50%);
    background-size: 13px, 29px, 37px, 53px;
}

.tile:nth-child(odd) {
    background-color: saddlebrown; /*darkslategrey; /* seagreen */; /* #026873; */
    background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
    background-size: 13px, 29px, 37px, 53px;
}



.tile:hover, .booger:hover {
	background-color: #cfcfcf;
}

.tile:hover {
    background-color: #cfcfcf;
}

.booger.moving:hover {
    background-color: transparent;
}

.seigaiha {
    background-color: darkmajenta;
    background-image:
    radial-gradient(circle at 100% 150%, darkmagenta 24%, white 25%, white 28%, darkmagenta 29%, darkmagenta 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(circle at 0    150%, darkmagenta 24%, white 25%, white 28%, darkmagenta 29%, darkmagenta 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(circle at 50%  100%, white 10%, darkmagenta 11%, darkmagenta 23%, white 24%, white 30%, darkmagenta 31%, darkmagenta 43%, white 44%, white 50%, darkmagenta 51%, darkmagenta 63%, white 64%, white 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, white 5%, darkmagenta 6%, darkmagenta 15%, white 16%, white 20%, darkmagenta 21%, darkmagenta 30%, white 31%, white 35%, darkmagenta 36%, darkmagenta 45%, white 46%, white 49%, transparent 50%, transparent),
    radial-gradient(circle at 0    50%, white 5%, darkmagenta 6%, darkmagenta 15%, white 16%, white 20%, darkmagenta 21%, darkmagenta 30%, white 31%, white 35%, darkmagenta 36%, darkmagenta 45%, white 46%, white 49%, transparent 50%, transparent);
    background-size:100px 50px;
}

#game {
    display: inline-block;
}

.info-block {
    width: 200px;
    border: 2px solid #222;
    border-radius: 5px;
    display: inline-block;
    overflow: hidden;
}

.hidden {
    display: none;
}

.info-block .header {
    padding: 5px;
    font-size: 15pt;
    width: 100%;
    background-color: #999;
    color: #fff;
    border-bottom: 1px solid #222;
}

.info-block .body {
    padding: 5px;
    color: #222;
    background-color: aliceblue;
    text-align: center;
}

.moo > div {
    vertical-align: top;
}


.game-info {
    position: absolute;
    background-color: aliceblue;
    padding: 15px;
    width: 350px;
    height: 500px;
    left: 50%;
    top: 30px;
    margin-left: -150px;
    z-index: 9001;
    border: 3px solid darkmagenta;
    border-radius: 6px;
}

.game-info .header {
    text-align: center;
}

.game-info .content {
    padding: 15px;
}

#win-screen .content {
    text-align: center;
}

.close-btn, .restart-btn {
    height: 20px;
    padding: 15px;
    border: 2px solid darkmagenta;
    border-radius: 3px;
    text-align: center;
    background-color: lightskyblue;
    cursor: pointer;
}

.close-btn:hover {
    background-color: yellowgreen;
}