html,
body {
    font-family: Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

.icoke-home {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10;
    color: #111;
    font-size: 14px;
    text-decoration: none;
}

.icoke-home:hover,
.icoke-home:focus {
    text-decoration: underline;
}

#menu-1,
#menu-2,
#menu-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#single-player-info, #one-on-one-info {
    display: none;
}

#canvas2-wrapper {
    background: black;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.16), 0 8px 12px rgba(0, 0, 0, 0.23);
}

#menu-2,
#menu-3,
.time-elapsed,
#join-menu,
#display-menu,
.navigation,
#display-error,
#title,
#game-panel,
#play-menu,
.loading-msg {
    display: none;
}

#social-media-buttons {
    position: absolute;
    top: 10px !important;
    left: 10px !important;
}

#about-button {
    position: absolute;
    top: 10px !important;
    right: 10px !important;
}

option {
    border-radius: 5px;
}

.option {
    display: none;
    text-align: center;
}

.option img {
    max-width: 705px;
    max-height: 470px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.16), 0 8px 12px rgba(0, 0, 0, 0.23);
}

.one {
    display: inherit;
}

.whitespace {
    height: 5px;
}

.relative-wrapper {
    position: relative;
}

.easier,
.harder {
    background: black;
    color: white;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.23);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    outline: 0;
    border: 2px solid rgb(70, 70, 70);
}

.easier:hover,
.harder:hover {
    cursor: pointer;
}

select {
    outline: 0;
}

.dots span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.dots span:nth-child(2) {
    animation-delay: .2s;
}

.dots span:nth-child(3) {
    animation-delay: .4s;
}

input, .play-button {
    outline: 0;
}

.whitespace-2 {
    height: 8px;
}

#instructions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: right;
    font-size: 15px;
}

#update-link {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 15px;
}

.class-button {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.23);
}
