/* Farbwerte als Variablen definieren */
:root {
  --game-color: rgb(134 173 113);
  --game-color-dark: #7b7b7b;
  --base-color: rgb(134 173 113);
  --base-color-dark: rgb(36 62 22);
  --base-color-grey: rgb(154 177 141);
  --food-color: rgb(134 173 113);
  --co2-bar-positive: #679ddb; /* Blue for positive CO2 storage */
  --alert: #e27859;
  --co2-bar-inactive: #b7bab5; /* Grey for inactive CO2 score*/
}

/* Reset margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

/* Dragging komplett unterbinden */
img,
.place,
.carousel,
.highscore-item,
.avatar,
.player-img,
.player-img-container,
.tile,
.navicon,
button {
  -webkit-user-drag: none;
}

.preload {
  background-image: url("../img/pano/food_crops-1.png"),
    url("../img/pano/forest-1.png"), url("../img/pano/forest-2.png"),
    url("../img/pano/meat_production-1.png"),
    url("../img/pano/meat_production-2.png"),
    url("../img/pano/meat_production-3.png"), url("../img/pano/pano-1.png"),
    url("../img/pano/wetland-1.png"), url("../img/pano/wetland-2.png");
  display: none;
}

/* Ensure the HTML and body take up the full height */
html,
body {
  height: 100%;
  margin: 0;
  background-color: var(--base-color-dark);
}

body {
  margin: 0;
  padding: 0;
  font-family: "PT Sans", sans-serif;
  overflow: hidden;
  transform-style: preserve-3d;
}

h1 {
  position: absolute;
  top: 2%;
  left: 0;
  right: 0;
  font-size: 9vw;
  letter-spacing: 0.07em;
  color: var(--base-color-grey);
  opacity: 0.8;
}

.navicon {
  cursor: pointer;
  border-radius: 100%;
  width: 6vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  box-shadow: inset 0px 0px 0px 8px #fff, 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.navicon.check {
  background-color: var(--base-color);
}

button {
  font-weight: bold;
  font-size: 1.5em;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 15px;
  border: solid 5px;
  border-color: var(--base-color);
  color: var(--base-color-dark);
  margin-top: 4.5vh;
}

.bottom {
  z-index: 100;
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
}

@font-face {
  font-family: "Wilson ExtraBold";
  src: url("../fonts/mnkywilson-extrabold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Wilson Medium";
  src: url("../fonts/mnkywilson-medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body,
html {
  font-family: "Wilson Medium", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.headline,
.title {
  font-family: "Wilson ExtraBold", Arial, sans-serif;
}