/* styles.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');

/* Basic body styles */
body {
    color: black;
    background-color: black;
    font-family: Arial;
    margin: 0;
    padding: 0;
}

/* Header styles with lighter blue */
header {
    text-align: center;
    padding: 15px;
    background-color: #BCE2F0;
    border-bottom: 2px solid #A8E4A0;
}

h1, h2 {
    margin: 5px;
}

/* Navigation styles with pale orange */
nav {
    background-color: #FFD699;
    padding: 10px;
    border-bottom: 2px solid #A9D6E5;
}

nav a {
    color: black;
    text-decoration: none;
    margin: 0 10px;
}

nav a:hover {
    color: #80D8DD;
    text-decoration: underline;
}

/* Center text class */
.center {
    text-align: center;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusts columns based on image sizes */
    gap: 10px;          /* Space between images */
    text-align: center;
    margin: 10px 0;
}

.image-gallery img {
    max-width: 100%;
    height: auto;
    border: 2px solid #FFB6C9;
    border-radius: 5px;
}

video {
    width: 100%;
    max-height: 250px;
    border: 2px solid #80D8DD;
    border-radius: 5px;
    margin: 10px 0;
}

/* Main grid base styles */
main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 5px;
    padding: 20px;
    background-color: black;
    min-height: 100vh;
}

/* Grid boxes */
section, .central-box {
    padding: 30px;
    border: 2px solid #A9D6E5;
    border-radius: 10px;
    background-color: white;
}

/* Central box specific styles */
.central-box {
    background-color: #A8E4A0;
    border: 2px solid #FFD699;
    text-align: center;
}

/* Home page layout (original) */
.home section:nth-child(1) {
    background-color: #DDA8DD;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.home section:nth-child(2) {
    background-color: #FFD699;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.home section:nth-child(3) {
    background-color: #FFB6C9;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}
.home .central-box {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
.home section:nth-child(4) {
    background-color: #80D8DD;
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.home section:nth-child(5) {
    background-color: #E0CCE6;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

/* Habitat page layout */
.habitat section:nth-child(1) {
    background-color: #80D8DD;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.habitat section:nth-child(2) {
    background-color: #E0CCE6;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}
.habitat section:nth-child(3) {
    background-color: #FFB6C9;
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}
.habitat .central-box {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.habitat section:nth-child(4) {
    background-color: #DDA8DD;
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.habitat section:nth-child(5) {
    background-color: #FFD699;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

/* Behavior page layout with swapped yellow and teal */
.behavior section:nth-child(1) {
    background-color: #FFB6C9;
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}
.behavior section:nth-child(2) {
    background-color: #FFD699; /* Yellow */
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}
.behavior section:nth-child(3) {
    background-color: #80D8DD; /* Teal */
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.behavior .central-box {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.behavior section:nth-child(4) {
    background-color: #DDA8DD;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.behavior section:nth-child(5) {
    background-color: #E0CCE6;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

/* About & Credits page layout with full palette */
.about section:nth-child(1) {
    background-color: #E0CCE6; /* Very soft purple */
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.about section:nth-child(2) {
    background-color: #80D8DD; /* Pale teal */
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.about section:nth-child(3) {
    background-color: #DDA8DD; /* Softer purple */
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}
.about .central-box {
    background-color: #A8E4A0; /* Pale green */
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.about section:nth-child(4) {
    background-color: #FFB6C9; /* Softer pink */
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.about section:nth-child(5) {
    background-color: #FFD699; /* Pale orange */
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

/* Footer styles with softer blue */
footer {
    text-align: center;
    padding: 15px;
    background-color: #A9D6E5;
    border-top: 2px solid #FFD699;
}

footer a:hover {
    color: #FFB6C9;
}

/* Custom CSS rules with embedded fonts */

/* Rule 1: Class-based selector for section headings */
.section-title {
    font-family: "Dancing Script";
    color: #1a1a1a;
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Rule 2: ID-based selector for header text */
#header-text {
    font-family: "Dancing Script";
    color: #002828;
    font-size: 36px;
    font-style: normal;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Rule 3: Descendant selector for paragraphs in sections */
section p {
    font-family: "Roboto";
    color: #1a1a1a;
    font-size: 16px;
}

/* Rule 4: Class-based selector for centered text */
.center-text {
    font-family: "Dancing Script";
    color: #4d004d;
    font-style: italic;
    text-align: center;
}

/* Rule 5: ID-based selector for navigation links */
#nav-links {
    font-family: "Roboto";
    color: #663300;
    font-size: 18px;
}

/* Rule 6: Child selector for emphasized text in paragraphs */
p > strong {
    font-family: "Dancing Script";
    color: #003366;
    font-style: normal;
    font-size: 20px;
}

/* New Rule 7: Child selector for spans that are direct children of paragraphs */
p > span {
    font-family: "Roboto";
    color: #008080;  /* Teal color matching your header span */
    font-style: italic;
    font-size: 16px;
}

/* New Rule 8: Descendant selector for any spans within paragraphs */
p span {
    font-family: "Roboto";
    color: #006666;  /* Slightly darker teal for distinction */
    font-style: italic;
    font-size: 15px;
}