.game-button {
    position: relative;
    top: 0;
    text-decoration: none !important;
    outline: none !important;
    font-family: 'Carter One', sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: .1em;
    text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px #004a87;
    border: none;
    margin: 15px 15px 30px;
    background: repeating-linear-gradient(45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
    border-bottom: 3px solid rgba(16, 91, 146, 0.5);
    border-top: 3px solid rgba(255, 255, 255, .3);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 15px 10px;
    box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0, 0, 0, .3);
    min-width: 82px;
    text-align: center;
}

.game-button:not(.purple) {
    cursor: pointer;
}

.game-button:hover(:not(.purple)) {
    top: 2px;
    box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button::before {
    content: '';
    height: 10%;
    position: absolute;
    width: 40%;
    background: #fff;
    right: 13%;
    top: -3%;
    border-radius: 99px;
}

.game-button::after {
    content: '';
    height: 10%;
    position: absolute;
    width: 5%;
    background: #fff;
    right: 5%;
    top: -3%;
    border-radius: 99px;
}

.game-button.green {
    background: repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
    box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(40, 117, 29, 0.5);
    text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
}

.game-button.green:hover {
    top: 2px;
    box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.lightorange {
    background: repeating-linear-gradient(45deg, #FF9933, #FF9933 5px, #FF8C1A 5px, #FF8C1A 10px);
    box-shadow: 0 6px 0 #CC7A00, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #B36B00, 0 12px 0 5px #CC7A00, 0 15px 0 5px #995C00, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(204, 122, 0, 0.5);
    text-shadow: 2px 2px 1px #CC7A00, -2px 2px 1px #CC7A00, 2px -2px 1px #CC7A00, -2px -2px 1px #CC7A00, 0px 2px 1px #CC7A00, 0px -2px 1px #CC7A00, 0px 4px 1px #995C00, 2px 4px 1px #995C00, -2px 4px 1px #995C00;
}

.game-button.lightorange:hover {
    top: 2px;
    box-shadow: 0 4px 0 #CC7A00, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #B36B00, 0 10px 0 5px #CC7A00, 0 13px 0 5px #995C00, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.orange {
    background: repeating-linear-gradient(45deg, #ff7e4c, #ff874c 5px, #ff7843 5px, #ff6643 10px);
    box-shadow: 0 6px 0 #ae4c25, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #833314, 0 12px 0 5px #a34934, 0 15px 0 5px #632c16, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(160, 68, 23, 0.5);
    text-shadow: 2px 2px 1px #d74c21, -2px 2px 1px #d74c21, 2px -2px 1px #d74321, -2px -2px 1px #d75421, 0px 2px 1px #d74c21, 0px -2px 1px #d74321, 0px 4px 1px #932604, 2px 4px 1px #932c04, -2px 4px 1px #932c04;
}

.game-button.orange:hover {
    top: 2px;
    box-shadow: 0 4px 0 #ae4c25, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #833314, 0 10px 0 5px #a34934, 0 13px 0 5px #632c16, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.purple {
    background: repeating-linear-gradient(45deg, #cf40d4, #c840d4 5px, #ba3fcc 5px, #cc3fa9 10px);
    box-shadow: 0 6px 0 #862885, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #6d206c, 0 12px 0 5px #642e82, 0 15px 0 5px #48164c, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(110, 29, 117, 0.5);
    text-shadow: 2px 2px 1px #7f2886, -2px 2px 1px #642886, 2px -2px 1px #7a2886, -2px -2px 1px #862885, 0px 2px 1px #86286a, 0px -2px 1px #862885, 0px 4px 1px #4c1644, 2px 4px 1px #4c1639, -2px 4px 1px #4c163f;
}

.game-button.red {
    background: repeating-linear-gradient(45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
    box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(160, 25, 23, 0.5);
    text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
}

.game-button.red:hover {
    top: 2px;
    box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.red.cross {
    text-shadow: 2px 2px 1px #000000, -2px 2px 1px #000000, 2px -2px 1px #000000, -2px -2px 1px #000000, 0px 2px 1px #000000, 0px -2px 1px #000000, 0px 4px 1px #000000, 2px 4px 1px #000000, -2px 4px 1px #000000;
}

.game-button.yellow {
    background: repeating-linear-gradient(45deg, #f7c93e, #f7d43e 5px, #f7d43e 5px, #f7d43e 10px);
    box-shadow: 0 6px 0 #b8a928, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #9e8a20, 0 12px 0 5px #a69a2e, 0 15px 0 5px #7c5e16, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(117, 89, 29, 0.5);
    text-shadow: 2px 2px 1px #b8a928, -2px 2px 1px #b8a928, 2px -2px 1px #b8a928, -2px -2px 1px #b8a928, 0px 2px 1px #b8a928, 0px -2px 1px #b8a928, 0px 4px 1px #7c5e16, 2px 4px 1px #7c5e16, -2px 4px 1px #7c5e16;
}

.game-button.yellow:hover {
    top: 2px;
    box-shadow: 0 4px 0 #b8a928, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #9e8a20, 0 10px 0 5px #a69a2e, 0 13px 0 5px #7c5e16, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.flashy-pink {
    background: repeating-linear-gradient(45deg, #FF1493, #FF1493 5px, #FF007F 5px, #FF007F 10px);
    border-bottom: 3px solid rgba(200, 0, 100, 0.5);
    box-shadow: 0 6px 0 #C7006F, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #A3005B, 0 12px 0 5px #B80065, 0 15px 0 5px #8F004E, 0 15px 1px 6px rgba(0, 0, 0, .3);
    color: #fff !important;
    text-shadow: 2px 2px 1px #C7006F, -2px 2px 1px #C7006F, 2px -2px 1px #C7006F, -2px -2px 1px #C7006F, 0px 2px 1px #C7006F, 0px -2px 1px #C7006F, 0px 4px 1px #8F004E, 2px 4px 1px #8F004E, -2px 4px 1px #8F004E;
}

.game-button.flashy-pink:hover {
    top: 2px;
    box-shadow: 0 4px 0 #C7006F, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #A3005B, 0 10px 0 5px #B80065, 0 13px 0 5px #8F004E, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.game-button.medium-blue {
    background: repeating-linear-gradient(45deg, #2a9fd8, #2a9fd8 5px, #2e8bc8 5px, #2e8bc8 10px);
    border-bottom: 3px solid rgba(10, 70, 120, 0.5);
    box-shadow: 0 6px 0 #1f5a7a, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #0e4266, 0 12px 0 5px #134b6f, 0 15px 0 5px #09334f, 0 15px 1px 6px rgba(0, 0, 0, .3);
    color: #fff !important;
    text-shadow: 2px 2px 1px #00558a, -2px 2px 1px #00558a, 2px -2px 1px #00558a, -2px -2px 1px #00558a, 0px 2px 1px #00558a, 0px -2px 1px #00558a, 0px 4px 1px #003b70, 2px 4px 1px #003b70, -2px 4px 1px #003b70;
}

.game-button.medium-blue:hover {
    top: 2px;
    box-shadow: 0 4px 0 #1f5a7a, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #0e4266, 0 10px 0 5px #134b6f, 0 13px 0 5px #09334f, 0 13px 1px 6px rgba(0, 0, 0, .3);
}

.inGameButtons {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.buttons-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.selected {
    border: 2px solid #ffffff;
}

.unselected {
    border: 2px solid transparent;
}

.swatch {
    border-radius: 4px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin: 2px;
    transition: all .3s;
}

.swatch:hover {
    transform: scale(1.1);
}

.cross {
    cursor: default !important;
    user-select: none !important;
}

.game-button.blue {
    background: repeating-linear-gradient(45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
    box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0, 0, 0, .3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0, 0, 0, .3);
    border-bottom: 3px solid rgba(16, 91, 146, 0.5);
    border-top: 3px solid rgba(255, 255, 255, .3);
}

.game-button.blue:hover {
    top: 2px;
    box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0, 0, 0, .3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0, 0, 0, .3);
}