/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /* 1. Set a fallback background color while the image loads */
  background-color: #51c4fa;

  /* 2. Link your image file path */
  background-image: url('/assets/coffee_v10.jpg');
  
  /* 3. Center the image perfectly */
  background-position: left top;
  
  /* 4. Do not let the image tile/repeat */
  background-repeat: no-repeat;
  
  /* 5. Make the image stretch cleanly to fit the screen */
  background-size: cover;
  
  /* 6. (Optional) Keeps background fixed in place while content scrolls */
  background-attachment: fixed;
  
  color: black;
  font-family: Verdana;
  
  
}

/* Container positioning */
.pencil-container {
  position: absolute;
  /* clamp(min, preferred, max) scales spacing smoothly across screens */
  top: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  z-index: 9999;
  display: inline-block;
}



/* 1. Hide the dropdown menu links initially */
.menu-content {
  display: none;
  position: absolute;
  top: 100%; /* Position right below the MENU image */
  right: 0; /* Ensures menu opens aligned to the right edge */
  left: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  background-color: transparent; /* Adjust to match your design */
  padding: 10px;
  z-index: 1000;
}

/* 2. Show the dropdown when JavaScript toggles the .active class */
.pencil-container.active .menu-content {
  display: flex;
}

#cover {
  position: relative;     /* 1. Anchors the absolute overlay to this container */
  display: flex;
  justify-content: center;/* 2. Centers the base image horizontally */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Base Image Styles */
.cover-base {
  max-width: 1300px;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  
}

/* Overlay Image Styles */
.cover-overlay {
  position: absolute;     /* 3. Pulls it out of the normal document flow */
  left: 0;                /* Pins overlay to the left edge */
  bottom: 0;              /* Anchors to bottom edge */
  
  /* Adjust size of the overlay as needed */
  width: 100%;            /* Span 100% of the viewable container width */
  height: 30%;           /* Span 100% of the viewable container height */
  pointer-events: none;   /* Ensures clicks pass through to anything underneath */
}
    
  /* Overlay Image Tag */
.cover-overlay img {
  width: 100%;
  height: auto;
  object-fit: cover;      /* Crops gracefully to match viewable area without stretching */
  object-position: bottom;   /* Matches base image alignment */
}



/* Container for the two about columns */
.about-container {
  display: flex;
  gap: 40px;                 /* Space between image and text */
  align-items: flex-start;       /* Centers image and text vertically */
  background-color: rgba(1, 66, 98, 0.7);
  /* 10vw left + 10vw right padding = 80vw middle area for content */
  padding: 50px 15vw;      
  box-sizing: border-box;  /* Ensures padding doesn't push width over 100% */
  margin-bottom: 0;        /* Removes any bottom margin */
}

/* Left Column Styling */
.about-image-col {
  flex: 0 0 auto;            /* Keeps column tight around the image */
  /*padding: 30px;*/
}

/* Portrait Image - Capped at 20% Viewport Width */
.about-portrait {
  width: 100%;               /* Scales down on small screens */
  max-width: 20vw;           /* Limits maximum width to 20% of the screen width */
  height: auto;              /* Maintains correct aspect ratio */
  display: block;
}

/* Right Column Styling */
.about-text-col {
  flex: 1;                   /* Fills the remaining available space */
  padding: 50px;
  background-image: url("/assets/About_CrumpledPaper.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; /* Prevents repeating/tiling */
  /* Font Family & Base Styling */
  font-family: 'Georgia', serif; /* Replace with your preferred font */
  font-size: 1.1rem;             /* Adjusts text size (e.g., 1.1rem, 18px, 110%) */
  line-height: 1.6;              /* Improves readability on paper background */
  color: #1a1a1a;                /* Ensures dark, readable text contrast */
}

/* Responsive adjustment for small phone screens */
@media (max-width: 600px) {
  .about-portrait {
    max-width: 60vw;         /* Gives the image a bit more width when stacked on mobile */
  }
}

.container {
  background-image: url("https://alexandrawenzel.neocities.org/assets/Background-Scrolling_v5.jpg");
  font-family: "Space Mono", monospace;
  font-size: 42px;
  color: #F4F4F4;
  /*font-weight: bold; /* Makes the text bold */
  margin-top: 0;           /* Removes any top margin */
  /* Flexbox Centering */
  display: flex;
  flex-direction: column;   /* Stacks quote and cite vertically if needed */
  justify-content: center;  /* Centers vertically */
  align-items: center;      /* Centers horizontally */
  
  min-height: 160px;        /* Set a height or use padding */
  padding: 20px 0;
}

/* Remove default browser margins from the inner blockquote if present */
.container blockquote,
#shadow,
.container cite {
  margin: 0;
  padding: 0;
}

/* Container layout converted to Multi-Column (Pinterest style) */
.portfolio-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  box-sizing: border-box;

  /* Pinterest Column Setup */
  column-width: 280px; /* Automatically creates as many ~280px columns as fit */
  column-gap: 30px;    /* Horizontal gap between columns */
}

/* Header styling */
.portfolio-container h2 {
  font-size: 4.2rem;
  margin-bottom: 35px;
  font-family: "Georgia", serif;
  color: #222;
  
  /* Forces the header to stretch across all columns */
  column-span: all;
}

/* Individual gallery card styling */
.portfolio-item {
  /* Critical for Pinterest layout */
  break-inside: avoid;      /* Prevents cards from breaking across columns */
  margin-bottom: 30px;      /* Vertical gap between stacked cards */
  display: block;           /* Standard block flow */

  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Lift effect on hover */
.portfolio-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Image scaling inside links/cards */
.portfolio-item a {
  display: block;
}

.portfolio-item img {
  width: 100%;
  height: auto;        /* Preserves natural aspect ratio without cropping */
  display: block;
}

/* Artwork title and dimensions styling */
.image-title {
  padding: 14px 12px;
  font-size: 0.95rem;
  font-family: Arial, sans-serif;
  color: #444;
  line-height: 1.4;
  background-color: #fff;
}