/* Global reset: Remove default margin, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Flexbox container to center everything on the page */
body {
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    justify-content: center;
    align-items: center;
    height: 145vh;  /* Full viewport height */
    font-family: Arial, Helvetica, sans-serif;
}

/* Style for the text box */
.text-box {
    padding: 30px;  /* Space inside the box */
    border: 2px #3c3438;  /* Border color and thickness */
    background-color: #fff2fa;  /* Background color */
    text-align: center;  /* Center the text inside the box */
    width: 770px;  /* Set a width for the box */
    box-sizing: border-box;  /* Ensure padding and border are included in width */
    border-radius: 4px;  /* Optional: round corners */
    margin-bottom: 20px;  /* Space between the boxes */
}

/* Style for navigation list */
nav ul {
    list-style-type: none;  /* Remove default list bullets */
}

nav ul li {
    padding: 5px 0;  /* Space between navigation items */
    font-size: 16px;  /* Font size for nav items */
}

/* Footer styling */
footer {
    margin-top: 20px;  /* Space from the content above */
    text-align: center;
}

/* Optional: Text box styles for smaller devices */
@media (max-width: 600px) {
    .text-box {
        width: 90%;  /* Make the text box responsive */
    }
}

img {
    max-width: 100%;
    height: auto;
}