@font-face {
  font-family: "Cinzel Decorative";
  src: url("/static/fonts/CinzelDecorative-Bold.ttf");
}
@font-face {
  font-family: "Rowdies";
  src: url("/static/fonts/Rowdies-Light.ttf");
}
@font-face {
  font-family: "Noto Sans JP 400";
  src: url("/static/fonts/NotoSansJP-Regular.ttf");
}

@font-face {
  font-family: "Noto Sans JP 600";
  src: url("/static/fonts/NotoSansJP-SemiBold.ttf");
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: 'Rowdies', cursive;
  font-size: 1em;
  color: #8C7567;
  background: #F0F4EE;
  /*color: #1c1d26;*/
}
h1, h2, h3, h4 {
  color: #72615c;
}
.box {
  margin: 1em;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title-container {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 1em 0;
}
.title {
  font-family: 'Cinzel Decorative';
  padding: 0;
  margin: 0;
  font-size: 6em;
}
.title-small,
.title-small-no-responsive {
  font-family: 'Cinzel Decorative', cursive;
  padding: 0;
  margin: 0;
  font-size: 2em;
  color: #27303F;
}
.title-black {
  color: #27303F;
  /*text-shadow: 0 0 0.05em #ffe344;*/
}
.title-yellow {
  color: #ffe344;
  text-shadow: 0 0 0.1em #27303F;
  /*text-shadow: 0 0 0.05em #27303F;*/
}
a {
  text-decoration: none;
}
a, a:visited {
  /*color: #22738e;*/
  color: #8C7567;
}
.subtitle1 {
  font-family: 'Noto Sans JP 400', sans-serif;
  padding: 0;
  margin: 0;
  font-size: 1.5em;
  color: #27303F;
}
.subtitle2 {
  font-family: 'Noto Sans JP 400', sans-serif;
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: #27303F;
}
.button {
  cursor: pointer;
  display: inline-block;
  margin: .2em;
  font-size: 1.2em;
  padding: 0.5em 1em;
  border-radius: 1em;
  background: #8C7567;
  color: #e5ded5;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.button:hover {
  background: #a08778;
  color: #ede8e1;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

#daily-challenge-table,
#daily-challenge-table-mobile {
  font-size: 1.2em;
  text-align: left;
  font-family: monospace, monospace;
}
#daily-challenge-table th,
#daily-challenge-table td,
#daily-challenge-table-mobile th,
#daily-challenge-table-mobile td {
  padding: 0 0.5em;
}
.countdown {
  font-family: monospace, monospace;
  margin-left: 0.5em;
}
.speed-challenge-table a {
  color: #1c1d26;
}
.info {
  font-size: 1em;
  vertical-align: top;
  display: inline-block;
}
.info:hover .info-panel {
  display: block;
  visibility: visible;
}
.info-panel {
  display: none;
  visibility: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.95);
  color: #ede8e1;
  border-radius: 1em;
  text-align: left;
  padding: 1em;
  max-width: 50%;
  font-weight: normal;
  font-family: 'Noto Sans JP 400', sans-serif;
}
.info-panel h3 {
  margin: 0;
}

.box-login {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0 1em 0 1em;
  text-align: center;
  border-radius: 0 0 0 1em;
  background: #e5eae3;
  border-bottom: 0.2em solid #d2d8d0;
}

.box-login-home {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0 1em 0 1em;
  text-align: center;
  border-radius: 0 0 0 1em;
  background: #e5eae3;
  border-bottom: 0.2em solid #d2d8d0;
}

.hide-on-mobile {
  display: block;
  visibility: visible;
}
.hide-on-mobile-table-cell {
  display: table-cell;
  visibility: visible;
}
.show-on-mobile {
  display: none;
  visibility: hidden;
}


/* Grid play page - start */

