* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(#171322, #211a2d);
    color: #f7f2dd;
    font-family: "Quicksand", sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

/* ------------------------------
   Background Stars
------------------------------ */

#stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(#d9cfff 1px, transparent 1px),
        radial-gradient(#fff5d6 1px, transparent 1px);
    background-size:
        180px 180px,
        240px 240px,
        320px 320px;
    opacity: .25;
}

/* ------------------------------
   Layout
------------------------------ */

.container {
    width: min(1000px, 90%);
    margin: 40px auto;
}

/* ------------------------------
   Header
------------------------------ */

header {
    text-align: center;
    margin-bottom: 40px;
}

.moon {
    font-size: 70px;
    margin-bottom: 10px;
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {

    from {
        text-shadow: 0 0 10px #fff3b0;
    }

    to {
        text-shadow:
            0 0 30px #fff3b0,
            0 0 50px #ffe48a;
    }

}

h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: 3.5rem;
    color: #f8efcf;
}

.subtitle {
    color: #c9bde5;
    margin-top: 8px;
}

/* ------------------------------
   Navigation
------------------------------ */

nav {
    margin-top: 30px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

nav a {

    text-decoration: none;

    color: #f6f1df;

    background: #2b2338;

    padding: 10px 18px;

    border-radius: 999px;

    border: 2px solid #cfa95b;

    transition: .3s;

}

nav a:hover {

    background: #cfa95b;

    color: #1d1728;

    transform: translateY(-3px);

}

/* ------------------------------
   Cards
------------------------------ */

section {

    background: rgba(44, 37, 58, .92);

    border: 2px solid #cfa95b;

    border-radius: 20px;

    padding: 25px;

    margin-bottom: 30px;

    box-shadow: 0 0 20px rgba(255, 223, 150, .12);

}

section h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 2rem;

    margin-bottom: 15px;

    color: #f7eab8;

}

/* ------------------------------
   Welcome
------------------------------ */

.welcome {

    display: flex;

    gap: 30px;

    align-items: center;

}

.portrait img {

    width: 230px;

    border-radius: 20px;

    border: 3px solid #cfa95b;

    display: block;

}

.intro {

    flex: 1;

}

/* ------------------------------
   Buttons
------------------------------ */

.buttons {

    display: flex;

    gap: 15px;

    margin-top: 20px;

    flex-wrap: wrap;

}

.button {

    text-decoration: none;

    color: #1d1728;

    background: #d8c189;

    padding: 12px 22px;

    border-radius: 999px;

    font-weight: bold;

    transition: .3s;

}

.button:hover {

    transform: translateY(-3px);

    background: #f3dfad;

}

/* ------------------------------
   Lists
------------------------------ */

ul {

    padding-left: 20px;

}

li {

    margin-bottom: 10px;

}

/* ------------------------------
   Gallery
------------------------------ */

.gallery {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}

.gallery img {

    width: 100%;

    border-radius: 15px;

    border: 2px solid #cfa95b;

    transition: .3s;

}

.gallery img:hover {

    transform: scale(1.04);

    box-shadow: 0 0 18px rgba(255, 223, 150, .3);

}

/* ------------------------------
   Footer
------------------------------ */

footer {

    text-align: center;

    color: #bdaed7;

    margin: 50px 0;

    font-size: .9rem;

}

/* ------------------------------
   Responsive
------------------------------ */

@media (max-width: 800px) {

    .welcome {

        flex-direction: column;

        text-align: center;

    }

    .portrait img {

        width: 180px;

        margin: auto;

    }

    nav {

        gap: 10px;

    }

    nav a {

        font-size: .9rem;

    }

}