@font-face {
  font-family: "Codec-Cold-Regular-trial";
  src: url("../public/Codec-Cold-Regular-trial.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}



html, body, #viewDiv {
    height: 100%;
    margin: 0;
    padding: 0;
  }


#loading {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('../public/background.jpg') center/cover no-repeat;
    align-items: center;
    overflow: hidden;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
  }

#loading .logo {
    position: relative;
    z-index: 2;
    width: 234.472px;
    height: 56px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.7));
    animation: pulse-shadow 1.5s infinite alternate;
  }
  
  @keyframes pulse-shadow {
    0% {
      filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.5)) 
              drop-shadow(0 0 20px rgba(255, 255, 0, 0.3))
              drop-shadow(0 0 30px rgba(255, 220, 0, 0.2));
    }
    50% {
      filter: drop-shadow(0 0 30px rgba(255, 255, 0, 0.8)) 
              drop-shadow(0 0 50px rgba(255, 255, 0, 0.6))
              drop-shadow(0 0 80px rgba(255, 220, 0, 0.4));
    }
    100% {
      filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.5)) 
              drop-shadow(0 0 20px rgba(255, 255, 0, 0.3))
              drop-shadow(0 0 30px rgba(255, 220, 0, 0.2));
    }
  }
  
  #loading.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  #loading.hidden {
    opacity: 0;
    pointer-events: none; 
  }

  #loading{
    display: flex;
    flex-direction: column;
  }

  .logo{
    margin-top: 40.58dvh;
  }
  
  .subtitle{
    display: flex;
    margin-top: 35.146dvh;
width: 252.706px;
height: 24px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Codec-Cold-Regular-trial";
font-size: 17.647px;
font-style: normal;
font-weight: 700;
line-height: 35.294px; 
  }



.esri-view {
    --esri-view-outline-color: none;
  }
  #logo {
    user-select: none;      
    -webkit-user-drag: none; 
    touch-action: none;      
  }




  #sketch-button {
    width: 48px;
    height: 48px;
    padding: 0;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  #sketch-button:hover:not(:disabled) {
    background: rgba(179, 168, 168, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  #sketch-button:disabled {
    background: rgba(194, 63, 63, 0.5);
    opacity: 0.6;
  }
  
  #sketch-button svg {
    width: 24px;
    height: 24px;
  }
  
  #sketch-button:disabled svg {
    opacity: 0.5;
  }