#imageContainer{
    max-height: 100%;
  }

    .button{
        position: absolute;
        z-index: 9998;
    
    }

    .a-scene{
        position: absolute;
        z-index: 1;
    }

    #htm-btn-1{
        position: absolute;
        left: 25%;
        right: 55%;
        z-index: 9998; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
    }

    #htm-btn-2{
        position: absolute;
        right: 1.5%;
        z-index: 9998; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(3px 3px 22px #2b2b2b);
    }

    #htm-btn-3{
        position: absolute;
        left: 50%;
        right: 22%;
        z-index: 9998; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(3px 3px 22px #2b2b2b);
    }

    #next-button{
      display: none;
      position: absolute; 
      top: 15px;
      left: 20%; 
      right: 45%;
      z-index: 9999;
      filter: drop-shadow(3px 3px 22px #2b2b2b);
      border-width: 2px;
      border-color: whitesmoke;
      color: whitesmoke;
    }

    #captions{
        position: absolute;
        left: 1%;
        right: 1%;
        bottom: 2.5%;
        z-index: 9999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(3px 3px 22px #2b2b2b);
        background-color: #2b2b2b;
        opacity: 0.88;
        display: none;
    }

    #locationModal{
        display: none; 


        position: absolute;
        z-index: 9999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: whitesmoke;
        border-radius: 9px;
        padding: 2rem;
        text-align: center;
    }

    
    #canolaModal{
        display: none;
        
        position: absolute;
        z-index: 9999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: whitesmoke;
        border-radius: 9px;
        padding: 2rem;
        text-align: center;
    }

    #argusModal{
        display: none;
        
        position: absolute;
        z-index: 9999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: rgb(242, 246, 255);
        border-radius: 9px;
        padding: 2rem;
        text-align: center;
        overflow-y: auto;
    }

    .contentModal{
      left: 2%;
      right: 2%;
      top: 9%;
      bottom: 13%;

      overflow-y: auto;
    }

    #miniGameModal{
      left: 1%;
      right: 1%;
      top: 1%;
      bottom: 1%;

        display: none;

        position: absolute;
        z-index: 999999999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: whitesmoke;
        border-radius: 9px;
        padding-top: 20px;
        text-align: center;
    }


    @media (max-width: 1200px) {
      /* for smaller screens */ 

      .contentModal{
        left: 2%;
        right: 2%;
        top: 9%;
        bottom: 12%;
      }

      #next-button{
        top: 15px;
        left: 19%; 
        right: 45%;
      }
    
      #htm-btn-3{
        left: 57%;
        right: 24%;
        z-index: 9998; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(3px 3px 22px #2b2b2b);
      }

       #htm-btn-1{
        left: 30%;
        right: 50%;
        
    }
    }

    #changeSceneModal, #changeSceneModalLeft, #changeSceneModalReturnRight{
        display: none;
        left: 30%;
        right: 30%;
        top: 20%;
        bottom: 55%;
        
        position: absolute;
        z-index: 9999; 
        margin-left: 1rem; 
        margin-top: 1rem;
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: whitesmoke;
        border-radius: 9px;
        padding: 2rem;
        padding-bottom: 10rem;
        text-align: center;
    }

    #imageModal{
        display: none;
        position: absolute;
        left: 1%;
        right: 1%;
        top: 1%;
        bottom: 1%;

        z-index: 99999; 
        filter: drop-shadow(5px 5px 22px #2b2b2b);
        background-color: whitesmoke;
        border-radius: 9px;
        padding: 2rem;
        text-align: center;

        overflow: auto; 
    }

    #gh-img{
        width: 400px;
    }
    
    #locationModalClose{
        position: absolute;
        right: 0.5%;
        top: 2%;
    }
     
    .a-enter-vr-button{
        display: none;
    }

    .modal-content {
      background-color: #5abdff; /* light grey */
      color: #f8f9fa; /* off-white text */
    }
    .modal-body .btn {
      margin: 10px 0;
      width: 100%;
      max-width: 200px;
    }

    #customModal{
      position: absolute;
      z-index: 9999;
    }

    @keyframes pulseGreen {
      0% {
        background-color: #006400; /* DarkGreen */
      }
      50% {
        background-color: #47b847; /* LightGreen */
      }
      100% {
        background-color: #006400;
      }
    }

.pulse-green {
  animation: pulseGreen 3s infinite;
}