@font-face {
  font-family: 'Wooden Ship Decorated';

  src: url('images/Wooden_Ship_Decorated.eot');
  src: local('Wooden Ship Decorated'), url('images/Wooden_Ship_Decorated.ttf');
  font-weight: bold;
}

html,
body {
  position: relative;
  /* width: 100%;
  height: 100%; */
}

body {
  min-height: 100dvh;
}

body {
  position: relative;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: url('images/wall_3d_9.png') 100% 100%;
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}

#menuDialog {
  width: 100vw;
  height: 100vh;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  max-width: initial;
  max-height: initial;
}

#menu {
  position: absolute;
  display: block;
  background-color: #003300;
  width: 75vw;
  top: 50vh;
  transform: translateY(-50%);
  left: 12.5vw;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border: 7px silver ridge;
  color: white;
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  box-sizing: border-box;
  overflow: hidden;
}

#menuDialog::backdrop {
  background-color: #000;
  opacity: 0.85;
}

#menuDialog:focus-visible {
  outline: none;
}

#menuDialog>.Cell1 {
  position: relative;
  text-align: center;
  top: 1rem;
  margin: 0;
  width: 100%;
  font-family: 'Wooden Ship Decorated', 'Times New Roman', Times, serif;
  font-size: 3vw;
  box-sizing: border-box;
}

#caption {
  text-align: center;
  font-size: x-large;
  margin: 10px 0 40px 0;
}

#menuContainer {
  position: relative;
  display: grid;
  grid-template-columns: calc(50% - 2rem) calc(50% - 2rem);
  grid-template-rows: auto 1fr auto;
  justify-content: space-around;
}

.menu-block {
  position: relative;
  display: grid;
  row-gap: 1rem;
  align-content: start;
}

#tableForm {
  grid-template-rows: repeat(3, 1.2rem);
  margin-bottom: 1rem;
}

#Level {
  grid-row: 1/3;
  grid-template-rows: repeat(7, 1.2rem);
}

#Question {
  grid-template-rows: repeat(4, 1.2rem);
}

.menu-block>p {
  text-align: center;
  margin: 2px 0 20px 0;
}

#menu>button {
  position: relative;
  display: block;
  width: 250px;
  height: 35px;
  margin: 40px auto 1rem auto;
  color: green;
  font-weight: bold;
}

#res {
  display: none;
  position: fixed;
  z-index: 1001;
  background-color: #003300;
  width: 19.5%;
  height: 22%;
  opacity: 1;
  margin-left: 40.25%;
  margin-top: -4%;
  top: 50%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border: 7px silver ridge;
  color: white;
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -khtml-border-radius: 30px;
}

.Cell1 {
  display: grid;
  align-content: center;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14pt;
  border-color: white;
  color: black;
  -moz-text-shadow: white 0.1em 0.1em 0.2em, white -0.1em -0.1em 0.2em, white -0.1em 0.1em 0.2em, white 0.1em -0.1em 0.2em;
  -webkit-text-shadow: white 0.1em 0.1em 0.2em, white -0.1em -0.1em 0.2em, white -0.1em 0.1em 0.2em, white 0.1em -0.1em 0.2em;
  text-shadow: white 0.1em 0.1em 0.2em, white -0.1em -0.1em 0.2em, white -0.1em 0.1em 0.2em, white 0.1em -0.1em 0.2em;
  filter: progid:DXImageTransform.Microsoft.Glow(color=white, strength=3, direction=310)
}

#title {
  text-align: center;
  margin: 0 0 10px 0;
  font-family: 'Wooden Ship Decorated', 'Times New Roman', Times, serif;
  font-size: 3vw;
}

.mainBlockT {
  position: relative;
  width: 100%;
  height: 100%;
}

.tableBlock {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  height: 100%;
}

#long .base {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto repeat(18, 1fr);
  grid-template-rows: repeat(2, auto) repeat(7, 1fr);
  gap: 1px;
}

#short .base {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto repeat(10, 1fr);
  grid-template-rows: repeat(2, auto) repeat(11, 1fr);
  gap: 1px;
}

.tableBlock .base,
.tableBlock .base>div,
.tableBlock .vynos,
.tableBlock .vynos>div {
  border-width: 1px;
  border-style: inset;
}

.tableBlock .base>div,
.tableBlock .vynos>div {
  padding: 2px 4px;
  box-sizing: border-box;
}

