* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fffff4;
            overflow-y: auto;
            text-align: center;
            padding: 20px;
        }
        .postcard {
            height: 100vh;
            padding-bottom:40px;
            /*width: 100%;
            height: auto;*/
            /* Extended fade duration to 2.5 seconds */
            transition: opacity 2.5s ease-in-out;
        }
        .rotate-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            font-size: 1.5em;
            font-family: Arial, sans-serif;
            transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
            visibility: visible;
        }
        .hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .rotate-image {
            width: 80px;
            height: auto;
            margin-bottom: 10px;
            opacity: 1;
            transition: opacity 1.5s ease-in-out;
        }
        .content {
            max-width: 80vw;
            font-size: 1.2em;
            color: #333;
            font-family: Arial, sans-serif;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            text-align: justify;
        }
        .content p{
            margin-bottom: 20px;
        }
        .content span {
/*            font-size: 1.2em;*/
        }
        .content img{
            width: 100%;
            height: auto;
        }
        .logo {
            width: 100%;
            padding: 20px 0;
        }
        h2, h3 {
            font-family: "Averia Libre", serif;
            font-weight: 400;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }
        h2 {
            font-size: 2em;
/*            margin-top: 20px;*/
            margin-bottom: 20px;
        }
        h3 {
            font-size: 1.5em;
            color: #666;
            margin-bottom: 20px;
        }
        .details-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 70px;
            height: 70px;
            background: white;
            color: black;
            font-size: 1em;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            transition: background 0.3s, opacity 0.5s;
        }
        .details-button:hover {
            background: #f0f0f0;
        }
        #audioButton:hover {
            background-color:#000;
        }
        #audioButton {
            background-color:#737373;
        }
        #audioIcon {
            width: 80%;
            height: 80%;
        }
        .close-link {
            margin-top: 20px;
            font-size: 1.2em;
            color: white;
            background: #c99175;
            padding: 15px;
            text-decoration: none;
            cursor: pointer;
            width: 70px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            transition: background 0.3s ease-in-out, opacity 1.5s ease-in-out;
        }
        .close-link:hover {
            background: #b07d65;
        }
        .no-right-click {
            pointer-events: none;
        }
        /* New Slider Styles */
        .slider {
          position: relative;
          width: 80vw;
          max-width: 600px;
          height: 340px;  /* Fixed height for consistent display */
          margin: 0 auto;
          overflow: hidden;
          opacity: 0;
          transition: opacity .8s ease-in-out;
          margin-bottom: 40px;
        }
        .slider.visible {
          opacity: 1;
        }
        /* Single image element used for slider */
        #sliderImage {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          transition: opacity .8s ease-in-out;
        }

        .slide-counter{
          position: absolute;
          bottom: 12px;
          left: 12px;
          padding: 6px 10px;
          font: 600 14px/1.1 "Averia Libre", serif;
          color: #fff;
          background: rgba(0,0,0,.55);
          border-radius: 999px; /* pill */
          z-index: 2;
          user-select: none;
          pointer-events: none; /* purely informational */
        }
        .text-left{text-align: left;}
        .credit { 
            text-align: left;
            font-weight: 700;
        }
        .photo-description{font-size: .8em;font-style:italic;}