html,
body {
  background: black;
  height: 100%;
}
.vertical-text {
  /*https://davidwalsh.name/css-vertical-text*/
  transform: rotate(90deg);
  transform-origin: left top 0;
  position: absolute;
  left: 90px;
  top: 5px;
  margin-right: 20px;
}
a {
  text-decoration: none;
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu__link {
  display: inline-block;

  text-decoration: none;
  position: relative;
  padding: 14px 0;
  font-family: "Muli", sans-serif;
  font-weight: bold;
  font-size: 1.2em;
}

.menu__link svg {
  fill: none;
  stroke: #70aec9;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 338;
  stroke-dashoffset: 338;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 60px);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  z-index: -1;
}

.menu__link--active svg {
  stroke: #ff4c4c;
}

.menu__link--active svg,
.menu__link:hover svg {
  stroke-dashoffset: 0;
  opacity: 1;
  -webkit-transition: opacity 0s,
    stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0s,
    stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

h3 {
  margin: 15px 0 10px;
  font-weight: 400;
  font-size: 18px;
  color: var(--b3Clr);
}

a {
  text-decoration: none;
}

footer {
  position: fixed;
  bottom: 0;
}

.grid-table {
  /*grid in grid table for game*/
  border: none;
  color: yellow;
  font-size: 1.5em;
  table-layout: fixed;
  margin-top: 10px;
  width: 90%;
}

.grid-table-td {
  border: none;
  width: 60px;
}

.grid-table-tr {
  border: none;
  height: 60px;
  text-align: center;
}

.grid-table-tr-result {
  height: 70px;
}

#grid-container {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  display: grid;
  height: auto;

  text-align: center;
  padding: 2px;
}

#grid-table-container {
  display: grid;
  height: auto;
  margin-left: 20px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(4, minmax(50px, 1fr));

  grid-template-rows: repeat(4, minmax(50px, 1fr));
}
.in {
  width: 55px;
  height: 55px;
  border: none;
  background-size: 55px !important;

  padding-left: 20%;
}
#grid-container-main {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: black;
  display: grid;
  height: auto;
  margin-left: 20px;

  grid-template-columns: repeat(3, minmax(200px, 4fr));

  text-align: center;
  padding: 2px;
}
#uppgiftText2 {
  padding-left: 5px;
}
/* -----------------------------
110-SYMBOLTAL
*/
#grid-container {
  width: 100%;
  box-sizing: border-box;
  background: black;
  display: grid;
  height: auto;
  margin-left: 20px;
  grid-template-columns: 360px 120px 120px 120px 120px;
  grid-template-rows: 50px 60px 250px 50px 50px;
  text-align: center;
  padding: 2px;
  grid-gap: 3px;
}
#uppgiftText {
  color: white;
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
}
#calcBarRows {
  padding-left: 5px;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  text-align: center;
}
#fooBarRows {
  background-color: darkolivegreen;
  color: yellow;
  padding-left: 5px;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  text-align: center;
}
/*                    ----------------------------------*/
.grid-group {
  background: rgba(199, 136, 85, 0.932);
  /* Цвет фона */
  outline: 2px solid #000;
  /* Чёрная рамка */
  border: 3px solid #fff;
  /* Белая рамка */
  border-radius: 10px;
  /* Радиус скругления */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  color: #000;
}
.grid-group-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.col-item {
  height: 60px;
}

.grid-table-container-row {
  display: grid;
  height: auto;
  padding-top: 10px;

  color: yellow;
  grid-template-columns: repeat(4, minmax(40px, 1fr));

  grid-template-rows: repeat(1, minmax(35px, 1fr));
  border: solid 2px;
  border-radius: 10px;
}

.grid-table-container-col {
  display: grid;
  height: auto;
  margin-left: 20px;

  grid-template-columns: repeat(1, minmax(50px, 1fr));
  color: yellow;
  grid-template-rows: repeat(4, minmax(50px, 1fr));
  border: solid 2px;
  border-radius: 10px;
}

.menu {
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu__link {
  display: inline-block;

  text-decoration: none;
  position: relative;
  padding: 14px 0;
  font-family: "Muli", sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 2em;
  letter-spacing: 0.04em;
}

.menu__link svg {
  fill: none;
  stroke: #70aec9;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 338;
  stroke-dashoffset: 338;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 60px);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  transition: stroke-dashoffset 0s 0.2s, opacity 0.2s;
  z-index: -1;
}

.menu__link--active svg {
  stroke: #ff4c4c;
}

.menu__link--active svg,
.menu__link:hover svg {
  stroke-dashoffset: 0;
  opacity: 1;
  -webkit-transition: opacity 0s,
    stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0s,
    stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (max-width: 1200px) {
  .gameName {
    font-size: 1.5em;
  }
}

@media (max-width: 650px) {
  .gameName {
    font-size: 1.2em;
    font-style: italic;
    font-family: sans-serif;
  }

  .gameName2 {
    font-size: 1.2em;
    font-style: italic;
    font-family: sans-serif;
  }

  .in {
    width: 40px;
    height: 40px;
    background-size: 40px !important;
    border: none;
  }

  .col-item {
    height: 50px;
  }

  .grid-table-container-col,
  .grid-table-container-row {
    font-size: 1.2em;
  }

  .grid-table-td {
    width: 50px;
  }

  .grid-table-tr {
    height: 50px;
  }

  .grid-table-tr-result {
    height: 60px;
  }
}