/* Global styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* Ensure body takes up full height */
    background-color: black;
    color: pink;
    font-family: "Comic Sans MS", serif;
    margin: 0;
    padding: 0;
}

/* Header styles */
header {
    text-align: center;
    padding: 10px;  /* Reduce padding for minimal space */
}

/* Ensure header doesn't push too much space */
h1 {
    font-size: 2.5em;
    margin: 0; /* Remove any default margin on header */
}

/* Navigation styles */
nav {
    text-align: center;
    margin-top: 5px;  /* Minimal space between header and nav */
    margin-bottom: 5px; /* Minimal space between nav and section */
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: pink;
    font-size: 1.2em;
}

nav a:hover {
    text-decoration: underline;
}

/* Section styles */
section {
    text-align: center;
    padding: 10px;  /* Reduce padding for minimal space */
    margin-top: 5px; /* Minimal space between nav and section */
    margin-bottom: 0; /* Ensure section doesn't have extra space */
}

/* Styling for the "Thank you" section */
section.thank-you {
    margin-bottom: 30px;  /* Add a little space above the footer */
}

/* Footer styles */
footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    margin-top: auto; /* Ensures footer stays at the bottom when content is small */
}

/* Styling for the toggle-able box */
.toggle-box {
    background-color: #333;
    color: white;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: max-height 0.5s ease, padding 0.3s ease;
    max-height: 0; /* Hidden by default */
    overflow: hidden;
}

/* No hover effect now */
.toggle-box:hover {
    background-color: #333; /* Keep it the same dark grey on hover */
}

/* When the box is expanded */
.toggle-box.open {
    max-height: 500px; /* You can adjust the max height if needed */
    padding: 20px;
}