html,
body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Chilanka", cursive;
  user-select: none;
  cursor: url("Assets/UI/Cursors/Cursor_Normal.svg"), default;
  font-size: min(1em, 2vh);
}

div.fullscreen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

dialog {
  text-align: center;
}

canvas.fullscreen {
  width: 100vw;
  height: 100vh;
}

/* inventory */

.inventory {
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

#inventory-wrapper {
  position: absolute;
  height: 30vh;
  width: 100%;
  top: -2.5vh;
  display: flex;
  justify-content: center;
  transition: top 0.5s;
}

#inventory-wrapper:not(.visible) {
  top: -23vh;
}

#inventory {
  pointer-events: all;
  background-image: url("Assets/UI/Inventar/Inventar.svg");
  background-size: 100% 100%;
  display: grid;
  grid-template-columns: 18vh 18vh 18vh 18vh;
  grid-template-rows: 18vh;
  gap: 10vh;
  padding: 5vh;
  padding-top: 7vh;
  position: relative;
}

#inventory-buckle {
  background-image: url("Assets/UI/Inventar/Schnalle.svg");
  width: 9.6vh;
  height: 10vh;
  position: absolute;
  bottom: -5vh;
  transition: transform 0.25s;
  transform: rotate(180deg);
  z-index: 3;
  background-size: 100% 100%;
}
#inventory-wrapper:not(.visible) #inventory-buckle {
  transform: rotate(0deg);
}

#inventory-line {
  width: 100%;
  background-image: url("Assets/UI/Inventar/Balken.svg");
  background-size: 100% 100%;
  position: absolute;
  height: 28vh;
  bottom: 100%;
  transition: bottom 0.5s;
  z-index: 2;
}
#inventory-wrapper:not(.visible) #inventory-line {
  bottom: 4vh;
}

.item {
  width: 18vh;
  height: 18vh;
  position: relative;
  flex-shrink: 0;
  place-self: center;
  z-index: 1;
  display: grid;
  place-items: center;
  
  cursor: url("Assets/UI/Cursors/Cursor_Grab.svg"), url("Assets/UI/Cursors/Cursor_Point.svg"), pointer; 
}

.item>img {
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -moz-user-select: none;
  pointer-events: none;
}

.item>span {
  user-select: none;
  -moz-user-select: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 3em;
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
}

#inventory-preview {
  position: absolute;
  width: 20vh;
  left: calc(50% - 10vh);
  top: calc(50% - 10vh);
  scale: 0;
}

#inventory-preview > .item {
  pointer-events: none;
}
#inventory-preview > .item > img {
  filter: drop-shadow(2px 0px 0 white) drop-shadow(0px 2px 0 white) drop-shadow(-2px -0px 0 white) drop-shadow(-0px -2px 0 white);
}

#inventory-preview.show{
  top: -20vh;
  scale:1;
  transition: top 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) 0.6s, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);;
}

/* cursors */

.cursor-talk {
  cursor: url("Assets/UI/Cursors/Cursor_Speak.svg"), url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

.cursor-take {
  cursor: url("Assets/UI/Cursors/Cursor_Grab.svg"), url("Assets/UI/Cursors/Cursor_Point.svg"), pointer; 
}

.cursor-look {
  cursor: url("Assets/UI/Cursors/Cursor_Look.svg"), url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

.cursor-door {
  cursor: url("Assets/UI/Cursors/Cursor_Door.svg"), url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

.cursor-use {
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

.hidden {
  display: none !important;
}

.clickable {
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
}

/* Dialog */
#dialog {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  display: grid;
  grid-template-areas:
  "char name . name2 char2"
  "char text text text char2";

  grid-template-columns: 20vw 10vw 40vw 10vw 20vw;
  grid-template-rows: 20vh 15vh;
  width: 100%;
  z-index: 990;
}


#dialog-text {
  color: white;
  font-size: 2em;
  grid-area: text;
  padding: 1vw;
  padding-top: 2vh;
  flex-grow: 1;
}

#dialog-icon {
  grid-area: char;
  width: 100%;
  align-self: end;
}

#dialog-name {
  grid-area: name;
  width: 100%;
  align-self: end;
  margin-bottom: -3vh;
}

#dialog-text-bg {
  position: absolute;
  width: 70vw;
  height: 24vh;
  bottom: -4vh;
  left: 10vw;
  z-index: -1;
  background-image: url("Assets/UI/Dialog/DialogFenster.svg");
  background-size: 100% 100%;
}

