@font-face {
  font-family: "myCostumFont";
  src: url(adds/fonts/Ribeye-Regular.ttf);
}
body {
  font-family: "myCostumFont", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("adds/img/10_other/desert.png");
  background-color: #f1a44e;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.dimensions {
  height: 480px;
  width: 720px;
}

.dimensions-legal-notice {
  width: 720px;
  height: 820px;
}

.hidden {
  display: none !important;
}

h1 {
  font-weight: bold;
  font-size: 48px;
  text-shadow: 4px 2px 8px rgba(0, 0, 0, 0.5);
}

canvas {
  background-color: black;
  display: block;
}

.global-div {
  background-image: url("adds/img/9_intro_outro_screens/start/startscreen_1.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.navi-div {
  padding-bottom: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.setting-div {
  align-items: unset;
  background-image: url("adds/img/5_background/first_half_background.png");
  background-size: 100% 100%;
}

.setting {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(222, 215, 215, 0.83);
}

.settingKinds {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.setting p {
  font-size: 22px;
}

.audio-language input,
.audio-language img {
  cursor: pointer;
}

.audio-language img {
  width: 60px;
  height: 60px;
}

.german-size {
  font-size: 17px;
}

.audio-language img:hover {
  background-color: rgba(237, 231, 231, 0.5);
}

.switch-language {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-div {
  align-items: unset;
  background-image: url("adds/img/5_background/second_half_background.png");
  background-size: 100% 100%;
}

.story {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(222, 215, 215, 0.83);
}

.story-container {
  display: block;
}

.story p,
.legal-notice p {
  font-size: 17px;
  margin: 0;
  width: 100%;
  text-align: center;
}

.legal-notice-div {
  align-items: unset;
  background-image: url("adds/img/5_background/first_half_background.png");
  background-size: 100% 100%;
}

.legal-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(222, 215, 215, 0.83);
}

.legal-notice p {
  margin: 8px;
  word-break: break-all;
}

.end-div-lost {
  align-items: unset;
  justify-content: flex-end;
  background-image: url("adds/img/9_intro_outro_screens/game_over/oh no you lost!.png");
  background-color: rgba(0, 0, 0, 0.5);
  background-size: 100% 100%;
  flex-direction: column-reverse;
}

.end-div-win {
  align-items: unset;
  justify-content: flex-end;
  background-image: url("adds/img/9_intro_outro_screens/win/win_2.png");
  background-color: #422d0f;
  background-size: 100% 100%;
  flex-direction: column-reverse;
}

.end-screen-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  padding-top: 18px;
}

.below-control,
.below-control-audio {
  width: 720px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
}

.below-control-audio p {
  font-size: 20px;
}

.checkbox-audio {
  height: 16px;
  width: 16px;
}

.below-control p {
  font-size: 20px;
}

.top-audio-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* position: absolute; */
  top: 24%;
  left: 50%;
  /* transform: translate(-50%, -150%);
  z-index: 2; */
}

.top-audio {
  display: flex;
  gap: 18px;
  flex-direction: row;
}

.top-audio-img {
  width: 30px;
  height: 30px;
}

.top-audio-img:hover {
  cursor: pointer;
  background-color: rgba(237, 231, 231, 0.5);
}

.wrong-dimensions {
  display: flex;
  background-color: black;
  width: 100%;
  height: 100vh;
  z-index: 999;
  flex-direction: column;
  position: absolute;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.wrong-dimensions span {
  color: red;
  font-size: 60px;
  text-align: center;
}

.wrong-dimensions img {
  height: 20%;
  width: 50%;
}

.canvas-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}