/* Defining the spin animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Adding a custom font */
@font-face {
  font-family: 'zabras';
  src: url('fonts/zabars.ttf') format('truetype');
}

/* Styling the body element */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-image: url('img/desert_bild/bild2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'zabras', Arial, Helvetica, sans-serif;
}

/* Styling the h1 header */
h1 {
  font-size: 64px;
  letter-spacing: 3px;
  color: yellow;
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 100px 20px 30px rgba(19, 19, 18, 0.8), 40px 30px rgba(17, 17, 16, 0.75);
  position: relative;
  animation: slideIn 2s forwards, stayInPlace 2s 2s forwards;
}

/* Defining the slideIn animation */
@keyframes slideIn {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

/* Defining the stayInPlace animation */
@keyframes stayInPlace {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  99% {
      transform: scale(3);
      opacity: 0;
  }
  100% {
      transform: scale(3);
      opacity: 0.5;
  }
}

/* Styling the start and game over screens */
#start-screen,
#game-over-screen,
#lost-screen,
#won-screen{
  position: relative;
  width: 720px;
  height: 480px;
  margin: 20px auto;
  border: 100px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: -40px -40px 80px rgba(0, 0, 0, 0.75), 40px 40px 80px rgba(16, 16, 16, 0.75);
}

/* Styling images in the screens */
#start-screen img,
#game-over-screen img,
#lost-screen img,
#won-screen img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  box-shadow: -40px -40px 80px rgba(0, 0, 0, 0.75), 40px 40px 10px rgba(17, 17, 16, 0.75);
}

/* Styling buttons on the screens */
#start-screen button,
#game-over-screen button,
#lost-screen button,
#won-screen button,
.fullscreen-button,
.exit-fullscreen-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 60px;
  font-family: 'zabras', Arial, Helvetica, sans-serif;
  background-color: #129309;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: spin 12s linear infinite;
  color: yellow;
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 80px;
  box-shadow: 50px 50px 10px rgba(17, 17, 16, 0.75);
}

/* Styling fullscreen buttons */
.fullscreen-button,
.exit-fullscreen-button {
  background-color: #4CAF50;
}

/* Defining the backgroundFadeInOut animation */
@keyframes backgroundFadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Styling the keyboard instructions */
.keyboard-instructions {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 300px;
  height: 400px;
  color: rgb(245, 249, 245);
  padding: 20px;
  overflow: hidden; /* Ensures overflow content is hidden */
}

/* Additional styling for keyboard instructions */
.keyboard-instructions {
  position: absolute;
  top: 470px;
  right: 20px;
  width: 300px;
  height: 400px;
  color: rgb(245, 249, 245);
  padding: 20px;
  overflow: hidden; /* Ensures overflow content is hidden */
}

/* Styling for the cactus images in the keyboard instructions */
.keyboard-instructions::after,
.keyboard-instructions::before {
  content: '';
  position: absolute;
  bottom: 0; /* Align to bottom */
  right: 0;
  left: 0;
  height: 300px; /* Image height */
  background-image: url('img/kaktus/kaktus3.png');
  background-size: contain; /* Increase background size */
  background-repeat: no-repeat;
  background-position: center bottom; /* Position background at the bottom */
  opacity: 1; /* Changed to 1 to make visible, set to 0 if you want to keep fade in/out animation */
  animation: backgroundFadeInOut 5s infinite;
  z-index: -1;
  pointer-events: none;
}

/* Moving the second cactus */
.keyboard-instructions::before {
  left: 50px; /* Move second cactus to the right */
}

/* Moving the third cactus */
.keyboard-instructions::after {
  left: 100px; /* Move third cactus to the right */
}

/* Additional cacti */
.keyboard-instructions::after:nth-child(3) {
  left: 150px; /* Move fourth cactus to the right */
}

.keyboard-instructions::after:nth-child(4) {
  left: 200px; /* Move fifth cactus to the right */
}

/* Styling keys */
.key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* Styling images within keys */
.key img {
  margin-bottom: 10px;
}

/* Defining the swing animation */
@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

/* Defining the blink animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Defining the fade animation */
@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Styling key descriptions */
.key-description {
  font-size: 35px;
  color: yellow;
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Defining the fadeOut animation */
@keyframes fadeOut {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      display: none;
  }
}

/* Styling elements for mobile devices */
@media only screen and (max-width: 720px) {
  canvas {
      width: 100%;
  }
}

@media only screen and (max-height: 480px) {
  canvas {
      height: 100vh;
  }

  h1 {
      display: none;
  }
}

/* Styling instructions */
.instructions {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 10;
  color: rgb(218, 218, 204);
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 30px;
  box-shadow: 50px 50px 10px rgba(17, 17, 16, 0.75);
  box-shadow: 0px 0px 89px rgba(150, 232, 73, 0.75), 40px 40px 80px rgba(16, 16, 16, 0.75);
}

