/* 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." */
@font-face {
  font-family: 'la marseillaise';
  src: url(https://cuirassier.neocities.org/fonts/1792%20La%20Marseillaise%20W01%20Rg.ttf);
}

  .site-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
body {
  background-color: #050503;
  font-family: serif;
  color: white;
}

/* Base styling for both fixed scrap images */
.fixed-scrap {
  position: fixed;
  top: 20px;
  width: 350px; /* Use a fixed size so zooming doesn't shrink/grow them unpredictably */
  height: auto;
  z-index: 10;
  pointer-events: none;
}

/* 
   Calculate position from the center of the viewport (50%).
   Adjust the pixel offset (e.g., 680px) to push them exactly 
   where you want them relative to your central text column.
*/
.scrap-left {
  left: calc(50% - 760px);
}

.scrap-right {
  right: calc(50% - 760px);
}

.scrap-rbottom {
  right: calc(50% - 760px);
  top: 200px;
  width: 200px;
  transform: rotate(-10deg);
  z-index: 5;
}

.to-do {
  right: calc(50% - 730px);
  top: 230px;
  transform: rotate(-5deg) scale(0.9);
}

.seal {
  right: calc(50% - 850px);
  top: 230px;
  transform: rotate(5deg) scale(0.35);
  z-index: 500;
}

#updates {
  height: 230px;
  width: 200px;
  transform: rotate(-4deg);
    right: calc(50% - 658px);
  top: 300px;
  z-index: 100;
}

#updates p {
  margin: 0;
  font-family: 'la marseillaise';
  font-size: 2em;
  margin-top: -20px;
  color: #211511;
}

.tasks {
  overflow: scroll;
  width: 200px;
  height: 190px;
  pointer-events: auto;
  color: #211511;
}

.tasks b {
  color: #8c1921;
}

header {
  text-align: center;
  margin: 0 auto 2rem auto;
  max-width: 400px;
  position: relative;
  z-index: 2;
}

header p {
  font-family: 'la marseillaise';
  color: #978575;
  font-size: 2em;
  margin: 0;
  top: -10px;
}

header span {
  color: #c9c3c2;
  font-family: serif;
}

.paper {
  position: relative;
  width: min(700px, 90%);
  margin: 0 auto;
  z-index: 2;
  background-color: #d8d0bd;
  background-image: url(/images/paper.png);
  background-clip: padding-box;
  padding: 2.5rem;
  border: 18px solid transparent;
  border-image: url('/images/paper-border.png') 18 fill round;
  transition: height 0.4s ease-in-out; /* Animates main container height changes */
  overflow: hidden;
}

main {
  margin: auto;
}

.sidebar {
  position: fixed;
  top: 260px; /* Offset to clear space under your top-left scrap image */
  left: calc(50% - 690px); /* Pushes the sidebar to sit right next to the 700px main paper */
  
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 1.5rem;
  font-family: serif;
  color: #c9c3c2;
  z-index: 10; /* Keeps it above background elements */
}

/* Horizontal Dividers */
.sidebar .divider {
  width: 80%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 1.25rem 0;
}

/* Navigation List with Custom Fleur-de-lis Bullets */
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-nav li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  font-size: 1.1rem;
}

/* Fleur-de-lis bullet icon styling */
.sidebar-nav li::before {
  content: "⚜"; /* UTF-8 Fleur-de-lis glyph */
  color: #8c7662;
  font-size: 1.1rem;
}

.sidebar-nav a {
  color: #c9c3c2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sidebar-nav a:hover {
  color: #8b1d1d; /* Deep crimson hover color */
  text-decoration: underline;
}

/* French Flag Block */
.flag-icon {
  width: 42px;
  height: 24px;
  margin: 0 auto 0.75rem auto;
  background: linear-gradient(
    to right, 
    #002395 0%, #002395 33.3%, 
    #ffffff 33.3%, #ffffff 66.6%, 
    #ed2939 66.6%, #ed2939 100%
  );
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Text Sections */
.sidebar-motto p {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
  color: #a8a099;
}

.sidebar-portrait img {
  width: 130px;
  height: auto;
  border: 1px solid #332d29;
  filter: sepia(0.3) contrast(1.1);
}

.sidebar-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.status-label {
  font-style: italic;
  font-size: 0.85rem;
  color: #7d7268;
  margin: 0;
}

.book-title {
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
  color: #d1c9bf;
}

.book-title span {
  font-size: 0.8rem;
  color: #8c827a;
}

.status-icon {
  width: 50px;
  height: auto;
  margin: 0.4rem 0;
  opacity: 0.8;
  transform: scale(1);
  transition: transform 0.3s ease-in;
}

.status-icon:hover {
  transform: scale(1.3);
  transition: transform 0.3s ease-in;
}

.battle-cry {
  font-style: italic;
  font-size: 0.95rem;
  margin: 0.25rem 0 0 0;
  color: #b8aea3;
}

.fleur-divider {
  color: #8c7662;
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9rem;
}

.sidebar-footer-img img {
  width: 140px;
  height: auto;
  opacity: 0.85;
}

article h1 {
  font-family: 'la marseillaise';
  color: #8c1921;
  bottom: -5px;
  margin: 0;
  top: -20px;
  position: relative;
}
section h1 {
  font-family: 'la marseillaise';
  color: #8c1921;
  bottom: -5px;
  margin: 0;
  position: relative;
}

.strike {
  text-decoration: line-through;
}

.text {
  color: #211511;
  margin: 0;
  top: -15px;
  position: relative;
}

article p {
  color: #211511;
  margin: 0;
  top: -40px;
  position: relative;
}

main hr {
  margin-bottom: 40px;
}

article span {
  color: #211511;
  font-size: 0.7em;
  text-transform: lowercase;
  font-weight: bold;
}

/* Base style for all page sections */
.page-content {
  opacity: 0;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Active page visibility state */
.page-content.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}