.instructions {
    font-size:80%;
    color:#963535;
}

.auto-connection-text {
    font-size: larger
}

button {
    font-size: inherit;
}

#start-settings {
    display: inline-block;
    color:#222;
    font-size:90%;
    margin-bottom: 20px;

    padding: 0.5em;
    background-color: #eee;
}

.head {
    font-weight: bold;
    font-size: 120%;
}

.square-thing {
    width: 26px;
    height: 26px;
    display: inline-block;
    border:solid 3px #fff;
    vertical-align: middle;
}

.color-chooser {
    width: 26px;
    height: 26px;
    display: inline-block;
    margin: 3px;
    vertical-align: middle;
}
.color-chooser.chosen {
    width: 24px;
    height: 24px;
    border: solid 3px black;
    margin: 2px;
}

.square-group {
    display: inline-block;
}

#inner-board {
    width: 520px;
    overflow: hidden;
    resize: horizontal;
}

#new-game-button {
    background: url(img/new_game.png);
}

#new-game-button {
    background: #eee, url(img/new_game.png);
}

.color-chooser.color1 {
    background-color: #fdd;
}
.color-chooser.color1:hover {
    background-color: #fbb;
}
.color-chooser.color1.chosen,.color-chooser.color1.chosen:hover {
    background-color: #f66;
}

.color-chooser.color2 {
    background-color: #ddf;
}
.color-chooser.color2:hover {
    background-color: #bbf;
}
.color-chooser.color2.chosen,.color-chooser.color2.chosen:hover {
    background-color: #66f;
}

.text-color1 {
    text-align:center;
    color: #b22;

    font-weight: bold;
}
.text-color1 div {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}
.text-color2 {
    text-align:center;
    color: #22b;

    font-weight: bold;
}
.text-color2 div {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

.poke-img {
    width: 32px;
    height: 32px;
}

.poke {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

.poke:hover {
    background-color: #ddd;
    outline: 1px solid #999;
    outline-offset: -1px;
}

.poke.color1 {
    background-color: #f66;
}
.poke.color1:hover {
    background-color: #fbb;
}
.poke.color1.last-picked {
    outline: 2px solid #222;
    outline-offset: -2px;
    animation-duration: 0.4s;
    animation-name: bounce;
    animation-iteration-count: 1;
}

.poke.color2 {
    background-color: #66f;
}
.poke.color2:hover {
    background-color: #bbf;
}
.poke.color2.last-picked {
    outline: 2px solid #222;
    outline-offset: -2px;
    animation-duration: 0.4s;
    animation-name: bounce;
    animation-iteration-count: 1;
}

@keyframes bounce {
  from {
    scale: 1;
  }
  20% {
    scale: 1.2;
  }
  to {
    scale: 1;
  }
}

/*
@keyframes pulse2 {
  from {
    background-color: #66f;
  }

  to {
    background-color: #222;
  }
}
*/

/* Marking for local reference */
.poke.marked {
    background: repeating-linear-gradient(
        45deg,
        #ddd, #ddd 6.25%,
        #fff 6.25%, #fff 18.75%,
        #ddd 18.75%, #ddd 25%
    );
}
.poke.marked:hover {
    background: repeating-linear-gradient(
        45deg,
        #555, #555 6.25%,
        #eee 6.25%, #eee 18.75%,
        #555 18.75%, #555 25%
    );
}

.poke.marked.color1 {
    background: repeating-linear-gradient(
        45deg,
        #f99, #f99 6.25%,
        #f66 6.25%, #f66 18.75%,
        #f99 18.75%, #f99 25%
    );
}
.poke.marked.color1:hover {
    background: repeating-linear-gradient(
        45deg,
        #555, #555 6.25%,
        #fbb 6.25%, #fbb 18.75%,
        #555 18.75%, #555 25%
    );
}

.poke.marked.color2 {
    background: repeating-linear-gradient(
        45deg,
        #99f, #99f 6.25%,
        #66f 6.25%, #66f 18.75%,
        #99f 18.75%, #99f 25%
    );
}
.poke.marked.color2:hover {
    background: repeating-linear-gradient(
        45deg,
        #555, #555 6.25%,
        #bbf 6.25%, #bbf 18.75%,
        #555 18.75%, #555 25%
    );
}
/* END Marking for local reference */


#connection-status.good {
    background: url(img/ok.png);
}
#connection-status.warning {
    background: url(img/warning.png);
}
#connection-status.bad {
    background: url(img/bad.png);
}

#sync-cover {
    display:none;
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.03);
}