html {
  scroll-behavior: smooth !important;
  /* font-family: 'BBH Bogle' !important; */
  font-size: large !important;
  /* color: white; */
}

.logo {
  text-align: center;
  margin: auto;
  display: block;
  width: 45%;
  min-width: 320px;
}


* {
  /* transition-duration: 0.4s; */
  box-sizing: border-box;
  /* font-family: 'BBH Bogle'; */
}

.compass {
  position: relative;
  text-align: center;
  color: white;
  /* top: 10%; */
  /* display: inline; */
}

.compass .center {
  position: absolute;
  /* top: 50%; */
  /* left: 50%; */
  right: 24%;
  /* transform: translate(-50%, -50%); */
}

.compass .center-line {
  position: absolute;
  top: -23px;
}

#map {
  height: 600px;
  width: 100%;
}

body {
  background-color: rgb(0, 6, 36);
  color: white;
  margin-right: 5%;
  /* font-family: 'BBH Bogle' !important; */
  /* font-size: 22px; */
  margin-left: 5%;
  /* margin-top: -10px; */

  /* margin-top: 70px; */

  /* scroll-behavior: smooth !important; */
}

/* :not(.top-nav) {
  margin-top: 0px;
}  */

h1 {
  font-family: 'BBH Bogle';
}

.title {
  font-family: 'Bangers';
  font-size: 60px;
  text-align: center;
}

.allow-highlight {
  -webkit-user-select: text; /* Safari */
  -ms-user-select: text; /* IE 10 and IE 11 */
  user-select: text; /* Standard syntax */
}


.zoom {
  transition: transform .1s;
}


.zoom:hover {
  transform: scale(1.02);
}

a:hover {
  transition-duration: 0.4s;
}

span:hover {
  transition-duration: 0.4s;
}

.tablink {
  transition-duration: 0.4s;
}

.tablinka {
  transition-duration: 0.4s;
}

.hover-soft {
  transition-duration: 0.4s;
}

.pulsing {
  animation: pulse 2s infinite;
}

.mySlides {
  display: none;
}

.news-img {
  /* transition: transform .2s; */
  width: 100%;
  margin: 0 auto;
}

.forecast {
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-txt-decor {
  text-decoration: none;
  color: black;
}

.forecast-flex {
  display: flex;
  overflow-x: auto;
  /* overflow-y: visible; */
  gap: 20px;
  /* padding: 1%; */
  /* min-height: max-content; */
  /* padding-top: 1%; */
  /* padding-bottom: 2%; */
  padding: 2% 0% 2% 1%;
  /* flex-direction: column; */
  /* width: fit-content; */
}



.forecast-block {
  font-family: 'Zen Dots';
  background-color: rgba(5, 63, 114, 0.603);
  padding: 1%;
  /* box-sizing: border-box; */
  /* width: fit-content; */
  border-radius: 7px;
  text-align: center;
  min-width: 200px;
  width: 500px;
  transition: transform 180ms ease;
}

.forecast-block:hover {
  transform: scale(1.05);
}

.forecast-high {
  color: red;
}

.forecast-low {
  color: rgb(118, 118, 255);
}

.no-margin {
  /* font-family: 'Zen Dots'; */
  margin: 0px;
}

img {
  max-width: 750px;
}

.spc-grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
  grid-template-columns: 45% 45%;
  /* justify-content: space-between; */
  max-width: 94%;
}

.spc-grid img {
  /* border: 1px solid black; */
  /* padding: 10px; */
  max-width: 600px;
  width: 100%;
}

.did-you-know-grid {
  display: grid;
  /* column-gap: 1%; */
  row-gap: 50px;
  grid-template-columns: 25% 25% 25% 25%;
  /* overflow: auto;
  gap: 20px; */
}


.did-you-know {
  background-color: rgb(255, 255, 255);
  color: black;
  font-family: 'Alexandria';
  padding: 5px;
  border-radius: 6px;
  max-width: 300px;
  width: 95%;
  text-align: center;
  transition-duration: 0.4s;
  /* transition: box-shadow 500ms ease; */
  /* transition: transform 180ms ease; */
  box-shadow: 1px 1px 5px black;
  /* animation: shadow 180ms; */
  /* align-content: right; */
}


.did-you-know:hover {
  transform: translateY(-3px);
  box-shadow: 0px 0px 15px 5px lightblue;
}

.did-you-know .no-margin {
  margin: 5px 0px 0px 0px;
}

.did-you-know h2 {
  font-weight: 1000;
}

.did-you-know p {
  font-size: x-large;
  font-family: 'BBH Bogle';
  /* font-weight: 500; */
}

/* rgb(43, 147, 226)
rgb(226, 43, 61)
rgb(43, 226, 162) */

.question-mark {
  font-size: 200px;
  margin: 0px;
  color: rgba(13, 255, 0, 0.52);
  /* width: fit-content; */
  /* padding-left: 30px;
  padding-right: 30px;
  border-radius: 50px 0px 0px 50px; */
  /* background-color: aqua; */
  margin-right: 20px;
  margin-top: -20px;
  float: right;
}

.forecast-block .no-margin {
  font-family: 'Zen Dots';
  margin: 5px 0px 0px 0px;
}

/* .forecast-bock img{
  width: 100px;
  height: 100px;
}  */