.base,
.vynos {
  background-color: #ffffff60;
}

#long .vynos {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto repeat(14, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  margin-top: 1rem;
}

#short .vynos {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: auto 1fr auto 1fr;
  gap: 1px;
}

#long .vynos>.pidp {
  display: block;
  text-transform: none;
  font-size: 8pt;
  white-space: nowrap;
}

#short .vynos>.pidp {
  display: block;
  text-transform: none;
  white-space: nowrap;
  grid-column: 1/15;
}

.periodText {
  display: grid;
  align-content: center;
  grid-row: 1/3;
  font-size: 9pt;
}

#long .periodText {
  writing-mode: vertical-lr;
  transform: rotateX(180deg) rotateY(180deg);
}

/* #short .periodText{

} */

.groupsText {
  letter-spacing: 28pt;
}

#long .groupsText {
  grid-column: 2/20;
}

#short .groupsText {
  grid-column: 2/12;
}

.Cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14pt;
  border-color: white;
}

#Infl,
#gTimerl,
#Infs,
#gTimers {
  display: block;
  box-shadow: 0 0 50px inset #008000;
  text-transform: none;
}

#Infl>span,
#Infs>span {
  vertical-align: middle;
}

#gTimerl,
#gTimers {
  display: grid;
  align-content: center;
  text-align: center;
  color: red;
  font-weight: bold;
  font-size: xx-large;
  border-color: #fff;
}

.s {
  background-color: #FF99CB;
  border-style: double;
  cursor: url("images/6.cur"), pointer;
}

.p {
  background-color: #FFFFCB;
  border-style: double;
  cursor: url("images/3.cur"), pointer;
}

.d {
  background-color: #66CBFF;
  border-style: double;
  cursor: url("images/1.cur"), pointer;
}

.f {
  background-color: #65FFCB;
  border-style: double;
  cursor: url("images/17.cur"), pointer;
}

.Sym {
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  font-weight: bold;
  text-transform: none;
}

.Num {
  font-family: "Times New Roman", Times, serif;
  font-size: 9pt;
  text-align: center;
}

.Ar {
  grid-column: 1/3;
  font-family: "Times New Roman", Times, serif;
  font-size: 8pt;
  text-transform: lowercase;
  line-height: 1em;
  text-overflow: ellipsis;
  overflow: hidden;
}

.lf {
  text-align: left;
}

.rt {
  text-align: right;
}

.Cell:not(.hidden):hover {
  border-style: outset;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.4)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.5, transparent), color-stop(1, rgba(255, 255, 255, 0.15)), to(transparent));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
}

.Cell:not(.hidden):active {
  border-style: inset;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(255, 255, 255, 0.15)), color-stop(0.5, rgba(255, 255, 255, 0.4)), to(transparent));
  background-image: -webkit-linear-gradient(transparent 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100%, rgba(255, 255, 255, 0.4) 50%);
  background-image: -moz-linear-gradient(transparent 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100%, rgba(255, 255, 255, 0.4) 50%);
  background-image: -ms-linear-gradient(transparent 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100%, rgba(255, 255, 255, 0.4) 50%);
  background-image: -o-linear-gradient(transparent 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100%, rgba(255, 255, 255, 0.4) 50%);
  background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 100%, rgba(255, 255, 255, 0.4) 50%);
}

.hidden {
  background: none;
  pointer-events: none;
}

.hidden>span {
  visibility: hidden;
}

.Cell {
  touch-action: manipulation;
  user-select: none;
}

.Cell:active {
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .base,
  .vynos {
    width: 100% !important;
  }

  .Cell {
    font-size: 10pt;
    min-height: 36px;
    /* мінімум для пальця */
  }

  .Sym {
    font-size: 11pt;
  }

  .Num,
  .Ar {
    font-size: 7pt;
  }

  #menu {
    width: 90vw;
    left: 5vw;
    font-size: 12pt;
  }

  #menu>button {
    width: 90%;
    height: 44px;
    font-size: 14pt;
  }

  #gTimerl,
  #gTimers {
    font-size: 18pt;
  }

  .Cell1 {
    font-size: 3vw !important;
  }
}

@media (hover: none) {
  .Cell:not(.hidden):hover {
    box-shadow: none;
    background-image: none;
    border-style: inset;
  }
}