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

body {
    background: #050505;
    color: #f4f1df;
    min-height: 100vh;
    overflow: hidden;
    font-family: Georgia, serif;
}

.hero {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

nav {
    position: absolute;
    top: 40px;

    display: flex;
    gap: 40px;
}

nav a {
    color: #d8d4bc;
    text-decoration: none;
    font-size: 0.95rem;
    opacity: 0.7;
    transition: 0.3s;
}

nav a:hover {
    opacity: 1;
}

.window {
    width: 360px;
    height: 440px;

    position: relative;
    overflow: hidden;

    margin-bottom: 50px;
}

.sky {
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 50% 25%,
        rgba(180, 190, 150, 0.25),
        rgba(35, 50, 70, 0.45) 45%,
        rgba(5, 7, 12, 1) 100%
    );

    animation: breatheSky 18s ease-in-out infinite;
}

.glow {
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at center,
        rgba(170, 190, 130, 0.25),
        transparent 70%
    );

    animation: breatheGlow 12s ease-in-out infinite;
}

.star {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #f4f1df;

    z-index: 2;

    animation: twinkle 6s infinite;
}

.star1 { top: 50px; left: 80px; }
.star2 { top: 100px; left: 240px; }
.star3 { top: 160px; left: 150px; }
.star4 { top: 90px; left: 300px; }
.star5 { top: 250px; left: 100px; }
.star6 { top: 310px; left: 260px; }
.star7 { top: 220px; left: 50px; }
.star8 { top: 360px; left: 180px; }

.star2 { animation-delay: 1s; }
.star3 { animation-delay: 2s; }
.star4 { animation-delay: 3s; }
.star5 { animation-delay: 4s; }
.star6 { animation-delay: 5s; }
.star7 { animation-delay: 1.5s; }
.star8 { animation-delay: 2.5s; }

.window-frame {
    position: absolute;
    inset: 0;

    z-index: 3;

    border: 4px solid #d9d7b8;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.window-frame div {
    border: 2px solid #d9d7b8;
}

.window:hover .glow {
    filter: brightness(1.5);
}

h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.1rem;
    opacity: 0.75;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(2);
    }
}

@keyframes breatheSky {
    0%, 100% {
        filter: brightness(0.85);
    }

    50% {
        filter: brightness(1.15);
    }
}

@keyframes breatheGlow {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}