/*
Template: Paradise Possible CSS (Updated)
Author: Rebecka XYZ (Original) / Updated by AI
Notes:
- Feel free to reuse this template structure.
- Replace font URLs with your own if needed.
- Customize variables and class styles as desired.
- Read comments to understand how each section works.
- User-requested background image and GIF have been integrated.
- GIF is now small and centered.
*/

/* ========== FONT DEFINITIONS ========== */
/* Import your custom fonts using @font-face. Replace URLs as needed. */
/* Original font-face declarations from the user's CSS are kept here. */
/* It's good practice to host your own fonts or ensure you have rights to use them. */

@font-face {
  font-family: "PixelOperator";
  src: url("https://rebecka.xyz/fonts/PixelOperator.ttf") format("truetype");
}

@font-face {
  font-family: "Garamondt-Regular";
  src: url("https://rebecka.xyz/fonts/Garamondt-Regular.woff") format("woff");
}

@font-face {
  font-family: "Garamondt-Italic";
  src: url("https://rebecka.xyz/fonts/Garamondt-Italic.woff") format("woff");
}

@font-face {
  font-family: "4-Fromages";
  src: url("https://rebecka.xyz/fonts/4-Fromages-Regular.woff") format("woff");
}

@font-face {
  font-family: "Venice";
  src: url("https://rebecka.xyz/fonts/VeniceClassic.ttf") format("truetype");
}

@font-face {
  font-family: "Compagnon-Bold";
  src: url("https://rebecka.xyz/fonts/Compagnon-Bold.woff") format("woff");
}

@font-face {
  font-family: "Compagnon-Light";
  src: url("https://rebecka.xyz/fonts/Compagnon-Light.woff") format("woff");
}

@font-face {
  font-family: "Compagnon-Italic";
  src: url("https://rebecka.xyz/fonts/Compagnon-Italic.woff") format("woff");
}

@font-face {
  font-family: "Compagnon-Medium";
  src: url("https://rebecka.xyz/fonts/Compagnon-Medium.woff") format("woff");
}

@font-face {
  font-family: "Compagnon-Roman";
  src: url("https://rebecka.xyz/fonts/Compagnon-Roman.woff") format("woff");
}

@font-face {
  font-family: "Credible";
  src: url("https://rebecka.xyz/fonts/Crédible-Regular.woff") format("woff");
}

@font-face {
  font-family: "Zara";
  src: url("https://rebecka.xyz/fonts/Zara-Regular.woff") format("woff");
}

@font-face {
  font-family: "Mess";
  src: url("https://rebecka.xyz/fonts/Mess-Light.woff") format("woff");
}

@font-face {
  font-family: "kaerukaeru";
  src: url("https://rebecka.xyz/fonts/kaerukaeru-Regular.woff") format("woff");
}

@font-face {
  font-family: "Quarantype";
  src: url("https://rebecka.xyz/fonts/Quarantype-Regular.woff") format("woff");
}

@font-face {
  font-family: "Typefesse-CO";
  src: url("https://rebecka.xyz/fonts/Typefesse_Claire-Obscure.woff") format("woff");
}

@font-face {
  font-family: "TribaliumNeue-Regular";
  src: url("https://rebecka.xyz/fonts/TribaliumNeue-Regular.woff") format("woff");
}

@font-face {
  font-family: "TribaliumNeue-Poster";
  src: url("https://rebecka.xyz/fonts/TribaliumNeue-Poster.woff") format("woff");
}

@font-face {
  font-family: "Ouvrieres-affamees";
  src: url("https://rebecka.xyz/fonts/Ouvrieres-affamees.woff") format("woff");
}

@font-face {
  font-family: "Ouvrieres-agricultrices";
  src: url("https://rebecka.xyz/fonts/Ouvrieres-agricultrices.woff") format("woff");
}

@font-face {
  font-family: "Director-Bold";
  src: url("https://rebecka.xyz/fonts/Director-Bold.woff") format("woff");
}

@font-face {
  font-family: "Director-Light";
  src: url("https://rebecka.xyz/fonts/Director-Light.woff") format("woff");
}

