@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

header {
    text-align: center;
}

nav li{
    list-style: none;
    display: inline-block;
    font-size: 1.5em;
    margin: 0.5em 2em 2em 0.5em;
}

body {
    font-family: "Montserrat", sans-serif;
    background-color: #24273a;
    padding: 2em;
}
p{
    font-size: 1.5em
}

.container {
    margin: 2em auto; /* "auto" centers the whole container on the page */
    padding: 1em;
    background-color: #363a4f;
    width: 90%; /* Increased slightly for better mobile breathing room */
    max-width: 800px; /* Keeps it from getting too wide on huge monitors */
    align-items: center; /* Vertically aligns image and text perfectly */
    outline: 3px solid #b7bdf8;
}

* {
    color: #cad3f5;
}

hr {
    color: #cad3f5;
}

footer {
    text-align: center;
}

@media (max-width: 600px){
    .container {
        flex-direction: column; /* Stack them vertically instead of using block */
        align-items: center;
        text-align: center;
        margin: 1em auto;
    }
}