/* Basic reset */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

:root{
      --fade-duration:1000ms;
      --fallback: #333333;
    }


* { box-sizing: border-box; margin: 0; padding: 0; }

/* @font-face {
    font-family: "GothicFont";
    src: url(fonts/Copperplate-Gothic-Std-29-AB.ttf)
} */


/* page-wide black theme */
html, body { height: 100%; 
scroll-behavior: smooth;}
body {
    background-color: #000;
    transition: 1s linear background-color; 
    color: #fff;
    font-family: "Montserrat";
    font-weight: bold; 
    line-height: 1.4;
    -webkit-font-smoothing:antialiased;
}

.face-shot-onload{
    box-shadow: -10px 5px 30px 10px rgba(255, 255, 255, 0.8);
    animation: fadeIn 2s ease-in-out;
    filter: grayscale(0%);
}



 
a { color: #ffffff; text-decoration: underline; }
/* Hero: split layout */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}


.hero-inner {
    width: 100%;
    max-width: 1100px;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-between;
  
  /* The image used */

  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}



/* Left image */
.left {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left img {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: cover;

    border: 2px solid rgb(255, 255, 255);
}

/* Right list of links */
.right {
    
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right ul {
  padding: 10px;
  border-radius: 10px;

    list-style: none;
    text-align: left; /* align the list visually on the right column */
}

.right li {
    margin: 0.6rem 0;
}

/* Links: white, no underline, clear focus state */
.right a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    padding: 0.2rem 0.4rem;
    transition: color .14s ease, transform .14s ease;
    display: inline-block;
}


.right a:hover,
.right a:focus {

    transform: translateX(-10px);
    outline: none;
}

/* button style for delete */
/*Journal Tag Filter Styles*/
.filter-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .filter-btn {
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #f4f4f4;
      cursor: pointer;
      transition: 0.2s;
      user-select: none;
    }

    .filter-btn.active {
      background: #007bff;
      color: white;
      border-color: #007bff;
    }

    .filter-btn:hover {
      background: #e0e0e0;
    }
/* Main content and footer styles */

/* Keep footer and main readable on black */
main, footer {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
    color: #ddd;
}

footer p { color: #bbb; }

/* Responsive adjustments */
@media (max-width: 800px) {
    .hero-inner { flex-direction: column; gap: 1.5rem; }
    .left, .right { flex: 0 0 auto; width: 100%; }
    .right ul { text-align: center; }
    .right a { font-size: 1.2rem; }
}


/* Style for fading hero background images */


    /* Container covering the viewport */
    .bg-root{
      position:fixed;
      inset:0; /* top:0;right:0;bottom:0;left:0 */
      z-index:-1; /* behind page content */
      pointer-events:none;
    }

    /* Each layer is absolutely positioned and covers the whole area */
    .bg-layer{
      position:absolute;
      inset:0;
      filter:blur(8px);
      -webkit-filter:blur(8px);
      background-position:center center;
      background-size:cover;
      background-repeat:no-repeat;
      opacity:0; /* start hidden */
      transition:opacity var(--fade-duration) ease-in-out;
      will-change:opacity;
    }

    /* the currently visible layer gets opacity:1 */
    .bg-layer.visible{opacity:1}

    

    /* Respect user preference for reduced motion */
    @media (prefers-reduced-motion: reduce){
      :root{--fade-duration:0ms}
      .bg-layer{transition:none}
    }

    /* small helper to load fallback solid color if images fail */
    .bg-layer[data-fallback-color]{background-color:var(--fallback)}