/* Styling ordered lists within instructions */
.instructions ol {
  padding-left: 20px;
}

/* Styling list items within instructions */
.instructions li {
  margin-bottom: 10px;
}

/* Styling the close button */
.close-button {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  font-family: 'zabras', Arial, Helvetica, sans-serif;
  background-color: #df114f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: spin 10s linear infinite;
  color: yellow;
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 20px;
  box-shadow: 50px 50px 10px rgba(17, 17, 16, 0.75);
}

/* Styling the instruction button */
.btn-instru {
  position: fixed; /* Ensures the button stays in the same place even when scrolling */
  bottom: 20px; /* Position it 20px from the bottom of the screen */
  left: 90%; /* Position it 50% from the left of the screen */
  transform: translateX(-50%); /* Adjust the position to center it horizontally */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 40px;
  font-family: 'zabras', Arial, Helvetica, sans-serif;
  background-color: #df114f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgb(245, 245, 235);
  border: solid 3px rgb(20, 204, 17);
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  box-shadow: 50px 50px 10px rgba(17, 17, 16, 0.75);
  z-index: 1000; /* Ensures the button is on top of other elements */
  animation: fade 2s infinite;
  animation: swing 2s infinite, blink 2s infinite;
}

/* Defining the fade animation for buttons */
@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Styling the mute icon */
.muteIcon {
  height: 30px;
  width: 40px;
  position: absolute;
  top: 250px;
  left: 500px;
}

/* Styling the footer */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0 0px 60px rgba(0, 0, 0, 0.30); /* More blurred shadow */
}

/* Adding a blur effect to the top border of the footer */
footer::before {
  content: '';
  position: absolute;
  top: -5px; /* Positioning the top blur */
  left: 0;
  right: 0;
  height: 23px; /* Height of the blur area */
  background: #129309; /* Color of the blurred border */
  filter: blur(5px); /* Blur effect */
  z-index: -1; /* Positioning behind the footer content */
}

/* Styling the footer navigation */
footer nav ul {
  padding: 0;
  list-style: none;
}

/* Styling the footer navigation list items */
footer nav ul li {
  display: inline;
  margin: 0 10px;
}

/* Styling the footer navigation links */
footer nav ul li a {
  color: #fff;
  text-decoration: none; /* Removing underline */
  font-size: 25px; /* Setting font size */
}

/* Adding hover effect to footer navigation links */
footer nav ul li a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Styling paragraph elements */
p {
  font-size: 25px; /* Setting font size */
}

/* Styling the canvas container */
/*#canvas-container {
  position: relative;
  width: 720px;
  height: 480px;
  border: 1px solid rgb(159, 30, 30);
  z-index: 1000;
}*/

/* Additional styling for the mute icon */
.muteIcon {
  height: 50px;
  margin-top: 20px;
  cursor: pointer;
  z-index: 1000;
}

/* Styling the canvas element */
canvas {
  border: 50px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.75), 50px 50px 10px rgba(17, 17, 16, 0.75);
  display: block;
  width: 1000px; /* Canvas width */
  height: 500px /* Canvas height */
}

/* Hiding the mute icon */
.hidden {
  display: none;
}

/* Styling the rotate message */
#rotate-message {
  display: none; /* Hides the element by default */
  position: fixed; /* Fixes the position on the screen */
  top: 50%; /* Centers the element vertically */
  left: 50%; /* Centers the element horizontally */
  transform: translate(-50%, -50%); /* Corrects centering */
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white; /* White text */
  padding: 20px; /* Padding */
  font-size: 24px; /* Font size */
  border-radius: 10px; /* Rounded corners */
  z-index: 1000; /* Ensures it appears above other elements */
}

/* Hiding mobile controls on larger screens */
#mobile-controls {
  display: none;
}

/* Displaying mobile controls on small screens */
@media only screen and (max-width: 720px) {
  #mobile-controls.show-controls {
      display: flex;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      gap: 10px;
      z-index: 1000; /* Ensures controls are on top */
  }
}

/* Styling control buttons */
.control-btn {
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: #129309;
  color: yellow;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-text-stroke: 1px black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  box-shadow: 50px 50px 10px rgba(17, 17, 16, 0.75);
}

/* Styling the canvas container */
/*#canvas-container {
  position: relative;
  width: 740px;
  height: 480px;
}*/

/* Ensuring the canvas displays as a block element */
#canvas {
  display: block;
}

/* Styling the collected bottles display */
#collected-bottles {
  position: absolute;
  top: 500px;
  left: 500px;
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
  z-index: 10; /* Ensures the counter is above the canvas */
  display: none; /* Hides the counter initially */
}

