@font-face {
  font-display: swap;
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/pacifico-v22-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'LXGW WenKai Mono TC';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/lxgw-wenkai-mono-tc-v5-latin-regular.woff2') format('woff2');
}

body {
    font-family: 'LXGW WenKai Mono TC';
    font-size: 22px;
    color:#aaaaaa;
}

* {
  box-sizing: border-box;
}

select {
  /* Entfernt das Standard-Design des Browsers (z.B. den Pfeil) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Hintergrund und Rahmen */
  background-color: white;
  border: none;
  outline: none; /* Entfernt den blauen Fokus-Ring */

  /* Text-Styling */
  font-family: inherit; /* Nutzt die Schriftart der Umgebung */
  font-size: inherit;
  color: inherit;
  cursor: pointer;

  /* Optional: Ein wenig Padding für bessere Klickbarkeit */
  padding: 0;
  margin: 0;
  max-width: 8em;
}

/* Entfernt den IE-spezifischen Pfeil */
select::-ms-expand {
  display: none;
}

input[type="number"] {
  /* Standard-Design entfernen */
  appearance: none;
  -moz-appearance: textfield; /* Speziell für Firefox */
  
  /* Hintergrund und Rahmen */
  background-color: white;
  border: none;
  outline: none;

  /* Text-Styling */
  font-family: inherit;
  font-size: inherit;
  color: black;
  padding: 0;
  margin: 0;
  
  /* Breite anpassen - da Inputs standardmäßig recht breit sind */
  width: auto;
  max-width: 100%;
}

/* Entfernt die Spin-Buttons in Chrome, Safari, Edge und Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.logoDiv {
  background-color:#ffffff;
  padding:0px;
  text-align:center;
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:auto;
    height:3em;
}

.img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:auto;
    height:3em;
}

.mainMenuDiv {
   overflow:auto
}

.subMenuDiv {
  overflow:auto
}

.contentDiv {
  overflow:auto
}

.whiteDiv {
  height:500px
}

.menu {
  float: left;
  width: 16.66%;
  text-align: center;
}

.imgTileDiv {
  float: left;
  width: 16.66%;
  text-align: center;
}

.imgTile {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:80%;
    padding: 0.5em 0em;
}

.barBox {
  float: left;
  width: 100%;
  height: 10px;
  text-align: center;
  background-color: #aaaaaa;
  color: #2b2b2b;
  padding: 1px;
}

.bar {
  float: left;
  width: 25%;
  height:8px;
  text-align: center;
  background-color: #cec110;
  color: #2b2b2b;
  vertical-align: middle;
}

.menu a {
  background-color: #eeeeee;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: #2b2b2b;
  font-family: 'Pacifico';
  font-size: 22px;
}

.main a {
  color: #2b2b2b;
  font-weight: bold;
}

.main {
  float: left;
  width: 100%;
  padding: 0 20px;
}

.mainSideBySide {
  float: left;
  width: 50%;
  padding: 0 20px;
}

.smallInfo {
  font-size: 15px;
}

.about {
  background-color: #eeeeee;
  float: left;
  width: 100%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

h1 {
  font-family: 'Pacifico';
}

h2 {
  font-family: 'Pacifico';
}

.footer {
  font-family: 'Pacifico';
  background-color:#ffffff;
  text-align:center;
  padding:10px;
  margin-top:7px;
}

.pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    padding: 10px 0px;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .about, .imgTileDiv {
    width: 100%;
  }
}