/* @import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch&family=Mali&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch&display=swap');

/*
font-family: 'Cabin Sketch', cursive;
font-family: 'Gochi Hand', cursive;
font-family: 'Mali', cursive;
*/

body {
    font-size: 20px;
}
* {
    font-family: 'Cabin Sketch', cursive;
    font-size: 20px;
}
td {
    -webkit-transition: all 100ms ease-out 400ms;
    -moz-transition:    all 100ms ease-out 400ms;
    -o-transition:      all 100ms ease-out 400ms;
    transition:         all 100ms ease-out 400ms;
}
td {
    -webkit-transition: height, width 1100ms ease-out 1400ms;
    -moz-transition:    height, width 1100ms ease-out 1400ms;
    -o-transition:      height, width 1100ms ease-out 1400ms;
    transition:         height, width 1100ms ease-out 1400ms;
}

table {
    width: 100%;
}
table * {
    font-size: 2.3rem!important;
}
table, tr, th, td {
    padding: 0;
    margin: 0;
    border: none;
    border-collapse: collapse;
}
td, th {
    width: calc((100vw - (12 * 5px)) / 12);
    height: calc((100vh - (12 * 10px)) / 12);
    position: relative;
}
th {
    border: 1px solid #fff;
    background-color: #fff;
    color: #ddd;
}
th.restart, th[scope="row"] {
    width: 1em!important;
}
th.restart, th[scope="col"] {
    height: 1em!important;
}
input {
    border-radius: 20px;
    border: none;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    max-width: 100%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: bold;
    border: 1px solid #fff;
    color: #ddd;
    opacity: 0.3;
}
th.hide,
td.hide {
    width: 0!important;
    height: 0!important;
}



input:focus,
input.bad,
input.good {
    color: #fff;
}

input:focus {
    background-color: pink;
    opacity: 1;
    border-color: 1px solid red;
}

input.good {
    opacity: 1;
}
input.bad {
    background-color: black!important;
    opacity: 0.7;
    color: #fff!important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #eee;
  opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #eee;
  opacity: 0.5; /* Firefox */
}


/* remove arrow buttons from number inputs */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.y-1 input {background-color: #feed01; color: #000}
.y-1 input:focus::placeholder  {color: #000!important;}
.y-1 input:focus::-ms-input-placeholder  {color: #000!important;}
.y-2 input {background-color: #f9b234; }
.y-3 input {background-color: #f29200;}
.y-4 input {background-color: #ea5b0c;}
.y-5 input {background-color: #e40613;}
.y-6 input {background-color: #951b80;}
.y-7 input {background-color: #59358c;}
.y-8 input {background-color: #26348c;}
.y-9 input {background-color: #01509f;}
.y-10 input {background-color: #0f70b7;}
.y-11 input {background-color: #0c8e36;}
.y-12 input {background-color: #94c120;color: #000}
.y-12 input:focus {color: #000}

.restart {
    padding: 5px;
}
.restart a {
    display: block;
    margin: 0 auto;
    text-align:center;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 1rem!important;
    margin-left: 7px;
}
.restart a svg {
    width: 16px;
    height: 16px;
}
.restart a svg * {
    stroke: #777;
}
.restart:hover a svg * {
    stroke: red;
}



footer, footer * {
    text-align: center;
    line-height: 0.9;
    padding: 0;
    margin: 0;
    margin-top: 1em;
    color: #777;
    font-size: 12px;

}
footer h1 {
    padding-top: 5px;
}
footer a:hover {
    color: #f7cd55;
}