html {
    scroll-behavior: smooth;
  }
  .logo-img {
    height: 2rem;
  }
  .navbar {
    transition: 0.3s;
  }
  .nav-colored {
    background-color: #461B93;
  }
  .nav-transparent {
    background-color: transparent;
  }
  @media screen and (max-width: 900px) {
  .show {
    visibility: visible;
    transition: 0.3s;
  }
  .hide {
    visibility: hidden;
    transition: 0.3s;
  }
}
  body, .wild-footer {
    overflow-x: hidden;
    background: linear-gradient(123deg, #461B93 0%, #461B93 40%, #6A3CBC calc(40% + 1px), #6A3CBC 60%, #8253D7 calc(60% + 1px), #8253D7 70%, #facc15 calc(70% + 1px), #fcfcfc 100%);
  }
  .bg-footer {
    background-color: #facc15;
  }
  .bg-lehighton {
    background: linear-gradient(90deg, rgba(123,71,217,0.5284488795518207) 0%, rgba(255,255,255,0.9458158263305322) 20%, rgba(234,234,234,0.9570203081232493) 80%, rgba(186,186,186,0.6320903361344538) 100%),url(https://raw.githubusercontent.com/tylertechtyler/hosted-assets/main/cities/lehighton.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    
  }
  .bg-brod {
    background: linear-gradient(90deg, rgba(123,71,217,0.5284488795518207) 0%, rgba(255,255,255,0.9458158263305322) 20%, rgba(234,234,234,0.9570203081232493) 80%, rgba(186,186,186,0.6320903361344538) 100%),url(https://raw.githubusercontent.com/tylertechtyler/hosted-assets/main/cities/brodheadsville.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .bg-stroud {
    background: linear-gradient(90deg, rgba(123,71,217,0.5284488795518207) 0%, rgba(255,255,255,0.9458158263305322) 20%, rgba(234,234,234,0.9570203081232493) 80%, rgba(186,186,186,0.6320903361344538) 100%),url(https://raw.githubusercontent.com/tylertechtyler/hosted-assets/main/cities/stroudsburg.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .text-shadow {
    text-shadow: 5px 2px 8px #000000,
      12px 6px 8px 	#505050;
  }
  .hero-button, .bottom-nav {
    background-color: #6A3CBC;
    
  }
  .hero-button:hover {
    background-color: #8253D7;
  }
  .hero-text {
    color: #461B93;
  }
  
  #container {
    
    margin-bottom: 100px;
    display: grid;
  grid-gap: 16px;
  padding: 16px;
  grid-template-columns: repeat(auto-fill,minmax(500px,1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(500px,1fr);
  overflow-x: auto;
    overflow: hidden;
    height: 450px;
  }
  
  
  
  /*responsive devices*/

.preview {
 transform: scale(1.2);
transition: 0.3s;
filter: drop-shadow(1px 1px 7px #fcf4c5);
  
}
.svg-drop {
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}
.svg-drop-light {
  filter: drop-shadow(0px 3px 8px rgb(175, 175, 175));
}
.preview:hover {
  transform: scale(1.4);
  filter: drop-shadow(1px 1px 11px #fcf4c5);
  transition: 0.3s;
}
.preview-home {
  filter: drop-shadow(0.5px 1px 3px #3a3a3a);
  transition: 0.3s;
}
.preview-home:hover {
  transform: scale(1.1);
  filter: drop-shadow(1px 1px 11px #3a3a3a);
  transition: 0.3s;
}
.location-card {
  filter: drop-shadow(1px 1px 11px #3a3a3a);
  transition: 0.3s;
}
.location-card:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.promo-text-shadow {
  
text-shadow: 0 -1px 4px rgb(5, 5, 5), 0 -2px 10px #ff0, 0 -10px 15px #ff8000, 0 -1px 30px #F00;
}


.starry {
  background: radial-gradient(center, #3c323c 0%, black 100%);
  background: -webkit-radial-gradient(center, #3c323c 0%, black 100%);
  height: 10rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 350px;
}

.stars {
  display: flex;
  transform-style: preserve-3d;
  -webkit-animation: rotate 15000ms linear infinite;
          animation: rotate 15000ms linear infinite;
}

.star {
  width: 100px;
  height: 100px;
  background: linear-gradient(-30deg, rgba(100, 100, 100, 0) 0%, rgba(125, 125, 125, 0.2) 50%, rgba(150, 150, 150, 0.3) 50.5%, rgba(100, 100, 100, 0) 100%);
  background-size: 300px 100%;
  background-position: 0 0;
  -webkit-clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 83.3333333333px 100px);
          clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 83.3333333333px 100px);
  -webkit-animation: rotate 5000ms linear infinite;
          animation: rotate 5000ms linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
    background-position: 0 0;
  }
  100% {
    transform: rotateY(360deg) rotateZ(0deg);
    background-position: -600px 0;
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
    background-position: 0 0;
  }
  100% {
    transform: rotateY(360deg) rotateZ(0deg);
    background-position: -600px 0;
  }
}