/* Basic page styling */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img {
            max-width: 100%;
            height: 50%;   
        }

        /* Header styling */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4em;
            background: #EF9000;
            padding: 0;
            z-index: 10;
            background-image: linear-gradient(#EF9000 85%, #B19338);
        }

        h1 {
            font-family: "Girassol", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2.5em;
            margin: 0;
            padding-left: 1em;
            padding-bottom: 2em;
            color: #E8E4C8;
            text-shadow: 2px 2px 5px black;
        }

        h2 {
            font-family: "Overpass", sans-serif;
            font-optical-sizing: auto;
            font-weight: <weight>;
            font-style: normal;
        }

        p {
            font-family: "Dosis", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            margin: 1em;
        }

        video {
            width: 100%;
        }

        a {
            color: #B19338;
            font-family: "Dosis", sans-serif;
        }

        footer {
            position: absolute;
            top: calc(100% - 1.5em);
            left: 45em;
            padding-bottom: 0.5em;
            padding-left: 0.5em;
            padding-right: 0.5em;
            background: #E8E4C8;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
            font-family: "Dosis", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            opacity: 80%;
        }
        
        /* Fullscreen map container */
        #map {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: calc(100% - 50px);
        }

        /* Slide-in panel styling */
        .info-panel {
            position: fixed;
            right: -2000px; /* Start offscreen */
            top: 10%;
            width: 35%;
            background: #E8E4C8;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
            overflow-y: auto;
            transition: right 0.3s ease;
            padding: 20px;
            text-align: justify;
        }

        .info-panel h2 {
            margin: 0;
        }

        #yellowstone {
            right: 0px; /* Make sure it starts visible */
        }

        /* Marker styling */
        .marker {
            background-image: url('img/icon4.png');
            background-size: cover;
            width: 60px;
            height: 60px;
            cursor: pointer;
        }

        /* Carousel styling */
        * {box-sizing:border-box}

        /* Slideshow container */
        .slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
        }

        /* Hide the images by default */
        .mySlides {
          display: none;
        }

        /* Next & previous buttons */
        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          margin-top: -22px;
          padding: 16px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
        }

        /* Reset button styling */
        #reset-btn {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background: #E8E4C8;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); 
            cursor: pointer;
            z-index: 10;
            display: none;
        }

        .hidden-panel{
           right: -1000px;
        }