* {
    margin: 0;
    padding: 0;
}
html, body, #bounce-canvas {
    width: 100%;
    height: 100%;
    overflow: hidden;   /* no scrollbar */
}
body {
    font-family: Helvetica, Arial;
    font-size: 0.95em;
    background-color: rgb(16, 16, 16);
}
canvas {
    -webkit-box-shadow: 0px 0px 1px 1px rgb(50, 50, 50);
            box-shadow: 0px 0px 1px 1px rgb(50, 50, 50);
}

#bounce {
    font-size: 1.75em;
    font-weight: bold;
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
}
#description div {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 3px;
    text-shadow: 0px 0px 0.25px rgb(0, 0, 0);
}
#start-menu, #end-menu, #center {
    border-radius: 8px;
}
#start-menu, #end-menu {
    padding: 12px 18px;
    text-align: center;

    background-color: rgba(47, 142, 204, 0.9);
    /* background-color: rgba(3, 120, 188, 0.9); */
}
#end-menu {
    display: none;
    min-width: 250px;
}
#scores {
    width: 100%;
}
#center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    text-align: center;

    -webkit-box-shadow: 0px 0px 6px 1px rgb(47, 142, 204);
            box-shadow: 0px 0px 6px 1px rgb(47, 142, 204);
}
#more {
    position: fixed;
    top: 0;
    left: 0;
    padding: 4px 8px;

    color: rgb(235, 251, 255);
    background-color: rgba(40, 40, 40, 0.75);
    border-bottom-right-radius: 6px;

    -webkit-box-shadow: 0px 0px 6px 1px rgb(128, 128, 128);
            box-shadow: 0px 0px 6px 1px rgb(128, 128, 128);
}
#bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 4px 8px;

    font-size: 0.96em;
    color: rgb(235, 251, 255);
    background-color: rgba(40, 40, 40, 0.75);
    border-top-left-radius: 6px;

    -webkit-box-shadow: 0px 0px 6px 1px rgb(128, 128, 128);
            box-shadow: 0px 0px 6px 1px rgb(128, 128, 128);
}
#more a, #bottom a {
    color: rgb(235, 251, 255);
    text-decoration: none;
}
#top {
    position: fixed;
    top: 4px;
    right: 4px;
}
#top > div {
    vertical-align: top;
    /* Override default FB display style for mobile. */
    display: inline-block;
}
#top > iframe {
    /* Use this instead of frameborder=0. */
    border: none;
}

a {
    color: rgb(235, 251, 255);
}
th, td {
    padding: 0px 2px;
}
button {
    margin: 8px 0px 0px;
    padding: 3px 30px;

    font-size: 1.12em;
    color: rgb(235, 251, 255);
    text-shadow: 0px 0px 4px rgb(230, 251, 255);

    background-color: rgb(34, 34, 34);
    background: -webkit-linear-gradient(top, rgb(70, 70, 70), rgb(34, 34, 34));
    background:    -moz-linear-gradient(top, rgb(70, 70, 70), rgb(34, 34, 34));
    background:     -ms-linear-gradient(top, rgb(70, 70, 70), rgb(34, 34, 34));
    background:      -o-linear-gradient(top, rgb(70, 70, 70), rgb(34, 34, 34));
    background:   linear-gradient(to bottom, rgb(70, 70, 70), rgb(34, 34, 34));

    border: 2px solid rgb(34, 34, 34);
    border-radius: 6px;

    -webkit-box-shadow: 0px 0px 4px 2px rgb(34, 34, 34);
            box-shadow: 0px 0px 4px 2px rgb(34, 34, 34);

    -webkit-transition-duration: 0.2s;
       -moz-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
}
button:hover {
    color: rgb(47, 142, 204);
    text-shadow: -1px 0px 2px rgb(47, 142, 204),
                  1px 0px 2px rgb(47, 142, 204);
}
