@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Mynerve&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
*{
  overflow: hidden;
}

@keyframes float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

#maze {
    display: grid;
    grid-template-columns: repeat(20, 50px);
    grid-template-rows: repeat(10, 50px);
    grid-gap: 0px;
    position: absolute;
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: white;
    box-shadow:
    0 0 1px 15px rgb(0, 0, 0); /* outer cyan */
    
  }

  .left {
    position: sticky;
    z-index: -1000;
   
    display: none;
  }
  
  .right {
    position: sticky;
    top: 25%;
    left: 158vh;
    z-index: -1000;
    display: none;

  }
  /* .wall{
    background-color: black;
  }
  .obstacle{
    background-color: red;
  }
  .teleporter{
    background-color: blue;
  } */

  

  .prey::before{
    content: url(img/snake.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  .prey2::before{
    content: url(img/bug.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }

  .character::before {
    content: url(img/character0.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }


  .banana::before {
    content: url(img/banana.png);
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    animation: float-up-down 2s ease-in-out infinite;

  }

  
  .grass::before {
    content: url(img/grass.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }

  .enemy::before {
    content: url(img/croke.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }


  
  .enemy2::before {
    content: url(img/leo.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  #maze .enemy2 {
   
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }


   
  .enemy3::before {
    content: url(img/snake.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  #maze .enemy3 {
   
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }


  
  .enemy4::before {
    content: url(img/snake.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  #maze .enemy4 {
   
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }



  .fish::before {
    content: url(img/fish.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  #maze .fish {
   
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }

  .exit::before{
    content: url("img/goal.png")
    
  }
  
  .teleporter::before{
    content: url(img/warp.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  
  #maze .character {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    visibility: visible;
  }

  #maze .character2 {
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    visibility: visible;
  }
  #maze .character3 {
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    visibility: visible;
  }
  .character2::before {
    content: url(img/character1.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
  .character3::before {
    content: url(img/polar.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }

  #maze .character4 {
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    visibility: visible;
  }
  .character4::before {
    content: url(img/scorpion.png);
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }

  
 
  #maze .banana {
  opacity: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
  
}


  #maze .teleporter {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    /*background-color: blue;*/
  }

  #maze .grass {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    
  }

  #maze .prey {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }
  #maze .prey2 {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }


  
  
  #maze .exit {
    
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
    0 0 40px 10px #fff,  /* inner white */
    0 0 60px 30px #f0f, /* middle magenta */
    0 0 100px 50px #0ff; /* outer cyan */
  }

  #maze .enemy {
   
    opacity: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }
  h2{
    font-family: 'Lobster', cursive;
    font-size: 40px;
  }

  .popup {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    
    }
    
    .menu {
      position: fixed;
      z-index: 9999;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      background-image: url(img/menu3.jpeg);
      display: none;
      justify-content: center;
      align-items: center;
      transform: translate(-50%, -50%) scale(1);
      
      }

    .popup-content {
       background: linear-gradient(135deg, rgba(255, 255, 255, 0.678), rgba(255, 255, 255, 0.34));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 20px;
      border:1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      padding: 20px;
      border-radius: 30px;
      text-align: center;
    
      }
      
      .play-button{    
        color:#2c1d0e;
        width: 180px;
        height: 70px;
        font-size: 40px;
        font-weight: 600;
        border-radius: 15px;
        border-color:#8c5324;
        box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
        font-family: 'Aboreto', cursive;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.418);;
        background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg);
      }

      .close-button{    
        color:#2c1d0e;
        width: 150px;
        height: 65px;
        font-size: 30px;
        font-weight: 600;
        border-radius: 15px;
        border-color:#8c5324;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
        font-family: 'Aboreto', cursive;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.418);;
        background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg);
        margin-top: 20px;
      }

      .close-button2{    
        color:#2c1d0e;
        width: 250px;
        height: 65px;
        font-size: 30px;
        font-weight: 600;
        border-radius: 15px;
        border-color:#8c5324;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
        font-family: 'Aboreto', cursive;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.418);;
        background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg);
        margin-top: 20px;
      }
      #start-btn{  
        color:#2c1d0e;
        width: 150px;
        height: 65px;
        font-size: 30px;
        font-weight: 600;
        border-radius: 15px;
        border-color:#8c5324;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
        font-family: 'Aboreto', cursive;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.418);;
        background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg);
        margin-top: 20px;
      }
      #counter{
        font-family: 'Lobster', cursive;
        font-size: 35px;
        color: white;
        transform: translate(-50%, -50%) scale(1);
        top: 92%;
        left: 50%;
        white-space:nowrap;
        position: absolute;
        text-shadow: 0 1px 0 #949292, 0 2px 0 #919090, 0 3px 0 #919090, 0 4px 0 #919090, 0 5px 0 #919090, 0 6px 1px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
      }
      .titolo{
        position: sticky;
        width: 30%;
        top:15px;
        z-index: 999;
        animation: float-up-down 2s ease-in-out infinite;
      }

      .cornice{
        z-index: -9999;
        transform: translate(-50%, -50%) scale(1);
        top: 50%;
        left: 50%;
        display: none;
        position: absolute;
      }