/* ======= THEME VARIABLES (tweak colors here) ======= */
:root{
  /* sizing */
  --site-max: 1100px;
  --banner-h: 160px;              /* keep your current banner height; change if you want */

  /* colors */
  --nav-bg: #5c4b44;              /* warm brown for nav bar */
  --nav-link: #f2eee6;            /* tan nav links */

  --box-bg: #f2eee6;              /* content box background (different from nav) */
  --box-alt-bg: #89574d;          /* sidebar pill/buttons background */
  --page-shadow: 0 10px 22px rgba(40,30,22,.14);

  --border-soft: #cfb6a9;
  --border-strong: #b39282;

  --text: #2f2b28;
  --text-soft: #3f3a36;
  --accent: #8b3a3a;              /* warm red for titles */
}



/* ======= GLOBAL ======= */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  color:var(--text);
  font:14px/1.6 Georgia, serif;

  /* SIDE DESIGNS — upload pattern.png
     This paints a repeating pattern behind the centered site.
     Your boxes stay on top, so only the sides show it. */
  background:
    url('2pattern.png') repeat fixed center top,
    #f3f0e9;
}

/* Centered container that controls the identical width
   of BOTH the banner and the nav */
.site{
  max-width: var(--site-max);
  margin: 0 auto 48px;
  padding: 0 14px; /* a little breathing room inside */
}



.title-img {
  display: block;
  margin: 0 auto;
  max-width: 80%;   /* keeps it responsive */
  height: auto;
}

/* Banner sizing stays the same */
.banner{
  position: relative;
  width: 100%;
  height: var(--banner-h);
  background: url('banner.jpg') repeat-x center top;
  background-size: auto var(--banner-h);
  border-bottom: 2px solid var(--border-strong);
  box-shadow: var(--page-shadow);
  border-radius: 10px 10px 0 0;
  overflow: hidden; /* keeps the title image neatly inside */
}

/* Center the title image inside the banner like pic #2 */
.banner .title-img {
  position: absolute;
  top: 70%;                 /* vertically centered */
  left: 5px;               /* distance from left edge */
  transform: translateY(-50%);  /* perfect vertical centering */
  max-width: 250px;         /* shrink image (adjust this size smaller/bigger) */
  height: auto;

}

/* Pull the nav up close to the banner */
.topnav{ 
  margin-top: 6px; 
}


/* ======= NAV — same width as banner ======= */
.topnav{
  width: 100%;
  background: var(--nav-bg);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 12px 12px;   /* connects visually to banner */
  padding: 2px 4px;
  margin: 0 0 20px;
  box-shadow: var(--page-shadow);
}

.topnav ul{
  display:flex;
  justify-content: center;
  gap:46px;
  list-style:none;
  padding:0; margin:0;
}
.topnav a{
  color: var(--nav-link);
  text-decoration:none;
  font-family: 'Libertinus Serif Display', serif;
  font-size: 19px;     /* Tangerine looks best a bit larger */
  font-weight: 100;    /* try 400 for thin, 700 for bold */
  letter-spacing: 3px;
  text-transform: none; /* keeps everything lowercase */
}
.topnav a:hover{ text-decoration: underline }

.title-image {
  display: block;
  margin: 4px auto 0;    /* space above image */
  width: 100%;             /* make it responsive in width */
  height: 250px;          /* fixed shorter height */
  object-fit: cover;      /* crop instead of squish */
  border-radius: 10px;    /* optional rounded corners */
  transform: scale(.5) translate(0px, -200px); /* scale = zoom, translate = move */
}
.content .card p {
  margin-top: -190px;   /* negative value pulls it upward */
}


.bigpic1 {
  display: block;
  margin: 22px auto 0;    /* space above image */
  width: 90%;             /* make it responsive in width */
  height: 250px;          /* fixed shorter height */
  object-fit: cover;      /* crop instead of squish */
  border-radius: 10px;    /* optional rounded corners */
}

/* ======= MAIN GRID ======= */
.grid {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 22px;
  align-items: stretch;   /* make all grid items equal height */
}

/* ======= CARDS / BOXES ======= */
.card{
  background: var(--box-bg);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  margin-bottom: 18px;
}

.section-title,
.sidebar .pill {
  font-family: 'Alice', serif;
  font-size: 19px;
  font-weight: 1000;
  font-style: italic;   /* makes them italic */
  color: #804644;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 3px;    /* pull closer to the top of the box */
  margin-bottom: 8px;   /* keep some spacing under */
  padding-top: 0;       /* remove extra top padding */
}

