/* From Apple Watch and beyond haha */
:root {
  --panel-bg: rgba(8, 8, 8, 0.97);
  --panel-border: rgba(255, 255, 255, 0.14);
  --accent: #f34538;
  --accent-dim: rgba(243, 69, 56, 0.5);
  --text-dim: #9a9a9a;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* dark scrollbars so the default light chrome scrollbar doesn't blow out the black theme */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.05);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* visible, deliberate focus ring everywhere -- a stealth tool still needs to be
   usable with a keyboard, and an invisible focus state fails that silently */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media only screen and (min-width: 320px)
 {
   html, body {
       margin: 0;
       box-sizing: border-box;
       background-color: #000000;
       font-family: 'Roboto', sans-serif;
       overflow-y: hidden;
       overflow-x: hidden;
       font-size: 100%;
       color: #fff;
       width: 100%;
   }
   #header {
     font-weight: bolder;
     font-family: var(--mono);
     text-align: right;
     margin: 0;
     line-height: 1;
     font-size: 0.8rem;
     letter-spacing: 0.02em;
     position: fixed;
     top: 14px;
     right: 14px;
     color: #fff;
     text-transform: lowercase;
     text-decoration: none;
     z-index: 250;
   }
  #header a:visited {
  color: #fff;

  }

/*Dank and boring links*/
 .boringlinks a:focus, .boringlinks a:hover li   {
  text-decoration: none;
  border: 0px;
  color: #fff;
}
 .boringlinks a:link, .boringlinks a:visited ul {
  color: #fff;
  font-weight: 900;
  text-decoration: none;

}

.danklinks a:link, .danklinks a:visited, .danklinks {
  border-bottom: 1px dashed #fff;
  border-top: 1px dashed #fff;
  color: #fff;
  font-weight: 900;
  text-decoration: none;

}
.danklinks a:focus, .danklinks a:hover, .danklinks {
  border-bottom: 1px dashed #fff;
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}
/*The find location button and the box behind it*/
#getlocationicon {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Cstyle%3E .st0{fill:none;stroke:%23FFFFFF;stroke-width:5;stroke-miterlimit:10;} %3C/style%3E%3Cpath class='st0' d='M49.7 76.5v11C66.3 88.7 85.8 75.9 87.8 53 89.5 33.6 76.5 14.4 53 12.2c-20.1-1.9-39.1 12.3-40.8 35.3C10.6 68.5 26.4 87 50 88v13.5M101.5 50c-8.3-.1-16.7-.2-25-.2M49.7.5L50 23M23.5 49.7c-7.7.4-15.3.4-23 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 52%;
  background-position: center center;
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 3vh 3vw;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#getlocationicon:hover {
    background-color: rgba(30, 0, 0, 1);
    border-color: var(--accent-dim);
}
#getlocationicon:active {
  transform: scale(0.94);
}
#alerticon {
      margin-top: 1px;
      margin-left: 28px;
}
  #map {
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    position: fixed;
    z-index: 100;
  }
  .top {
    margin-right: 10px;
    float: right;
    padding-bottom: 5px;
    padding-right: 10px;
  }
  .top:hover {
    font-weight: 900;
  }
  .container {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 14px;
    left: 14px;
    margin: 0;
    padding: 0;
    width: auto;
    z-index: 250;
  }
  .box {
    width: auto;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    z-index: 250;
  }
  .container .box .top {
    margin: 0;
    padding: 6px 10px;
    color: var(--text-dim);
    cursor: pointer;
    position: static;
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: smaller;
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
  }
.container .box .top:hover,
.container .box .top:focus-visible {
  color: #fff;
}
.container .box.is-open .top {
  color: #fff;
  border-bottom-color: var(--accent);
}

