/* style.css */
        /* ========== BASE ========== */
body {
    background-color: #faf8f6;
    font-family: Courier, monospace;
    font-size: 16px;
    color: black;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* ========== DARK MODE SUPPORT ========== */
.dark-mode {
    background-color: #1e2440;
    color: #bec8cb;
}
.dark-mode a {
    color: #bec8cb;
}

.dark-mode a:hover {
    color: #fbb07b;
}

.dark-mode .grid-item,
.dark-mode .child-left,
.dark-mode .child-right {
    background-color: #1a1a1a;
    color: #bec8cb;
    border-color: #bec8cb;
}

.dark-mode h2 a,
.dark-mode h2 a:hover,
.dark-mode h2 a:visited {
    color: #bec8cb;
    text-decoration: none;
}

.dark-mode .child-left a {
        color: #bec8cb;
        font-weight: 600;
}

.dark-mode .child-left a:hover {
            color: #fbb07b;
}


.dark-mode .child-right a {
        color: #bec8cb;
        font-weight: 600;
}

.dark-mode .child-right a:hover {
            color: #fbb07b;
}
#darkModeToggle {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: 0px solid black;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  z-index: 1000;
  font-family: Courier, monospace;
  font-weight: bold;;
}

.dark-mode #darkModeToggle {
  border-color: #bec8cb;
  color: #bec8cb;
  font-weight: bold;
}

/* ========== HEADINGS & BRAND LINK ========== */
h2 a {
    color: black;
    text-decoration: none;
}

h2 a:hover {
    color: black;
}

h2 a:visited {
    color: black;
}

/* ========== NAVIGATION ========== */
nav {
    text-align: center;
    margin-top: 10px;
}

nav a {
    color: black;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    background-color: transparent;
}

nav a:hover {
    color: #313eff;
}

/* ========== PARAGRAPHS ========== */
p {
    font-size: 13px;
    margin: 0.5em 0;
}
/* ========== LINKS ========== */
a {
    color: black;
    text-decoration: none;
    margin: 0 6px;
    font-weight: bold;
    background-color: transparent;
}
a:hover {
    color: #313eff;
}
/* ========== IMAGE ========== */
img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}
/* ========== MIXES ========== */
.tracklist {
  line-height: 1.5;
}
/* ========== HOMEPAGE ==========*/
        .parent {
            display: flex;
            justify-content: center;
            /* centers the children horizontally */
            gap: 50px;
            /* space between child boxes */
            padding: 80px;
        }

        .child-left {
            width: 280px;
            height: 125px;
            background-color: #ede5db;
            color: black;
            display: flex;
            align-items: top;
            justify-content: left;
            border: 1px solid black;
            padding: 10px;
            font-size: 13px;

        }

        /* Style the link inside .child-left */
        .child-left a {
            color: black;
            font-weight: 600;
        }

        /* Optional: hover effect */
        .child-left a:hover {
            color: blue;
        }

        .child-right {
            width: 280px;
            height: 125px;
            background-color: #ede5db;
            color: black;
            display: flex;
            align-items: top;
            justify-content: left;
            border: 1px solid black;
            padding: 10px;
            font-size: 13px;
        }
        
        /* Style the link inside .child-left */
        .child-right a {
            color: black;
            font-weight: 600;
        }

        /* Optional: hover effect */
        .child-right a:hover {
            color: blue;
        }

        .title {
            font-weight: bold;
            font-size: 15px;
        }

        .box {
            text-align: left;
            line-height: 1.2;
        }

        .thoughts-section {
            width: 100%;
            margin-top: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* centers everything inside */
        }

        .thoughts-heading {
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 16px;
        }

        .grid-wrapper-thoughts {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* center grid items horizontally */
        }

        .grid-item {
            width: 635px;
            border: 0.8px solid rgba(0, 0, 0, 1);
            padding: 6px;
            text-align: left;
            font-size: 13px;
            border: 0.9px solid black;
            line-height: 1.3;
            background-color: #ede5db;
            color: black;
        }