.sidebar p {
  background: none;   /* remove little box */
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0 0 12px;   /* keep a little space below each */
}

/* Apply Alice to main paragraph text */
p, .card p, .sidebar p {
  font-family: 'Alice', serif;
  font-size: 15px;
  line-height: 1.6;
  font-style: normal;  /* keep normal so it's not italic like your titles */
  color: #79230a;      /* optional: softer black */
}

.sidebar section:nth-of-type(2) .pill {
  margin-top: 40px;   /* adjust until it looks right */
}

.song-image {
  display: block;
  margin: 10px auto;   /* centers the image horizontally */
  max-width: 220px;    /* set your preferred max size */
  height: auto;        /* keeps proportions correct */
    filter: brightness(90%);  /* lower % = darker */

  /* --- new adjustments --- */
  transform: scale(1.3) translate(13px, 11px); /* scale = zoom, translate = move */
  transition: transform 0.3s ease;        /* smooth animation */
}

/* Example: hover to enlarge a little (optional) */
.song-image:hover {
  transform: scale(1.05) translate(0px, -3px);

}

.corner-gif {
  position: absolute;  /* stays in one place in the page layout */
  top: 100px;          /* distance from the top of the page */
  left: 1190px;          /* distance from the left */
  width: 140px;        /* make bigger/smaller */
  height: auto;        /* keeps proportions */
  z-index: 10;         /* make sure it shows above background */
    /* Darkening effect */
  filter: brightness(80%);  /* lower % = darker */
}

.cat-gif {
  position: absolute;
  top: 50px;         /* distance from top of page */
  left: 250px;        /* move it from the left side (increase number = push right) */
  width: 100px;      /* adjust size */
  height: auto;
  z-index: 20;       /* keep it above banner/nav */
  filter: brightness(120%) sepia(1) hue-rotate(20deg) saturate(300%);
}

.flower {
  display: block;
  margin: 10px auto;   /* centers the image horizontally */
  max-width: 220px;    /* set your preferred max size */
  height: auto;        /* keeps proportions correct */
    filter: brightness(90%);  /* lower % = darker */

  /* --- new adjustments --- */
  transform: scale(.4) translate(-270px, -940px); /* scale = zoom, translate = move */
  transition: transform 0.3s ease;        /* smooth animation */
}

.ribbon {
  display: block;
  margin: 10px auto;   /* centers the image horizontally */
  max-width: 220px;    /* set your preferred max size */
  height: auto;        /* keeps proportions correct */
    filter: brightness(90%);  /* lower % = darker */

  /* --- new adjustments --- */
  transform: scale(.4) translate(290px, -990px); /* scale = zoom, translate = move */
  transition: transform 0.3s ease;        /* smooth animation */
}

/* ===== Equal height columns ===== */
.grid{
  align-items: stretch;            /* all three columns same height */
}
.content{
  display: flex;
  flex-direction: column;
  gap: 22px;              /* nice spacing between cards */
}

.content .card{
  flex: 0 0 auto;         /* STOP stretching all cards */
}

/* Make the first card (about) taller */
.content .card:first-child{
  min-height: 680px;      /* adjust to taste */
}

/* ===== One tall background box for each sidebar ===== */
.sidebar{
  position: relative;
  padding: 14px;                   /* space between the tall box edge and content */
}
.sidebar::before{
  content: "";
  position: absolute;
  inset: 0;                        /* fill the whole sidebar column */
  border-radius: 12px;
  background: var(--box-bg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
  z-index: 0;                      /* sit behind the content */
}
.sidebar > *{
  position: relative;
  z-index: 1;                      /* keep content above the tall box */
}

/* ===== OPTIONAL: if you don't want mini white boxes inside the sidebars ===== */
/* (Uncomment these if you want only the tall column box, no inner boxes) */
/*
.sidebar p{
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.links li{
  background: transparent;
  border: none;
  box-shadow: none;
}
.links a{ padding: 8px 0; }
*/


.links{
  list-style:none;
  padding:0; margin:0;
}
.links li{
  background: var(--box-alt-bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  text-align:center;
  margin: 10px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.links a{
  display:block;
  padding: 8px 10px;
  color: var(--text);
  text-decoration:none;
}
.links a:hover{ text-decoration: underline }

/* ======= FOOTER ======= */
.site-footer{
  text-align:center;
  color: var(--text-soft);
  margin-top: 10px;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}