#grid {
  font-family: 'Noto Sans JP 600', sans-serif;
  line-height: 1em;
  border-spacing: 0;
  border-collapse: collapse;
  user-select: none;
  overflow: hidden;
}
#grid tr:first-child td:nth-child(2) {
  border-left: 0.2em solid #01070a;
}
#grid tr:nth-child(2) td:nth-child(1) {
  border-top: 0.2em solid #01070a;
}
#grid tr:nth-child(1) td {
  border-top: 0.2em solid #01070a;
}
#grid tr:nth-child(5n+1) td {
  border-bottom: 0.2em solid #01070a;
}
#grid td:nth-child(1) {
  border-left: 0.2em solid #01070a;
}
#grid td:nth-child(5n+1) {
  border-right: 0.2em solid #01070a;
}
#grid td {
  background: #F0F4EE;
  position: relative;
  border: 0.1em solid #01070a;
  white-space: pre;
  color: rgba(28, 29, 38, 1);
  padding: 0;
}
#grid td.hide {
  color: rgba(28, 29, 38, 0.3);
}
/* First row and first column */
#grid tr:first-child td,
#grid td:first-child {
  background: #e0e5de;
}
#grid tr:first-child td:first-child {  /* Top-left cell for padding */
  border: none;
  background: #d6d6cd;
  color: #d6d6cd;
  overflow: hidden;
}
#grid.light-grid tr:first-child td:first-child {  /* Top-left cell for padding */
  background: #F0F4EE;
  color: #F0F4EE;
}
/* Pad left hints */
#grid td:first-child {
  padding-left: 0.15em;
  padding-right: 0.15em;
}
/* Pad top hints */
#grid tr:first-child td {
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}
.col-hint {
  text-align: center;
  vertical-align: bottom;
}
.row-hint {
  text-align: right;
}
.highlight-hint {
  background-color: #a0a59d !important;
}
.highlight-cell {
  background-color: #b8bcb6;
}
.flag-hint {
  background-color: #e7ce41 !important;
}
.flag-cell {
  background-color: #fbe56c;
}
.highlight-hint.flag-hint {
  background-color: #ada15f !important;
}
.highlight-cell.flag-cell {
  background-color: #c5b870;
}
.mark1 {
  background-color: #344147 !important;
}
.mark1-complete {
  background-color: #485960 !important;
}
.mark2 {
  background-color: #8adcf7 !important;
}
.mark2-complete {
  background-color: #a3e2f7 !important;
}
.prevent-select {
  /* This also prevents dragging */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
#mouse {
  border: 1px solid #000000;
  border-radius: 50%;
  background: #ffe344;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
}
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.center-content-flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#button-start button,
#next-grid button {
  padding: 0.5em 1em;
  font-family: 'Rowdies', cursive;
  font-size: 1.5em;
  border-radius: 0.5em;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
#button-start button {
  background: #8adcf7;
  color: #344147;
}
#next-grid button {
  background: #ffe344;
  color: #344147;
  font-size: 0.35em;
}
#button-start button:hover,
#next-grid button:hover {
  cursor: pointer;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
#complete-text {
  font-size: 4em;
  text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
  color: #ffe344;
  /*display: none;*/
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
#challenge-counter {
  font-size: 1.1em;
  width: 100%;
  text-align: right;
}
#play-timer {
  font-family: monospace;
  font-size: 2em;
  width: 100%;
  text-align: right;
}

.cell-temp-circle-1,
.cell-temp-circle-1-fake {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: #afbcce;
  border: 0.09em solid black;
  pointer-events: none;  /* Pass through clicks to the parent cell */
}

.cell-temp-circle-2,
.cell-temp-circle-2-fake {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: #afbcce;
  border: 0.09em solid black;
  pointer-events: none;  /* Pass through clicks to the parent cell */
}

/* Grid play page - end */


/* Grid record page - start */
#records {
  /* There are currently some issues with this and the dot popups */
  /*max-height: 600px;*/  
  /*overflow: auto;*/
}
#records table {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  position: relative;
}
#records th {
  z-index: 100;
  background: #e0e5de;
  padding: 0.5em;
  position: sticky;
  top: 0;
  font-size: 1.2em;
  /* Apply both top and bottom borders to the <th> */
  border-top: 0.13em solid #01070a;
  border-bottom: 0.13em solid #01070a;
  border-right: 0.13em solid #01070a;
}
#records td {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1.2em;
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 0.13em solid #01070a;
  border-right: 0.13em solid #01070a;
  text-align: center;
}
#records th:first-child,
#records td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 0.13em solid #01070a;
}
#records td button {
  display: inline-block;
  font-weight: 600;
  padding: 0.3em 0.8em;
  border-radius: 1em;
  background: #ada7a4;
  color: #e5e2de;
  border: none;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
#records td button:hover {
  cursor: pointer;
  background: #a5968e;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
#records td button:disabled {
  background: #8C7567;
  color: #e5ded5;
}
#records td button:disabled:hover {
  cursor: default;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
}
#records th:first-child,
#records th:nth-child(2),
#records td:first-child {
  background: #F0F4EE;
  border: none;
}
#records th:nth-child(2),
#records td:first-child {
  border-right: 0.13em solid #01070a;
}
#records th:nth-child(2) {
  border-bottom: 0.13em solid #01070a;
}
#records td:first-child a {
  color: #278cad;
  /*text-shadow: 0 0 0.1em #8adcf7;*/
}
#records th:last-child,
#records th:nth-last-child(2),
#records td:last-child,
#records td:nth-last-child(2) {
  background: #F0F4EE;
  border: none;
  color: #8C7567;
}
.time {
  text-align: right !important;
}
#display-timer {
  font-family: monospace;
  font-size: 2em;
  width: 100%;
  text-align: right;
}


