/* Webfonts */
@font-face {
    font-family: Jugend;
    src: url(./fonts/Jugend-2021.woff2);
    font-feature-settings: "calt" 1, "liga" 1, "rlig" 1, "rvrn" 1, "kern" 1, "rclt" 1;
}

/* CSS Variables */
:root {
    --primary-color: pink;
    --secondary-color-grad: linear-gradient(180deg, #7e7e7e 0%, rgba(255, 255, 255, 0) 100%);

    /* Sizes */
    

  }

/* General HTML Elements */
html {
  font-size: 1vw;
}

body { 
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #7e7e7e 0%, rgba(255, 255, 255, 0) 100%);

  /* Scroll Bounce */ 
  overscroll-behavior: none;

  font-family: serif;
}

p {
  font-size: 1.25rem;
}

.section {
    overflow: auto;
  }

/* Utility Classes */

/* Nav Header Stuff */
#logo-container {
    position: absolute;
    z-index: 98;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
    /* display: none; */
}
  
#logo {
    width: 4rem;
    height: 4rem;
    filter: drop-shadow(0 0 1rem black);
    min-width: 20px;
    min-height: 20px;
}

/* Custom Classes */

.wrapper {
    display: flex;
    height: 100vh;
}
.main {
    flex-grow: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }

/* TYPOGRAPHY */

#map-container__text-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    overflow: auto;
    top: 0;
  }

#title {
    font-size: 6rem;
    font-family: Jugend, sans-serif;
    font-weight:  100;
    text-align: center;
    color: var(--primary-color);
    padding: 1rem 2rem 0 2rem;
    /*display: none; */
}
  
.textline {
    font-size: 1.5rem;
    padding: 0rem 2rem 0 2rem;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 100;
    color: var(--primary-color);
}

.content {
  text-indent: 1rem;
  overflow: auto;
}

.content__headline {
  font-weight: bold;
  text-indent: 0;
}

.source-btn {
  position: absolute;
  z-index: 99;
  bottom: 0.5rem;
  right: 0.5rem;
  border-radius: 50%;
  background-color: black;
  color: white;
  padding: .5rem 1rem .5rem 1rem;
  border: solid 1px black;
  font-size: 0.75rem;
  font-family: serif;
  text-transform: uppercase;
}

  /* SIDE PANEL */

.side-panel {
    width: 25rem;
    border-left: solid 1px var(--primary-color);
    padding: 0 1rem 1rem 1rem;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
    position: relative;
    overflow-y: auto;

    display: none;
}

.side-panel-open .side-panel {
    display: initial;
}

.side-panel-open .side-panel-toggle {
    right: 22rem;
}

.side-panel-toggle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    /* Color */
    background: none;
    border: none;

    /* Position */
    position: absolute;
    z-index: 3;
    right: 0rem;
    
}

.side-panel-toggle:hover {
    /* border: solid var(--primary-color) 1px;
    border-radius: 10%; */
}

/* Footer & Footnotes */

footer :target {
  background: yellow;
  
}

footer ol {
  padding: 1rem;
}

footer ol li {

}

[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.5em; /* 3 */
  margin-left: 2px; /* 4 */
  color: var(--primary-color); /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

[aria-label="Back to content"] {
  font-size: 0.8em;
  color: grey;
}

/* MAP STYLING */

/* Popup styling */

.mapboxgl-popup {
    padding-bottom: 5px;
    
  }

  .mapboxgl-popup-close-button {
    /* display: none; */
    color: #FFFFFF;
    
  }

  .mapboxgl-popup-content {
    font-family: serif;
    font-weight: 100;
    font-size: 1rem;
    padding: 3rem;
    border-radius: 1rem;

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.11) !important;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /*border: 1px solid rgba(255, 255, 255, 0.3);*/
    border: 1px var(--primary-color) solid;
    width: 18rem;
  }

  .mapboxgl-popup-content-wrapper {
    padding: 1%;
  }

  .mapboxgl-popup-content h3 {
    /*background: rgb(61, 59, 59); */
    font-family: Jugend, serif;
    font-size: 2rem;
    font-weight: 100;
    line-height: 1.5rem;
   /* background: linear-gradient(180deg, #606060 0%, rgba(255, 255, 255, 0) 100%); */
    /*text-align: center;*/
    color: var(--primary-color);
    margin: 0;
    display: block;
    padding: 1rem;
    margin-top: -5px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--primary-color);
  }

  .mapboxgl-popup-content h4 {
    margin: 0;
    display: block;
    padding: 0.25rem;
    font-weight: 400;
  }

  /* change this to change the location iframe */
  .iframe {
    width: 100%;
    height: 100%;
    mix-blend-mode:color-burn;
  }

  /* this defines the container around the iframe */
  .iframe__div {
    background: lightpink;
    width: 100%;
    height: 50%;
    margin-bottom: 1rem;
  }

  .mapboxgl-container {
    cursor: pointer;
  }

  .mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
    margin-top: 3px;
  }

  .mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
    /*border-bottom-color: rgb(61, 59, 59); */
  }

  /* SOURCE POPUP */

  .sourcepopup {
    position: absolute;
    z-index: 100;
    width: 80svw;
    height: 50svh;
    left:10rem;
    top: 25svh;
    display: none;
    opacity: 0.9;
  }

  #sourceIframe {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }

  /* Open */
  .open {
    display: block;
  }

  /* Responsive */

  @media (max-width: 800px) {
    .wrapper {
      flex-direction: column;
    }

    #logo {
      min-width: 60px;
      min-height: 60px;
  }

    #title {
      font-size: 12rem;
    }

    .textline {
      font-size: 3.5rem;
    }

    /* side-panel */
    .side-panel {
      width: 100%;
      height: 100vh;
      margin: 4rem 0 0 0;
      border: none;
      box-shadow: none;
      transition: all ease-in-out 10s;
    }

    .side-panel-toggle {
      right: 1rem;
      top: 1rem;
    }

    .side-panel-open .side-panel-toggle {
      right: 1rem;
      transition: all ease-in-out 10s;
  }

    .main {
    }

    .content {
      font-size: 4rem;
    }
  
  footer ol {
    font-size: 3.5rem;
  }
  /* buttons */
  .source-btn {
    bottom: 2rem;
    right: 2rem;
    border-radius: 50%;
    padding: 2rem;
    font-size: 3rem;

  }

  /*Source iframe */
  .sourcepopup {
    width: 80svw;
    height: 60svh;
    left: 10rem;
    top: 20svh;
  }

  /* CONTENT POPUP */

  .mapboxgl-popup-content {
    font-size: 3rem;
    width: 50rem;

  }

}