@font-face {
  font-family: "Director-Regular";
  src: url("https://rebecka.xyz/fonts/Director-Regular.woff") format("woff");
}

@font-face {
  font-family: "Director-Variable";
  src: url("https://rebecka.xyz/fonts/Director-Variable.woff") format("woff");
}

@font-face {
  font-family: "Equateur-Regular";
  src: url("https://rebecka.xyz/fonts/Equateur-Regular.woff") format("woff");
}

@font-face {
  font-family: "FT88-Bold";
  src: url("https://rebecka.xyz/fonts/FT88-Bold.woff") format("woff");
}

@font-face {
  font-family: "FT88-Gothique";
  src: url("https://rebecka.xyz/fonts/FT88-Gothique.woff") format("woff");
}

@font-face {
  font-family: "FT88-Italic";
  src: url("https://rebecka.xyz/fonts/FT88-Italic.woff") format("woff");
}

@font-face {
  font-family: "FT88-Regular";
  src: url("https://rebecka.xyz/fonts/FT88-Regular.woff") format("woff");
}

@font-face {
  font-family: "FT88-School";
  src: url("https://rebecka.xyz/fonts/FT88-School.woff") format("woff");
}

@font-face {
  font-family: "FT88-Serif";
  src: url("https://rebecka.xyz/fonts/FT88-Serif.woff") format("woff");
}

@font-face {
  font-family: "Latitude-Regular";
  src: url("https://rebecka.xyz/fonts/Latitude-Regular.woff") format("woff");
}

@font-face {
  font-family: "Louise";
  src: url("https://rebecka.xyz/fonts/Louise-Regular.woff") format("woff");
}
/* Text overlay styling - plain text version */
.gif-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: white; /* Change color as needed */
  font-family: "PixelOperator", sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 2px black; /* Optional: helps with readability */
  z-index: 6;
  pointer-events: none;
  /* Additional plain text styling */
  background: transparent;
  border: none;
  text-decoration: none;
  animation: none; /* Ensures no animations are applied */
}


/* ========== ROOT VARIABLES ========== */
/* Define global CSS variables for easy theme management. */
:root {
  --font-family: "Verdana", sans-serif; /* Default font stack */
  --font-size: x-small; /* Default font size */
  --sidebar-border: 1px solid #E6E6C3; /* Border color for sidebars */
  --link-color: blue; /* Default link color */
  --bg-color: white; /* Default background color for elements */
  --text-color: black; /* Default text color */
  --sidebar-bg: transparent; /* Background for sidebars */
  --content-bg: transparent; /* Background for main content areas */
  --content-padding: 0; /* Padding for content areas */
  /* --background-image: none; */ /* Original placeholder for body background */
  /* USER REQUESTED: Background image for the body */
  --background-image: url('https://i.pinimg.com/1200x/1a/ea/2d/1aea2df9acd45d208fad4caeced74bb3.jpg');
}