#dialog-text-bg.right {
  left: 18vw;
}

#dialog-text-done {
  position: absolute;
  width: 2.5vw;
  bottom: 1vh;
  right: 1vw;
}

#dialog-overlay {
  z-index: 995;
}

#dialog-options-wrapper {
  width: 100%;
  height: 75vh;
  display: grid;
  place-items: center;
}

#dialog-options {
  pointer-events: all;
  z-index: 1000;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 30vw;
  height: 20vw;
  padding: 1em;
  background-image: url("Assets/UI/Dialog/AntwortFenster.svg");
  background-size: 100% 100%;
  color: white;
}

.dialog-options-option {
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
  display: block;
  padding: 1rem;
  font-size: min(6vh, 3em, 2vw);
  text-align: center;
  position: relative;
}
.dialog-options-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("Assets/UI/Dialog/Box_1.svg") 0 0 no-repeat;
  background-size: 100% 100%;
}
.dialog-options-option:nth-of-type(2n):before {
  background-image: url("Assets/UI/Dialog/Box_2.svg");
}
.dialog-options-option:nth-of-type(3):before,
.dialog-options-option:nth-of-type(4):before {
  transform: rotate(180deg);
}

span.b {
  font-weight: bold;
}
span.i {
  font-style: italic;
}
span.anim {
  animation: float 1.5s infinite ease-in-out;
  display: inline-block;
}
span.gold {
  color: #e99d4d;
}
span.blue{
  color: #1285eb;
} 
span.brown{
  color: #925128;
} 
span.pink{
  color: #fbb1fe;
} 

@keyframes float {
  0% { transform: translate(0px, 0.125em); }
  50% { transform: translate(0px, -0.125em); }
  100% { transform: translate(0px, 0.125em); }
}

/* scene transition overlay */
#scene-overlay {
  z-index: 1010;
  cursor: none;
  background-color: black;
  display: none;
}
#scene-overlay.active {
  display: block;
  animation: scene 2.0s forwards;
}

@keyframes scene {
  0% {clip-path: circle(0%);}
  45% {clip-path: circle(100%);}
  55% {clip-path: circle(100%);}
  100% {clip-path: circle(0%);}
}

/* menu screens */
.menu {
  position: relative;
  box-sizing: border-box;
}
.menu-bg {
  background-image: url("Assets/UI/MainMenu/Background-Looping.png");
}

.click-sign img {
  max-width: 30vw;
}

.click-sign:hover {
  filter: brightness(0.9);
}

.click-sign:active {
  filter: brightness(0.8);
}

#loading-screen {
  z-index: 1499;
  display: grid;
  place-items: center;
  font-size: 5em;
}
#loading-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 480px;
  height: 480px;
  max-height: min(30vw, 30vh);
  max-width: min(30vw, 30vh);
  animation: loading-animation 1s infinite forwards;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotateY(180deg);
}

@keyframes loading-animation {
  0% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-00.png");}
  5% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-01.png");}
  10% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-02.png");}
  15% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-03.png");}
  20% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-04.png");}
  25% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-05.png");}
  30% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-06.png");}
  35% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-07.png");}
  40% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-08.png");}
  45% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-09.png");}
  50% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-10.png");}
  55% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-11.png");}
  60% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-12.png");}
  65% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-13.png");}
  70% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-14.png");}
  75% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-15.png");}
  80% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-16.png");}
  85% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-17.png");}
  90% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-18.png");}
  95% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-19.png");}
  100% {background-image: url("Assets/UI/Loading/Animation/Quip-Anim-20.png");}
}
.loading-text {
  animation: loading-dot 1s infinite;
  animation-delay: var(--i);
}
@keyframes loading-dot {
  from { opacity: 1; }
  to { opacity: 0; }
}

#main-menu-screen {
  z-index: 1500;
}
#main-menu-wrapper {
  display: grid;
  grid-template-areas: 
  "logo logo ."
  "logo logo options"
  "exit . start";
  padding: 1em; 
  padding-top: 0; 
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}
#options-screen {
  z-index: 1600;
  display: grid;
  justify-items: center;
}
#options-screen > div {
  align-self: start;
  position: relative;
}
#options-screen:not(.hidden):not(.hide) {
  animation: blur 0.4s forwards;
}
#options-screen.hide {
  animation: unblur 0.4s forwards !important;
}
#options-screen:not(.hidden) > div {
  animation: options-fly-in 0.4s ease-out forwards;
}
#options-screen.hide > div {
  animation: options-fly-out 0.4s ease-in forwards !important;
}

