:root {
  /*main colours*/
  --seal_brown: #30231b;
  --light_grey: #B0B0B0;

  /*secondary colours*/
  --chocolate_tarte: #372d30;
  --antarctica: #c6c5c8;

  --margin-size: 2.5em;
  /*die Größe der Margins lassen*/
}

html {
  font-size: 18px;
  font-family: "acumin-pro", sans-serif;
  /*Acumin Pro Regular*/
  font-weight: 400;
  font-style: normal;
  background-color: var(--seal_brown);
  text-align: center;
  color: var(--light_grey);
  max-height: 100%;
  margin: auto;
}

p {
  margin-bottom: 1em;
}

h1 {
  font-size: 40px;
  font-family: "acumin-pro", sans-serif;
  /*Acumin Pro Bold*/
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3%;
}

h2 {
  font-size: 36px;
}

h3 {
  font-weight: 700;
}

background {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

background img {
  /*größeneinstellungen für background image*/
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 1000px;
  max-height: 100%;
}

#dummy-canvas {
  align-self: center;
  justify-self: center;
  z-index: 2;
}

@media(max-aspect-ratio:1/1) {
  #dummy-canvas {
    width: 100vw;
    height: 100vw;
  }
}

@media(min-aspect-ratio:1/1) {
  #dummy-canvas {
    height: 80vh;
    width: 80vh;
  }
}

#defaultCanvas0 {
  width: 100% !important;
  height: 100% !important;
}


#title {
  /*Title Bild*/
  width: 100%;
  max-width: 40em;
}

table {
  width: 100%;
  text-align: center;
  height: 100%;
}

tr {
  border-top: var(--light_grey) 1px solid;
}

tr:first-child {
  border-top: var(--light_grey) 0px solid;
}

td:nth-child(2) {
  border-left: var(--light_grey) 1px solid;
  border-right: var(--light_grey) 1px solid;
}


.main td:nth-child(2) {
  padding-top: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  /*Abstand zu rändern im main pages*/
}

td {
  vertical-align: middle;
}

td:first-child,
td:last-child {
  width: var(--margin-size);
}

.margin {
  height: var(--margin-size);
}

.margin-bottom {
  display: none;
}

.buttons {
  height: var(--margin-size);
}

.hidden {
  display: none;
}

.button {
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 18px;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.main {
  min-height: 100%;
  padding: auto;
  max-width: 1000px;
}

.scroll {
  display: block;
  height: 100%;
  overflow-y: scroll;
}

a {
  display: block;
  color: var(--light_grey);
  font-size: 18px;
}

.b-dot {
  width: 10px;
  /* Fixed small size */
  height: 10px;
  /* Ensure it's circular */
  background-color: #02A9EA;
  /* Blue color */
  border-radius: 50%;
  /* Make it circular */
  display: block;
  /* Allow flexibility in placement */
}

.b-dot:first-child {
  margin-bottom: 45vh;
}

.b-dot-container {
  display: inline-block;
  /* Keep the container slim */
  text-align: center;
  /* Center the dots */
}

.b-dot+.b-dot {
  margin-top: 5px;
  /* Space between the two dots */
}

@media only screen and (min-width: calc(1000px + 3em)) {

  td:first-child,
  td:last-child {
    width: 25%;
  }

  td:nth-child(2) {
    width: 1000px;
  }
}

/*Italic Schnitte
font-family: "acumin-pro",
sans-serif;
/*Acumin Pro Italic
font-weight: 400;
font-style: italic;*/

/*font-family: "acumin-pro",
sans-serif;
/*Acumin Pro Bold Italic
font-weight: 700;
font-style: italic;*/