html, body {
  margin: auto;
  height: 100%;     /* Για να μην γίνεται scrolling */
  touch-action: none; /* Για να μην κινείται ο canvas όταν γίνεται drag */

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
  background-color: rgb(63, 134, 196); /* Sky color */
  color: black;
}
#background2 {
  position: fixed;
  top: 21.5%;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(54, 176, 233); /* Sea color */
  z-index: 1;
}
canvas {
  display: block;
  margin: auto;
  height: 100%;     /* Για να μην γίνεται scrolling */
  touch-action: none; /* Για να μην κινείται ο canvas όταν γίνεται drag */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.loadingclass {
}
img {
    max-width: 100%;
    max-height: 100%;
}
.buttons {
  position: absolute;
  z-index: 1;
}
.inputbox {
  position: relative;
  font-family: "Arial Narrow Bold";
  font-weight: normal;
  background-color: rgb(48, 98, 213);
  color: white;
  border: none;
  z-index: 1;
}
.inputbox:focus {
  position: relative;
  outline: none;
  z-index: 1;
}
.inputbox::selection {
  position: relative;
  background: grey;
  z-index: 1;
}

@font-face {font-family: "Arial Narrow Bold"; src: url("ARIALNB.TTF") format("truetype"); }