.options-sign {
  max-height: 100vh;
}

.options-range {
  position: absolute;
  width: 40%;
  background-size: 100% 100%;
}

.options-range input {
  width: 100%;
}

#options-music {
  right: 10%;
  top: 58%;
  background-image: url("Assets/UI/MainMenu/Slider-Empty-1.png");
}
#options-music > .options-background-filled {
  background-image: url("Assets/UI/MainMenu/Slider-Full-1.png");
}
#options-sounds {
  right: 10%;
  top: 80%;
  background-image: url("Assets/UI/MainMenu/Slider-Empty-2.png");
}
#options-sounds > .options-background-filled {
  background-image: url("Assets/UI/MainMenu/Slider-Full-2.png");
}
.options-background-filled {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  pointer-events: none;
}

.options-slider {
  position: absolute;
  top: -1vh;
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  max-height: 10vh;
}

#options-screen input[type="range"]::-webkit-slider-thumb,
#options-screen input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  outline: none;
  border: none;
  font-size: 3em;
}
#options-screen input[type="range"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
  outline: none;
  background: none;
}

#loading-spinner {
  display: block;
  width: 3em;
  height: 3em;
  border: 0.5em solid black;
  animation: spin 1s linear infinite;
}

#main-menu-sign {
  grid-area: logo;
  margin-top: -20px;
  z-index: 1;
}
#main-menu-options {
  grid-area: options;
}
#main-menu-exit {
  grid-area: exit;
}
#main-menu-start {
  grid-area: start;
  justify-self: end;
}
#main-menu-sign img {
  animation: sway 5s ease-in-out alternate-reverse infinite;
  transform-origin: 50% -100%;
  max-width: 50vw;
  max-height: 60vh;
}
#logo-shadow {
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: -1;
  animation: sway-2 5s ease-in-out alternate-reverse infinite !important;
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes sway {
  0% {transform: rotate(-1.5deg);}
  100% {transform: rotate(1.5deg);}
}
@keyframes sway-2 {
  0% {transform: rotate(-1.5deg);}
  100% {transform: rotate(1deg);}
}
@keyframes options-fly-in {
  0% {margin-top: -100vh}
  90% {margin-top: 0vh}
  100% {margin-top: -20px}
}
@keyframes options-fly-out {
  0% {margin-top: -20px}
  10% {margin-top: 0vh}
  100% {margin-top: -100vh}
}
@keyframes blur {
  from {backdrop-filter: blur(0px);}
  to {backdrop-filter: blur(10px);}
}
@keyframes unblur {
  from {backdrop-filter: blur(10px);}
  to {backdrop-filter: blur(0px);}
}

.snail {
  position: absolute;
  pointer-events: none;
}
#snail-1 {
  left: 20%;
  top: 0;
}
#snail-1 img {
  animation: snail-ver 280s infinite linear;
  animation-delay: -90s;
}
#snail-2 {
  top: 20%;
}
#snail-2 img {
  animation: snail-hor 300s infinite linear;
}
@keyframes snail-hor {
  from {transform: translate(100vw, 0)}
  to {transform: translate(-330px, 24vw)}
}
@keyframes snail-ver {
  from {transform: translate( 0, -300px)}
  to {transform: translate(82vh, 100vh)}
}

/* game over screen */
#game-over-screen {
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3em;
  background-image: url("Assets/Images/FinalScreen.png");
  background-size: cover;
  background-position: 50% 50%;
  place-items: center;
  padding: 10vh;
  text-shadow: 2px 0px 0 white, 0px 2px 0 white, -2px -0px 0 white, -0px -2px 0 white;
}

/* game overlay */ 
#game-overlay {
  z-index: 900;
  pointer-events: none;
}

#game-overlay > * {
  pointer-events: all;
}

#game-overlay img.options {
  position: absolute;
  top: 0;
  right: 0;
  width: 5vw;
  padding: 1rem;
  cursor: url("Assets/UI/Cursors/Cursor_Point.svg"), pointer;
  z-index: 10;
}
#game-overlay img.options:hover {
  filter: brightness(0.9);
}
#game-overlay img.options:active {
  filter: brightness(0.8);
}

#hover-item-name {
  position: absolute;
  pointer-events: none;
  background-image: url("Assets/UI/Dialog/Box_1.svg");
  display: inline-block;
  background-size: 100% 100%;
  font-size: 2em;
  color: white;
  margin-top: 20px;
  margin-left: 20px;
  padding: 1rem;
  z-index: 5;
}