/* ========== GENERAL BODY STYLES ========== */
body {
  font-family: "PixelOperator", var(--font-family); /* Use PixelOperator first, then fallback */
  font-size: 1em; /* Base font size */
  line-height: 1.3em; /* Line spacing for readability */
  background-color: #000; /* Fallback background color if image doesn't load */
  color: #000; /* Default text color - this might need adjustment based on the new background */
  
  /* USER REQUESTED: Applying the background image from root variables */
  background-image: var(--background-image);
  background-size: cover; /* Cover ensures the image scales to fill the viewport */
  background-repeat: no-repeat; /* Prevent tiling of the image */
  background-attachment: fixed; /* Image stays fixed during scroll */
  background-position: center; /* Center the image */
  
  cursor: url(https://rebecka.xyz/cursor/bug-normal.png), auto !important; /* Custom cursor */
  margin: 0; /* Remove default body margin */
  padding: 0; /* Remove default body padding */
  position: relative; /* Added for potential absolute positioning of children if needed, though iframe-wrapper is fixed */
}

/* ========== BACKGROUND IFRAME/GIF WRAPPER (NOW SMALL AND CENTERED) ========== */
/* This section is for a fixed, small, centered GIF/image element.
   It's positioned on top of the main body background.
   HTML structure:
   <div class="iframe-wrapper">
     <img src="YOUR_GIF_URL_HERE" alt="Centered animation">
   </div>
*/
.iframe-wrapper {
  position: fixed; /* Fixed position to stay in place during scroll and overlay other content */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Fine-tune centering */
  
  width: 300px; /* Example: Set a specific small width for the GIF container */
  /* height will be determined by the image's aspect ratio if img height is auto */
  /* Or set a fixed height: e.g., height: 200px; */
  
  z-index: 5;   /* Ensure it's above the main body background but below potential pop-ups/modals */
  pointer-events: none; /* User cannot interact with it (usually desired for decorative GIFs) */
  overflow: hidden; /* Hide any parts of the img that go outside this wrapper if fixed height is set */
  /* background-color: rgba(255,0,0,0.1); */ /* Optional: for debugging wrapper position */
}

/* Styling for an iframe or image within the (now smaller) wrapper */
.iframe-wrapper iframe,
.iframe-wrapper img { 
  /* USER REQUESTED: The GIF URL would be set in the src attribute of the <img> tag in your HTML */
  /* e.g., <img src="" alt="Centered animation"> */

  width: 100%; /* Make the image/iframe fill the new, smaller width of .iframe-wrapper */
  height: auto; /* Maintain aspect ratio of the GIF/image */
  display: block; /* Good practice for images, removes extra space below */
  
  object-fit: contain; /* Ensures the entire GIF is visible within the wrapper, letterboxing if necessary. Use 'cover' if you want it to fill and potentially crop. */
  border: none; /* Remove border from iframe or image if any default */

  /* Removed properties for full-screen background: */
  /* width: 100vw; */
  /* height: 56.25vw; */
  /* min-height: 100vh; */
  /* min-width: 177.77vh; */
  /* position: absolute; */ /* No longer needed as it just fills the centered parent */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}


/* ========== LINKS AND HOVER STATES ========== */
body a {
  color: var(--link-color); /* Use link color from root variables */
  /* Consider changing this default blue if it clashes with your new background */
}

body a:hover {
  color: #ff0000; /* Red color on hover */
  text-decoration: line-through; /* Strike through text on hover */
  cursor: url(https://rebecka.xyz/cursor/bug-work.png), auto !important; /* Custom hover cursor */
}

/* ========== IMAGE HOVER EFFECT ========== */
/* This general img:hover might affect the centered GIF too. 
   If you don't want the centered GIF to invert, you might need to make this selector more specific,
   e.g., .content-area img:hover, or add a class to images that should invert.
*/
img:hover {
  -webkit-filter: invert(1); /* Invert colors on hover for Webkit browsers */
  filter: invert(1); /* Standard invert colors on hover */
}

/* ========== HEADING STYLES ========== */
h1 {
  font-family: "Venice", serif; /* Specific font for H1 */
  font-size: 2em;
  line-height: 1.5em;
  color: #ff0000; /* Red color for H1 */
  /* This color might need adjustment depending on the background image */
  text-align: center; /* Example: Center headings if desired */
  padding: 20px 0; /* Add some spacing */
}

h1 a {
  color: #ff0000; /* H1 link color */
  text-decoration: none;
}

h1 a:hover {
  color: lime; /* Lime green on H1 link hover */
  text-decoration: none;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: overline;
  margin-bottom: 10px;
  padding-left: 10px;
  /* color: var(--text-color); */ /* Default text color, might need adjustment */
  /* text-align: center; */ /* Optional: Center H2 as well */
}

h2 a {
  text-decoration: none;
  color: var(--link-color); /* Default link color */
}

h2 a:hover {
  text-decoration: line-through;
  color: #ff0000; /* Red on H2 link hover */
}

/* ========== TYPEWRITER EFFECT ========== */
/* For an H1 element with class "typewriter" */
.typewriter h1 {
  color: lime; /* Text color for typewriter effect */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Centers the element if it's block-level with a set width */
  letter-spacing: .15em; /* Adjust as needed for spacing between letters */
  animation:
    typing 3.5s steps(30, end), /* Typing animation */
    blink-caret .5s step-end infinite; /* Blinking caret animation */
  /* Ensure the H1 itself has a defined width or is an inline-block for margin:auto to work as expected for centering text block */
  /* Or if you want the text itself centered within its block, use text-align: center on the parent or h1 */
}

/* The typing animation keyframes */
@keyframes typing {
  from { width: 0 } /* Start with no width */
  to { width: 100% } /* Animate to full width */
}

/* The blinking caret animation keyframes */
@keyframes blink-caret {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}


/* ========== DELAY CLASS ========== */
/* Apply a transition delay. Useful for staggered animations. */
.delay {
  transition-delay: 4s;
}

/* ========== SPAN STYLES AND SHAKE ANIMATIONS ========== */
span {
  display: inline-block; /* Allows transforms on spans */
}

/* Hover shake effects */
span.strong-hover-shake:hover {
  animation: tilt-shaking 0.15s infinite;
}

span.gentle-hover-shake:hover {
  animation: tilt-shaking 0.25s infinite;
}

span.gentle-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}

span.strong-tilt-move-shake:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}

