body {
    color: rgb(143, 68, 68);
    background: linear-gradient(0deg, #d9e595, rgb(216, 140, 140), #d9f056);
    background-size: 200%;
}

a {
    color: rgb(100, 114, 99);
    vertical-align: center;
}

p {
    color: linear-gradient(180deg,rgb(245, 220, 212),  rgb(250, 225, 220), rgb(255, 229, 229));
    padding: 0px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: inline-block;
    margin:0px;
    font-size: 15px;
}

h2 {
    padding-left: 1%;
}

nav {
    border-style:outset;
    border-radius: 5px;
    border-color: rgb(255, 153, 253);
    background: linear-gradient(180deg,rgb(255, 215, 215),  rgb(209, 180, 220), rgb(175, 215, 246));
    padding: 0;
    margin: 0;
    width: 20vw;           /* Adjust based on your design */
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

nav ul {
  padding: 0;
  list-style-type: none;
  width: 90%;
  height: auto; /* Use fixed height or min-height instead of percentage */
  margin: 2% auto; /* Centers the list items horizontally */
}

nav li {
  background: linear-gradient(180deg, rgb(247, 241, 158), #d8f14b);
  border: 3px outset rgb(212, 212, 90); /* Shorthand for border */
  width: 100%;
  height: 50px; /* Use fixed height or min-height instead of percentage */
  margin: 2% auto; /* Centers the list items horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

nav li a {
  color: rgb(125, 75, 125);
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 22px;
  text-decoration: none;
  /* Removed 'display: block' because the flex parent handles alignment */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clicked {
    color:rgb(10, 134, 117);
    background:linear-gradient(180deg, rgb(247, 241, 158), rgb(205, 205, 80));
    border-style: inset;
    border-color: rgb(197, 197, 120);
    display: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 15px;
    text-decoration: none;
}


.page-wrapper {
    display: flex;           /* Enables Flexbox */
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 90vh;            
    width: 60vw;
    margin: 0 auto;          /* Centers the .page-wrapper itself on the screen */
    padding-top: 5vh;        /* Note: This will push the content down slightly from the "true" center */
}


.main-content {
    border-style:outset;
    border-radius: 5px;
    border-color: rgb(255, 153, 253);
    background: linear-gradient(180deg,rgb(120, 198, 250),  rgb(147, 198, 250), rgb(160, 188, 250));
    width: 50vw;           /* Adjust based on your design */
    height: 80vh;
}

.main-content-home {
    border-style:outset;
    border-radius: 5px;
    border-color: rgb(255, 153, 253);
    background: linear-gradient(180deg,rgb(120, 198, 250),  rgb(147, 198, 250), rgb(160, 188, 250));
    width: 50vw;           /* Adjust based on your design */
    height: 80vh;
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
}

.main_header  {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,rgb(191, 76, 119),  rgb(140, 150, 155), rgb(110, 176, 200));
  color: rgb(255, 229, 229);
  height: 10%;
  width: 100%;
  font-size: 40px;
}

.music-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-card {
    background: linear-gradient(#e890bb, #e8b8d0);
    border: 1px solid #444;
    border-radius: 8px;
    width: 90%;
    margin: 1%;
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.song-info h3 {margin-left: 1%; padding-bottom: 0%; margin: 0%; font-size: 1.2rem; }
.song-info p { margin: 0%; font-size: 0.9rem; opacity: 0.8; }

.controls {
    color: rgb(10, 10, 11); 
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.download-btn {
    background-color: #555;
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: background 0.3s;
}
.download-btn:hover { background-color: #777; }

audio { height: 35px; }

.origami-container {
    position: relative;
    width: 500px; 
    height: 500px;
    border: #ccc;
    padding-top: 1%;
    padding-bottom: 1%
}

.origami-container img {
    width: 100%;
    height: 100%;
    /* This is CRITICAL for pixel art - prevents blurring */
    image-rendering: pixelated; 
    cursor: crosshair; /* Makes it feel more like an investigation/ARG */
    touch-action: manipulation;   /* Prevents double-tap zoom delay */
    -webkit-user-select: none;    /* Prevents highlighting the image on long-press */
    user-select: none;
}

#playAllBtn {
    background: linear-gradient(#fbb5d7, #fad3e7);
    padding: 1%;
    margin: 1%;
}


/* Add this to the bottom of your CSS file */
@media screen and (max-width: 768px) {
    .page-wrapper {
        flex-direction: column; /* Stack Nav on top of Content */
        width: 95vw;            /* Use more of the screen width */
        height: auto;           /* Let it grow with content */
        padding-top: 2vh;
    }

    nav {
        width: 100%;            /* Nav spans full width on mobile */
        height: auto;
        margin-bottom: 10px;
    }

    .main-content-home, .main-content {
        width: 100%;            /* Content spans full width */
        height: auto;
        min-height: 400px;
    }

    .origami-container {
        width: 90vw;            /* Scale the container to the phone screen */
        height: 90vw;           /* Keep it square */
    }
}
    
/* 1. The Wrapper Div */
.image-container {
  display: flex;          /* Turns on flexbox */
  flex-direction: column;
  flex-wrap: wrap;        /* Allows images to drop to the next line automatically */
  align-items: center;/* Centers images horizontally (can change to flex-start or space-between) */
  gap: 15px;              /* Puts a clean space between the images without messy margins */
  padding: 15px;
  width: 100%;            /* Keeps the div responsive */
  box-sizing: border-box;
}

/* 2. The Images Inside */
.image-container img {
  width: 522px;           /* Gives them a standard base width */
  height: 210px;          /* Gives them a standard height */
  /* object-fit: cover;      Crucial: crops the image nicely so it doesn't look stretched or squished */
  border-radius: 8px;     /* Optional: just makes the corners look nice */
  flex-grow: 0;           /* Optional: allows images to expand slightly to perfectly fill empty row space */
}