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

body {
    font-family: 'Fredoka', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 3s ease;
}

html {
    scroll-behavior: smooth;
}

.sky {
    z-index: 5;
}

.moon {
    z-index: 10;
}

.stars {
    z-index: 20;
}

/* ========================= */
/* DAY / NIGHT */
/* ========================= */

body.night {
    background: linear-gradient(to bottom, #09112c 0%, #131c42 100%);
}

body.day {
    background: linear-gradient(to bottom, #6bc9ff 0%, #e6f8ff 100%);
}

/* ========================= */
/* SKY */
/* ========================= */

.sky {
    position: fixed;
    inset: 0;
    z-index: -2;
}

/* ========================= */
/* STARS */
/* ========================= */

.stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 130px 130px;
    animation: twinkle 4s infinite alternate;
}

@keyframes twinkle {
    from { opacity: .25; }
    to { opacity: 1; }
}

body.day .stars {
    opacity: 0;
}

/* ========================= */
/* MOON */
/* ========================= */

.moon {
    position: absolute;
    right: 8%;
    top: 150px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 40px white, 0 0 120px rgba(255, 255, 255, .5);
    transition: 3s ease;
}

body.day .moon {
    opacity: 0;
    transform: translateY(250px) rotate(180deg);
}

/* ========================= */
/* SUN */
/* ========================= */

.sun {
    position: absolute;
    right: 8%;
    top: 150px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #FFD44D;
    box-shadow: 0 0 40px #FFD44D, 0 0 120px rgba(255, 212, 77, .6);
    opacity: 0;
    transition: 3s ease;
}

body.day .sun {
    opacity: 1;
    transform: translateY(-20px) scale(1.05);
}

/* ========================= */
/* CLOUDS */
/* ========================= */

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, .2);
    border-radius: 100px;
    filter: blur(1px);
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud1 {
    width: 180px;
    height: 60px;
    top: 130px;
    left: -300px;
    animation: cloudMove 50s linear infinite;
}

.cloud1::before {
    width: 80px;
    height: 80px;
    left: 20px;
    top: -25px;
}

.cloud1::after {
    width: 100px;
    height: 100px;
    left: 70px;
    top: -35px;
}

.cloud2 {
    width: 220px;
    height: 70px;
    top: 250px;
    left: -500px;
    animation: cloudMove 70s linear infinite;
}

.cloud2::before {
    width: 90px;
    height: 90px;
    left: 25px;
    top: -30px;
}

.cloud2::after {
    width: 120px;
    height: 120px;
    left: 90px;
    top: -45px;
}

@keyframes cloudMove {
    from { transform: translateX(-300px); }
    to { transform: translateX(calc(100vw + 600px)); }
}