/* Hiding the game over screen initially */
#game-over-screen {
  display: none;
  /* Additional styles */
}

.sound-frame{
  display: flex;
  margin-bottom: -40px;
  
}

#sound-off{
  z-index: 99; 
  margin-left: 550px;
  width: 40px;  /* Szerokość przycisku */
   /* Wysokość przycisku */
   display: none;
}

#sound-on{
  z-index: 99; 
  margin-left: 550px;
  width: 40px;  /* Szerokość przycisku */
   /* Wysokość przycisku */
  
}
/*ukrycie class rotate-deviec*/
.d-none {
  display: none;
}

/* stylowanie obrazka url mobile*/
span{
 font-size: 90px;
 color: #108395;
 
}


  .d-none {
    display: none !important;
  }


/*stylowanie przyciskow mobile*/

.mobile-navigation {
  display: none;
  width: 100%;
  justify-content: space-between;
  margin-top: 40px;
  margin-left: 16px;
  gap: 8px;
  position: absolute;
  /*top: 500px;*/
  z-index: 99;
  /*top: 0;*/
  left:0;
  right: 0;
  bottom: 0;
  align-items: end;
}

.mobile-navigation-left {
  display: flex;
  margin-left: 32px;
  margin-bottom: 16px;
  gap: 24px;
  
}

.mobile-navigation-right {
  display: flex;
  margin-right: 48px;
  margin-bottom: 16px;
  gap: 24px;
}

.mobile-button {
  display: flex;
  margin-right: 16px;
  align-items: center;
  justify-content: space-around;
  font-size: 40px;
  font-weight: 600;
 
}
.explain-button {
  height: 28px;
  width: 28px;
}
@media (max-width: 1100px) {
  .mobile-navigation {
      display: flex !important;
      margin-bottom: 8px;
  }

  .rotate-device {
    display: flex !important;
  }
}

/***************************canvas responsive***************mobile*************/
/* Stylizacja rotate-device */
.rotate-device {
  display: none; /* domyślnie ukryty */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  color: white;
  font-size: 2em;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.d-none {
  display: none !important;
}


#start-screen {
  z-index: 500;
}

/*skalierung*/
canvas{
 
  display: block;
}

@media only screen and (max-width: 720px){
  canvas {
    width: 100%;
  }
}

@media only screen and (max-height: 420px){
  canvas {
    height: 100 vh;

  }

 
 
}






/* Ukryj element w poziomym widoku mobilnym */
@media (max-width: 1024px) and (orientation: landscape) {
 
  html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Aby upewnić się, że nie pojawią się paski przewijania */
  }
 
 
  footer{
    display: none;
  }
  .btn-instru{
    display: none;
  }
  canvas{
    border: none;

    border-radius: 0;
   width: 100vw;
   height: 100vh;
   
    
  }
  
  .mobile-navigation{
 /*top: 380px;*/
 display:none;
 
  }
  .keyboard-instructions{
    display: block;
  }

  #start-screen, #game-over-screen, #lost-screen, #won-screen{
    border: none;
    width: 100vw; /* Szerokość całego widoku */
    height: 100vh; /* Wysokość całego widoku */
 

    display: flex;
    justify-content: center;
    align-items: flex-end; /* Ustawienie elementów na dole */
  margin: 0;
  
  }


  /*start, lost, win, */
  .mobile-bg{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Ustawienie elementów na dole */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0; /* Dodanie top, aby zająć całą wysokość */
    background-size: cover; /* Dopasowanie tła */
  
   
  }



  .mobile-bg {
    position: absolute;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Ustawienie elementów na dole */
    position: fixed; /* Ustawienie na fixed, aby zajmowało całą przestrzeń */
    left: 0;
    right: 0;
    bottom: 0;
    top: 0; /* Dodanie top, aby zająć całą wysokość */
  }
  
  .mobile-bg img {
    width: 100%; /* Zapewnia, że obraz zajmuje całą szerokość kontenera */
    height: auto;
  }
  
  .mobile-bg button {
    display: block;
    margin: 20px 0;
    padding: 10px 20px;
    font-size: 16px;
  }


  /*ukrycie przyciskow*/
  .mobile-button{
    display: none;
  }

  
   
 /*ustawienia dla mobilnej nawigacji*/
 /*.mobile-navigation {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}*/

.mobile-navigation-left {
  display: flex;
  margin-left: 32px;
  margin-bottom: 16px;
  gap: 24px;
 

}

.mobile-navigation-right {
  display: flex;
  margin-right: 48px;
  margin-bottom: 16px;
  gap: 24px;
}
/*.sound-frame{
 display:none;
  
}*/
}