.container .box .bottom {
  padding: 22px 26px 26px;
  margin-top: -10px;
  margin-left: -10px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  display: none;
  position: fixed;
  width: min(60vw, 640px);
  max-width: calc(100vw - 30px);
  z-index: 200;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 72vh;
  font-weight: lighter;
  line-height: 1.6;
  /* long unbroken strings (the site's own domain name, URLs in the sources
     list) would otherwise overflow the panel silently on narrow viewports
     instead of wrapping */
  overflow-wrap: break-word;
  word-break: break-word;

/*SVGs icons*/
}
.container .box .bottom > *:first-child {
  margin-top: 0;
}
.container .box .bottom p {
  margin: 0 0 14px;
}
.container .box .bottom h1,
.container .box .bottom h2,
.container .box .bottom h3,
.container .box .bottom h4 {
  font-family: var(--mono);
  letter-spacing: 0.03em;
  margin: 24px 0 10px;
}
.container .box .bottom h2:first-of-type,
.container .box .bottom h1:first-of-type {
  margin-top: 0;
}
.container .box .bottom ol,
.container .box .bottom ul {
  padding-left: 22px;
  margin: 0 0 16px;
}
.container .box .bottom li {
  margin-bottom: 8px;
}
.container .box .bottom hr {
  border: none;
  border-top: 1px dashed var(--panel-border);
  margin: 20px 0;
}
/* the disclaimer panel is a legal warning, not just more reading -- give it
   a distinct accent so it doesn't look identical to ABOUT/RISKS/SOURCES */
.box:has(.alerticon) .bottom {
  border-top: 3px solid var(--accent);
}
.container .box .bottom a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 2px;
}
.container .box .bottom a:hover {
  text-decoration-color: var(--accent);
}

/* close (x) control injected into each panel by dropdown.js */
.panel-close {
  position: sticky;
  float: right;
  top: -22px;
  margin: -18px -26px 0 12px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease;
}
.panel-close:hover,
.panel-close:focus-visible {
  color: var(--accent);
}
.icon {
  display: inline-block;
  margin-right: 0px;
  margin-bottom: 0px;
}
.icons8-Key {
  fill:#ffffff;
  width: 20px;
  height: 20px;
}
.icons8-Twitter-Filled {
  fill:#ffffff;
  width: 20px;
  height: 20px;
}
/*Instagram icon by Icons8 */
.icons8-Instagram {
  fill:#ffffff;
  width: 20px;
  height: 20px;
}
/*Facebook icon by Icons8 */
.icons8-Facebook { /* Customizes Facebook icon */
  fill:#ffffff;
  width: 18px;
  height: 18px;
}
/* Message Filled icon by Icons8 */
.icons8--Message-Filled { /* Customizes  Message Filled icon */
  fill:#ffffff;
  width: 20px;
  height: 20px;
}
/*Alert Icon*/
/* margin, not padding: with the global box-sizing:border-box reset, padding
   would eat into the fixed width/height and squash the SVG's viewBox down
   to a sliver instead of just spacing it from the previous tab */
.alerticon {
  fill: #f34538;
  width: 20px;
  height: 20px;
  margin-left: 18px;
  flex: 0 0 auto;
  align-self: center;
}
.alerticon:hover {
  fill: red;
  width: 20px;
  height: 20px;
  margin-left: 18px;
}
/*user icon*/
#user_icon {
  width: 20px;
}
.user_icon1 {
  fill: #2e82ba;
  width: 20px;
  height: 20px;
}
.user_icon2 {
  fill: none;
  width: 20px;
  height: 20px;
}
/* tooltip/card shown when a location marker is clicked */
.uxl-info-card {
  font-family: 'Roboto', sans-serif;
  color: #111;
  padding: 2px 4px;
}
.uxl-info-card strong {
  display: block;
  font-size: 0.95rem;
}
.uxl-info-card .uxl-info-type {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* easter egg card for clicking your own location pin -- same shape as a
   normal location card, but a small accent border marks it as a secret */
.uxl-you-card {
  border-left: 3px solid var(--accent, #f34538);
  padding-left: 8px;
}
.uxl-you-card .uxl-info-type {
  text-transform: none;
  letter-spacing: normal;
  font-style: italic;
}

/* location info card: description + image carousel */
.uxl-info-desc {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #333;
  max-width: 220px;
}
.uxl-carousel {
  position: relative;
  width: 220px;
  height: 110px;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: #ececec;
}
.uxl-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 220ms ease;
}
.uxl-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uxl-carousel-slide img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  opacity: 0.85;
}
.uxl-carousel-placeholder {
  background: #e2e2e2;
}
.uxl-carousel-placeholder span {
  font-size: 0.68rem;
  color: #888;
  text-align: center;
  padding: 0 14px;
  line-height: 1.3;
}
.uxl-carousel-prev,
.uxl-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uxl-carousel-prev { left: 6px; }
.uxl-carousel-next { right: 6px; }
.uxl-carousel-prev:hover,
.uxl-carousel-next:hover {
  background: rgba(0, 0, 0, 0.7);
}
.uxl-carousel-dots {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.uxl-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.uxl-carousel-dot.is-active {
  background: rgba(0, 0, 0, 0.75);
}