/* 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: 'LaMarseillaise';
  src: url('https://eylau.neocities.org/fonts/1792%20La%20Marseillaise%20W01%20Rg.ttf');
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-image: url('/images/bg.png');
  color: black;
  font-family: serif;
    max-width: 30%;
    overflow: scroll;
    margin: auto;
}
#container {
  position: relative;
  margin-top: 25px;
}

.item {
   width: 100%;
}

.border {
  border-image: url('/images/border.png') 20% fill;
  border-width: 20px;
  border-style: solid;
  border-image-outset: 15px;
  background-color: #707160;
   margin-top: 60px;
}

.quote {
  text-align: center;
  color: #3f0b05;
}

.title {
  font-family: 'LaMarseillaise';
  position: absolute;
  color: #efe5cd;
  z-index: 1000;
  font-size: 3em;
  top: -75px;
  right: -90px;
  transform: none;
  transition: all 0.3s ease-in;
  text-shadow: none;
}

.title:hover {
  transform: scale(1.2);
  transition: all 0.3s ease-in;
text-shadow: 0px 0px 11px #CECECE, 0px 0px 11px #CECECE;
}

.frame-wrapper {
  position: relative;
  width: 100%;
}

.rope {
  position: absolute;
  z-index: -1;
  width: 15px;      /* Consistent thickness */
  height: 80px;     /* Length of the rope gap */
  bottom: -60px;    /* Pulls it down into the gap between boxes */
}

.left {
  left: 10%;        /* Anchors relative to the left side of the frame */
}

.right {
  right: 10%;       /* Anchors relative to the right side of the frame */
  transform: scaleX(-1);
}

.cleft {
  left: 35%;
    transform: scaleX(-1);
}

.cright {
  right: 35%;
}

nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 50px;
  transition: margin-top 0.7s ease-in;
}

/* Pull nav smoothly to the top when top-wrapper collapses */
body.page-active nav {
  margin-top: 50px;
    transition: margin-top 0.7s ease-in;
}

/* Grid wrapper controls layout height without hardcoded max-height limits */
.collapsible-section {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#top-wrapper {
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Active sub-page collapses row height to 0fr and slides/fades out top elements */
body.page-active .collapsible-section {
  grid-template-rows: 0fr;
}

body.page-active #top-wrapper {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

/* Nav positioning adjustments */
nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 50px;
  transition: margin-top 0.6s ease;
}

body.page-active nav {
  margin-top: 10px;
}

#page-container {
  opacity: 1;
  max-height: 100%;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s, max-height 0.5s ease;
  margin-top: 30px;
  overflow: hidden;
  margin-bottom: 100px;
  padding: 0;
}

#page-container.page-hidden {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.button {
  border-image: url('/images/border.png') 20% fill;
  border-width: 20px;
  border-style: solid;
  border-image-outset: 5px;
  background-color: #707160;
margin-top: 0;
}

nav a {
  width: 20%;
  color: #583a1c;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #250502;
}

#top-wrapper {
  max-height: 100%;
  opacity: 1;
  transition: max-height 0.8s ease-in-out, opacity 0.5s ease-in-out, margin 0.8s ease-in-out;
}

body.page-active #top-wrapper {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  transition: max-height 0.8s ease-in-out, opacity 0.5s ease-in-out, margin 0.8s ease-in-out;
}

#page-container {
display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  margin-top: 30px;
  background-color: #e5dac1;
  padding: 20px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}

#page-container.page-hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.3s ease-in;
}

nav .active {
  background-color: #555648;
  color: #707160;
}

.back-btn {
  display: inline-block;
  margin-bottom: 15px;
  color: #3f0b05;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

.page-title {
  text-align: center;
  font-family: 'LaMarseillaise';
  font-size: 2.8em;
  color: #250502;
  border-bottom: 1px solid #707160;
  padding-bottom: 8px;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.profile-section {
  font-size: 0.95em;
  line-height: 1.6;
}

.profile {
  display: flex;
}
.portrait {
  height: 60%;
  width: 60%;
}

@media screen and (max-width: 768px) {
body {
  max-width: 70%;
}

#container {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
      margin-bottom: 50px;
}
.title {
  right: 0;
}

nav {
flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 50px;
}
nav a {
  width: 100%;
}
body.page-active nav a:not(.active) {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -20px;
    border: none; /* Prevents border image from rendering when collapsed */
    pointer-events: none;
  }
.cleft, .cright {
  visibility: hidden;
}
}