.video-icon {
  width: 1em;
}
.collapsetd {
  cursor: pointer;
}
.graph {
  background: #1c1d26;
  width: 100%;
  height: 9em;
  position: relative;
}
.graph-inner {
  position: absolute;
  top: 7%;
  height: 88%;
  width: 100%;
}
.graph-dot {
  cursor: pointer;
  background: #ffe344;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  position: absolute;
  display: inline-block;
  transform: translate(-50%, 50%);

}
.graph-dot:hover .graph-dot-info {
  display: block;
  visibility: visible;
}
.graph-dot-info {
  display: none;
  visibility: hidden;
  position: fixed;
  margin-left: 1em;
  background: rgba(0, 0, 0, 1);
  color: #ede8e1;
  border: 0.1em solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5em;
  text-align: left;
  padding: 0.2em 0.5em;
  font-weight: normal;
  font-family: 'Noto Sans JP 600', sans-serif;
}
.graph-camera {
  z-index: 1;
  position: fixed;
  margin-top: 0.3em;
  margin-left: -0.2em;
  color: #8C7567;
  text-shadow: 0 0 0.1em #27303F;
}
.time-axis {
  position: absolute;
  font-size: 0.8em;
  text-align: right;
  color: #a0897b;
  transform: translate(0, 40%);
}
.time-dotted-line {
  position: absolute;
  border: none;
  border-top: 0.1em dashed rgba(255, 255, 255, 0.3);
}
.graph-svg-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.graph-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.replay-box {
  display: flex;
  flex-direction: row;
  margin: 1em 0 0.5em 0;
}
#replay-time {
  text-align: center;
}
#replay-time h1 {
  margin-bottom: 0;
  margin-top: 0.5em;
}
#replay-time h2.world-best {
  margin: 0;
  color: #ffe344;
  text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
}
#replay-time h2.personal-best {
  margin: 0;
  color: #8adcf7;
  text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
}

/* Grid record page - end */


/* Home page latest records - start */
#latest-records table {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
#latest-records td {
  font-family: 'Inconsolata', monospace;
  font-weight: 600;
  font-size: 1.2em;
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  text-align: center;
  /*border-bottom: 0.13em solid rgba(229, 234, 227, 0.3);
  border-right: 0.13em solid rgba(229, 234, 227, 0.3);*/
}

#latest-records th {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  color: #c7ccc9;
  /*background: #383947;*/
  font-size: 1.2em;
  /* Apply both top and bottom borders to the <th> */
  /*border-top: 0.13em solid rgba(229, 234, 227, 0.3);
  border-bottom: 0.13em solid rgba(229, 234, 227, 0.3);
  border-right: 0.13em solid rgba(229, 234, 227, 0.3);*/
}
#latest-records th {
  /* Apply a top border on all <th> elements (the top row) */
  /*border-top: 0.13em solid rgba(229, 234, 227, 0.3);*/
}
#latest-records th:first-child,
#latest-records td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  /*border-left: 0.13em solid rgba(229, 234, 227, 0.3);*/
}
#latest-records a {
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  color: #ffe344;
  display: block;
  height: 100%;
}

/* Home page latest records - end */







.button-small {
  padding: 0.3em 0.8em;
  border-radius: 1em;
  background: #8C7567;
  color: #e5ded5;
  border: none;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.button-small:hover {
  cursor: pointer;
  background: #a08778;
  color: #ede8e1;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.example-cell-filled,
.example-cell-flagged,
.example-cell-empty {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.15em solid black;
}
.example-cell-filled {
  background-color: #344147;
}
.example-cell-flagged {
  background-color: #8adcf7;
}

.example-cell-temp-cirlce-1,
.example-cell-temp-cirlce-2 {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.09em solid black;
}
.example-cell-temp-cirlce-1 {
  background: #afbcce;
}
.example-cell-temp-cirlce-2 {
  background: #9e7e7e;
}


/* Responsive - start */

@media screen and (max-width: 1400px) {
  .box-login-home {
    position: relative;
    width: 100%;
  }
  .box-login {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 1200px) {
  .box {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 1050px) {
  .box {
    font-size: 0.8em;
  }
  .box-login {
    font-size: 1.3vw;
  }
}

@media screen and (max-width: 950px) {
  .title {
    font-size: 3.5em;
  }
  .title-small {
    font-size: 3.3vw;
  }
  .box-login {
    font-size: 1.4vw;
  }
  .box {
    font-size: 0.8em;
    margin: 0;
  }
  .hide-on-mobile {
    display: none;
    visibility: hidden;
  }
  .hide-on-mobile-table-cell {
    display: none;
    visibility: hidden;
  }
  .show-on-mobile {
    display: block;
    visibility: visible;
  }
  .replay-box {
    flex-direction: column;
    margin: 1em 0 0.5em 0;
  }
  .replay-grid-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 750px) {
  .box-login {
    font-size: 1.6vw;
  }
  .title-small {
    font-size: 3.8vw;
  }
}
@media screen and (max-width: 550px) {
  .box-login {
    font-size: 2vw;
  }
  .title-small {
    font-size: 4.2vw;
  }
}
@media screen and (max-width: 450px) {
  .box-login {
    font-size: 2.2vw;
  }
  .title-small {
    font-size: 5vw;
  }
}

/* Responsive - end */