/*	===================================================================
    Urheberrechtshinweis / Copyright

    Die Gestaltung, Inhalte und Programmierung dieser Seiten
    unterliegen dem Urheberrecht. Urheber ist Ralph Freibeuter.
    Eine Verwendung der Inhalte außerhalb der vom Urheber betriebenen
    Domains ist nicht gestattet. Ein Verstoß gegen diese Bestimmungen
    wird als Urheberrechtsverletzung betrachtet und bei Bekanntwerdung
    unter Einsatz von Rechtsmitteln geahndet.

    Für die folgenden Komponenten liegt das Urheberrecht bei Dritten:
    - Ocean Waves im Header (SVG Animation)
    - Emoticons im Chat (jeweiliger System-/Fontshersteller)
    - Wetteranzeige
    - genannte Titel in der Rubrik Bücher
    - verwendete Schrift Montserrat und Learning Curve Regular

    Ralph Freibeuter
    Rudolf-Breitscheid-Str. 22
    40595 Düsseldorf
===================================================================  */
#GameWrapper {
  position: relative;
  width: 100%;
  margin-top: 20px;
  height: 1300px;
  overflow: auto;
  opacity: 0;
  transition: opacity 1s ease-in 0s;
}

#GameWrapper input[type="text"] {
  all: none;
  position: absolute;
  display: flex;
  border: 2px solid black;
  padding: 0;
  margin: 0;
  width: 38px;
  height: 38px;
  text-align: center;
  justify-content: center;
  font-family: Montserrat-Bold;
  font-size: 10pt;
  font-weight: bold;
  color: var(--themeDark);
  overflow: hidden;
  left: 0;
  top: 0;
  transition: all 2s ease-in 0s !important;
}

#GameWrapper div.info {
  all: none;
  position: absolute;
  display: flex;
  width: 20px;
  height: 20px;
  cursor: pointer;
  top: 0;
  left: 0;
  transition: all 1s ease-in 0s !important;
}

#GameWrapper div.info :first-child {
  text-decoration: none;
  font-style: italic;
  color: var(--theme);
}

#GameWrapper div.info i {
  align-self: flex-end;
  margin-bottom: -5px;
}

#GameWrapper div.info u {
  width: 100%;
  margin-right: 4px;
  text-align: right;
}

#GameHint {
  position: absolute;
  display: none;
  opacity: 0;
  z-index: 10;
  max-width: 20%;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--themeDark);

  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 11pt;
  line-height: 14pt;
  color: var(--themeHead);
  word-wrap: break-word;

  transition: top 0.5s, left 0.3s, opacity 0.3s;
}

#GameWrapper.grid input.grid {
  background-color: rgba(0, 0, 0, 0.02);
}

span.solution {
  letter-spacing: 0.2em;
}