/* Constant shake effects */
span.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}

span.vertical-shake {
  animation: vertical-shaking 0.35s infinite;
}

span.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}

span.rise-shake {
  animation: jump-shaking 0.83s infinite;
}

span.skew-shake-x {
  animation: skew-x-shake 1.3s infinite;
}

span.skew-shake-y {
  animation: skew-y-shake 1.3s infinite;
}

/* Keyframes for shake animations */
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes vertical-shaking {
  0% { transform: translateY(0); }
  25% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
  75% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes jump-shaking {
  0% { transform: translateX(0); }
  25% { transform: translateY(-9px); }
  35% { transform: translateY(-9px) rotate(17deg); }
  55% { transform: translateY(-9px) rotate(-17deg); }
  65% { transform: translateY(-9px) rotate(17deg); }
  75% { transform: translateY(-9px) rotate(-17deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}

@keyframes skew-y-shake {
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }
}

/* ========== HOVER IMAGE DISPLAY ========== */
.hover_img a { position: relative; } 
.hover_img a span {
  position: fixed; 
  display: none; 
  z-index: 99; 
  margin-left: 25%; 
}
.hover_img a:hover span { display: block; }

/* ========== BOX STYLE ========== */
.box-II {
  width: 100%;
  border: 1px solid #0000ff; 
  background-color: #fff; 
}

/* ========== FLEXBOX LAYOUTS ========== */
.flex {
  display: flex; 
}

.container {
  margin: 0 auto; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100%; 
}

html, body {
  height: 98%; /* Consider if 100% is needed and manage potential scrollbars if content overflows */
}

.flex-container {
  display: flex;
  flex-flow: row wrap; 
  justify-content: space-around; 
  align-items: center; 
  padding: 0;
  margin: 0;
  list-style: none; 
}

.flex-container-top {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start; 
  align-items: stretch; 
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-container-gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start; 
  align-items: stretch; 
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Flex items - general styling for items within flex containers */
.flex-item {
  background: transparent;
  padding: 30px;
  width: 120px; 
  height: auto;
  margin-top: 10px;
  line-height: 20px;
  color: white; 
  font-weight: normal;
  font-size: 1em;
  text-align: center;
}

.flex-item a {
  color: lime;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
}

.flex-item img {
  border: 1px solid lime;
}

.flex-works {
  background: transparent;
  padding: 40px;
  width: 260px;
  height: auto;
  margin-top: 80px;
  line-height: 20px;
  color: white; 
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  text-align: center;
}

.flex-works img {
  border: 1px solid #000;
  max-height: 300px;
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

.flex-works a {
  color: lime;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.2em;
  text-align: center;
}

.flex-item-III {
  background: transparent;
  padding: 20px;
  width: 200px;
  height: auto;
  margin-top: 0px;
  line-height: 0px; 
  color: lime;
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  text-align: center;
}

.flex-item-IIX {
  background: transparent;
  padding: 20px;
  width: 350px;
  height: auto;
  margin-top: 5px;
  line-height: 20px;
  color: lime;
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  text-align: center;
}

.flex-item-img {
  background: transparent;
  flex-grow: 4; 
  flex-shrink: 3; 
  padding: 5px;
  width: 180px; 
  height: auto;
  margin-top: 0px;
  line-height: 0px; 
  color: lime;
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  text-align: center;
}

.flex-img-h {
  background: transparent;
  flex-grow: 4;
  flex-shrink: 3;
  padding: 0px;
  width: 390px;
  height: auto;
  margin-top: 0px;
  line-height: 0px; 
  color: lime;
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  text-align: center;
}

.flex-item-footer {
  background: transparent;
  padding: 15px;
  width: 100%; 
  height: auto;
  margin-top: 50px;
  line-height: 20px;
  color: lime;
  font-weight: normal;
  font-size: 1em;
  text-align: center;
}

/* ========== SCROLLBOX STYLES ========== */
.scrollbox {
  margin: 0 auto; 
  overflow: auto; 
  background-color: transparent;
  border: 0px solid #0000ff; 
  max-height: 450px; 
  margin-top: 0;
  padding: 15px;
}

/* Column layouts */
.left {
  width: 31%;
  margin: auto; 
  margin-right: 30px; 
}

.left-wider {
  width: 500px;
  margin: auto;
  margin-right: 30px;
}

.scrollbox-left {
  margin: 0 auto;
  overflow: auto;
  background-color: #fff; 
  border: 1px solid #0000ff; 
  max-height: 400px;
  margin-top: 0;
  padding: 15px;
  text-align: justify; 
}

.right {
  background-color: transparent;
  padding: 0px;
  width: 31%;
  margin: auto;
  margin-left: 30px;
}

.right-wider {
  background-color: transparent;
  padding: 0px;
  width: 500px;
  margin: auto;
  margin-left: 30px;
}

.center {
  margin: auto; 
  padding: 20px;
  width: 100%; 
}

.center-column {
  margin: auto;
  padding: 0px;
  width: 31%; 
  background-color: transparent;
}

.center-post {
  margin: auto; 
  padding: 15px;
  width: 90%; 
  background-color: #fff; 
  border: 1px solid #0000ff; 
}

.center-photo {
  margin: auto;
  width: 650px; 
  background-color: transparent;
  border: none;
}

.center-post-blog {
  margin: 100px auto 0 auto; 
  padding: 15px;
  width: 450px; 
  background-color: transparent;
  border: none;
  text-align: justify;
}

.photograph {
  padding: 100px; 
  text-align: center;
}

.photograph-c {
  padding: 100px 0px 100px 0px; 
  text-align: center;
}

.scrollbox-right {
  margin: 0 auto;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #0000ff;
  height: 670px; 
  margin-top: 0;
  padding: 15px;
  text-align: justify;
}

.scrollbox-right-II {
  margin: 0 auto;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #0000ff;
  width: auto; 
  max-height: 400px;
  margin-top: 0px;
  padding: 15px;
}

/* Ensure images are responsive within their containers */
/* This general rule applies to all images, including the centered GIF */
img {
  max-width: 100%;
  height: auto; 
  display: block; 
}

/* ========== SLIDESHOW STYLES ========== */
.slides {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  overflow-y: scroll; 
  scroll-snap-type: y mandatory; 
  z-index: 10; 
}

.slides figure {
  height: 100vh; 
  padding: 0 5vw; 
  margin: 0; 
  display: grid; 
  place-items: center; 
  align-content: center; 
  scroll-snap-align: center; 
}

.slides figure img {
  max-height: 88vh; 
  max-width: 100%; 
  object-fit: contain; 
}

.slides figure.cover {
  padding: 0; 
}

.slides figure.cover img {
  max-height: none; 
  position: absolute; 
  z-index: -1; 
  width: 100vw; 
  height: 100vh; 
  object-fit: cover; 
}

figure {
  margin: 2em 0 1.5em 0; 
}

figure figcaption {
  margin: 0.8em 0 0 0; 
  font-size: .85em; 
  opacity: .7; 
  text-align: center; 
}

/* ========== MISCELLANEOUS STYLES ========== */
.subtitle {
  font-weight: bold;
  padding-top: 3px;
  margin-bottom: 5px;
}

.boxwrap { 
  padding-left: 10px; 
  padding: 10px; 
}

.footer {
  color: #ccc; 
  text-align: center;
  padding: 10px;
  overflow: hidden; 
  width: 100%; 
  margin-top: auto; /* Pushes to bottom if parent is flex and has height */
  /* position: fixed; bottom: 0; */ /* Alternative for fixed footer */
}

.footer a {
  text-decoration: none;
  color: lime;
}

.header {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-bottom: 50px;
  width: 100%;
  position: relative; 
}

.header-logo {
  position: absolute;
  top: 25px;
  left: 45px;
  z-index: 20; 
}
.header-logo img { 
    max-height: 50px; 
}


.header-left {
  text-align: left;
  padding: 20px; 
}

.header-left a {
  font-weight: bold;
}

.header-right {
  text-align: right;
  padding: 20px; 
}

.footer-right { 
  float: right; 
  position: absolute; 
  text-align: right;
  top: 55%; 
  right: 90px;
}

ul.stars {
  list-style: none; 
  padding: 0px;
  margin: 0px;
}

ul.stars li::before {
  content: "\2606"; 
  margin-right: 5px; 
  color: lime; 
}

.main-content-area { 
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  margin: 0 auto; 
  max-width: 1200px; 
  padding: 20px;
  /* This is where your main page content would go. 
     The centered GIF in .iframe-wrapper is fixed and floats above this. */
}

.post .title {
  font-size: 18px;
  font-weight: bold;
  text-decoration: overline;
  margin-bottom: 10px;
  padding-left: 10px;
}

.post .date {
  margin-bottom: 10px;
  font-size: 0.9em;
  color: #777; 
}

.entry { 
  padding-left: 0px; 
  text-align: justify;
  line-height: 1.6;
}

video.video, .video iframe { /* Targeting video element or iframe within .video class */
    max-width: 100%;
    display: block;
    margin: 1em auto; /* Center video elements */
}
.video-responsive { /* Wrapper for responsive iframe videos */
   overflow: hidden;
   padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
   position: relative;
   height: 0;
   margin: 1em 0;
 }
 .video-responsive iframe {
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   position: absolute;
 }


.postFooter {
  padding-top: 0px; 
  padding-left: 0px; 
  margin-top: 20px;
  font-size: 0.9em;
  color: #888;
}

.boxwrap img { 
  width: 130px; 
  display: block; 
}

/* ========== RESPONSIVE DESIGN (Media Queries) ========== */
@media only screen and (max-width: 730px) {
  .iframe-wrapper {
    width: 80vw; /* Make GIF container responsive on smaller screens */
    /* max-width: 250px; */ /* Optional: cap max width on mobile */
  }
  
  .flex {
    flex-wrap: wrap; 
  }
  
  .right {
    width: 100%; 
    order: 1; 
    margin-left: 0; 
    margin-right: 0;
  }
  
  .left {
    width: 100%; 
    order: 2; 
    display: flex; 
    flex-wrap: wrap;
    align-self: center;
    justify-content: center;
    margin-top: 20px;
    margin-left: 0; 
    margin-right: 0;
  }

  .header {
    flex-direction: column; 
    padding-bottom: 20px;
  }
  .header-left, .header-right, .header-logo {
    position: static; 
    text-align: center; 
    width: 100%;
    padding: 10px 0;
  }
  .header-logo img {
      margin: 0 auto; 
  }

  .scrollbox-left, .scrollbox-right {
      max-height: 300px; 
  }

  .center-post-blog, .center-photo, .left-wider, .right-wider {
      width: 90%; 
      margin-left: auto;
      margin-right: auto;
  }

  h1 {
      font-size: 1.8em; 
  }
  h2 {
      font-size: 1.1em; 
  }
}