.dark-light {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

.img-title-container {
  position: relative;
  /* width: 50%; */
  /* max-width: fit-content; */
  font-size: 20px !important;
  width: fit-content;
}

.img-title-overlay {
  position: absolute; 
  bottom: 0; 
  /* background: rgb(113, 15, 137); */
  background: rgba(113, 15, 137, 0.928);
  /* color: #000000;  */
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: rgb(255, 255, 255);
  padding: 20px;
  margin-left: inherit;
  /* margin-bottom: 4px; */
  text-align: center;
  max-height: 70px;
}

.img-title-overlay h2 {
  font-size: 90%;
}

.img-title-container:hover .img-title-overlay {
  opacity: 1;
}

.w3-bar {
  margin-left: -5.5% !important;
  width: 111.5%;
  margin-right: -5% !important;
}

.w3-bar p, a{
  font-family: sans-serif !important;
}


.top-nav .hamburger {
  transition-duration: 0.5s;
  /* z-index: 1001; */
  margin-top: 0px !important;
  margin-left: 1% !important;
  cursor: pointer;
  padding: 0px !important;
  position: relative !important;
  font-size: 200% !important;
  /* font-size: xx-large; */
  /* width: fit-content; */
}

.hamburger {
  transition-duration: 0.5s;
  margin-top: -10px;
  z-index: 1001;
  /* margin-top: -70px; */
  margin-left: -4% !important;
  cursor: pointer;
  width: fit-content;
  position: fixed;
  font-size: 300% !important;
  /* padding: 1%; */
}


.top-nav {
  /* display: none; */
  transition-duration: 0.5s;
  /* white-space: initial; */
  /* transition: top 0.5s; */
  display: block !important;
  width: 100%;
  z-index: 1002;
  margin-left: -5% !important;
  position: fixed;
  height: 70px;
  /* margin: auto; */
  text-align: center;
  /* margin-top: -70px; */
  /* display: none; */
}

.top-nav a {
  transition-duration: 0.5s;
  text-decoration: none;
}

.top-nav a:hover{
  color: blue;
}



.scroll-to-top {
  transition-duration: 0.5s;
  /* transition: bottom 0.5s; */
  bottom: -120px;
  z-index: 1001;
  position: fixed;
  right: 1%;
  /* border-radius: 20px; */
  border-radius: 50%;
  /* font-size: 500%; */
  padding: 2px 20px 2px 20px;
  /* padding: 1%; */
  margin-bottom: 50px;
}

.scroll-to-top:hover {
  background-color: purple !important;
}

.image-gallery-image {
  transition-duration: 0.5s;
  max-width: 965px;
}

.image-gallery-image:hover {
  transform: translateY(-5px);
  box-shadow: 0px 0px 15px 5px lightblue;
}

@keyframes pulse {
  from {color: rgb(255, 0, 0);}
  50% {color: rgb(255, 211, 211);}
  to {color: rgb(255, 0, 0);}
}

@keyframes opacity {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes shadow {
  from {box-shadow: none;}
  to {box-shadow: 10px 10px 5px lightblue;}
}

@keyframes slide_down {
  from {top: 0;}
  to {top: 20;}
}

/* @keyframes slide-right {
  /* from {right: -300px;}
  to {right: 0px;} */
  /*
  from {background-color: red;}
  50% {background-color: blue;}
  to {background-color: red;}
} */

/* @media screen and (max-width: 720px) {
  .hide-logo-nav {
    display: none;
  }
} */

.wind-direction {
  display: none;
}


.weather-update {
  background-color: rgb(17, 113, 0);
  width: 70%;
  transition-duration: 0.5s;
}

a:hover{
  color: blue;
}


.weather-update:hover {
  box-shadow: 0px 0px 15px 5px lightblue;
}


.weather-update h1{
  font-size: 400%;
}

.live-update {
  background-color: rgb(175, 85, 0);
  border-style: dashed;
  border-color: rgb(155, 0, 0);
  border-width: 1.5px;
  max-width: 1000px;
  width: 100%;
  margin: auto;
}

.w3-flex .w3-button:hover {
  background-color: rgb(0, 6, 36) !important;
  color: rgb(147, 147, 255) !important;
}

.w3-dropdown-content a:hover {
  background-color: #2660ff !important;
}

.graphic-dropdown {
  display: none;
}

.graphic-select-buttons {
  display: block;
}

.graphic-select-buttons .w3-bar-item {
  background-color: rgb(175, 0, 178);
}

.radar-dropdown {
  background-color: rgb(175, 0, 178) !important;
}

#map {
  font-family: sans-serif !important;
}


.footer a {
  transition-duration: 0.5s;
}

.footer a:hover{
  color: blue;
}


.footer-regular {
  display: none;
}

.footer-flex a {
  text-decoration: none;
  transition-duration: 0.5s;
}

.footer-flex a:hover {
  color: blue;
}

.footer-regular a {
  text-decoration: none;
  transition-duration: 0.5s;
}

.footer-regular a:hover {
  color: blue;
}


.forecast-icon {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}


@media screen and (max-width: 1200px) {
  .did-you-know-grid {
    display: grid;
    gap: 10px;
  }
}

@media screen and (max-width: 900px) {
  .did-you-know-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 45% 45%;
  }
  .spc-grid {
    display: block;
  }
  .spc-grid div {
    margin-top: 5%;
  }
}

@media screen and (max-width: 700px) {
  .graphic-dropdown {
    display: block;
  }
  .graphic-select-buttons {
    display: none;
  }
  .weather-update {
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  body {
    text-align: center;
  }
  img {
    max-width: 100%;
  }
  h1 {
    font-size: 30px;
  }
  .did-you-know-grid {
    display: block;
  }
  .did-you-know-grid div {
    margin-top: 5%;
  }
  .compass {
    display: none;
  }
  .wind-direction {
    display: inline-block;
  }
  .img-title-overlay {
    display: none;
  }
  .footer-flex {
    display: none;
  }
  .footer-regular {
    display: block;
  }
}

/* @media screen and (max-width: 1000px) {
  .top-of-page {
    margin-left: 1% !important; 
  }
} */