/* ============================================
   Cityscape at Night - CSS Stylesheet
   All shapes are created using only <div> tags
   ============================================ */

/* Reset default margin and padding on the body so the scene sits flush */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    /* Center the scene in the middle of the browser window */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* The main container that holds the entire cityscape scene.
   This is a rectangle that acts as our "canvas" for everything.
   The dark navy gradient simulates a night sky getting slightly
   lighter near the horizon. */
/* This is a rectangle/square which is being used for the overall scene container and night sky background */
#scene {
    width: 900px;
    height: 600px;
    background: linear-gradient(to bottom, #0a0e1a, #0f1b3d, #1a2a5a);
    position: relative;
    overflow: hidden;
    border: 3px solid #222;
}

/* =====================
   MOON
   ===================== */
/* This is a circle/oval which is being used for the full moon in the night sky.
   The border-radius of 50% turns the square div into a perfect circle.
   The box-shadow creates a soft glowing effect around the moon. */
#moon {
    width: 70px;
    height: 70px;
    background-color: #f0e68c;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    right: 120px;
    box-shadow: 0 0 20px #f0e68c, 0 0 40px rgba(240, 230, 140, 0.3);
}

/* =====================
   STARS
   ===================== */
/* Stars are tiny circles scattered across the sky.
   Each one uses border-radius: 50% to become a circle
   and box-shadow for a subtle twinkle glow effect. */

/* Star 1 - positioned in the upper left area of the sky */
#star1 {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 80px;
    box-shadow: 0 0 4px #fff;
}

/* Star 2 - positioned in the upper center of the sky */
#star2 {
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 70px;
    left: 300px;
    box-shadow: 0 0 4px #fff;
}

/* Star 3 - positioned near the top left */
#star3 {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 500px;
    box-shadow: 0 0 4px #fff;
}

/* Star 4 - positioned between buildings and moon area */
#star4 {
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    left: 150px;
    box-shadow: 0 0 3px #fff;
}

/* Star 5 - positioned in the upper right near the moon */
#star5 {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    right: 280px;
    box-shadow: 0 0 4px #fff;
}

/* Star 6 - small star positioned in the far upper left */
#star6 {
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 55px;
    left: 650px;
    box-shadow: 0 0 3px #fff;
}

/* =====================
   CLOUD
   ===================== */
/* This is an "odd" shape. It's a blobby cloud shape being used for
   a wispy cloud drifting across the night sky.
   The border-radius has four different values which warps the div
   into an irregular rounded blob instead of a normal rectangle or circle.
   The low opacity makes it look like a thin, translucent night cloud. */
#cloud {
    width: 140px;
    height: 40px;
    background-color: rgba(180, 180, 200, 0.15);
    border-radius: 50px 60px 40px 70px;
    position: absolute;
    top: 90px;
    left: 200px;
}

/* =====================
   BUILDINGS
   ===================== */

/* Building 1 - the leftmost building, medium-tall.
   This is a simple dark rectangle positioned at the bottom of the scene. */
/* This is a rectangle/square which is being used for the first building on the left side of the city */
#building1 {
    width: 100px;
    height: 280px;
    background-color: #111a2e;
    position: absolute;
    bottom: 40px;
    left: 60px;
    border-top: 2px solid #1a2a44;
}

/* Building 2 - second from left, shorter and wider.
   Slightly different shade of dark blue to add variety to the skyline. */
#building2 {
    width: 120px;
    height: 200px;
    background-color: #162035;
    position: absolute;
    bottom: 40px;
    left: 180px;
    border-top: 2px solid #1e3050;
}

/* Building 3 - center building, the shortest one.
   This building has a triangular roof on top (see #roof below). */
#building3 {
    width: 90px;
    height: 160px;
    background-color: #131d30;
    position: absolute;
    bottom: 40px;
    left: 360px;
    border-top: 2px solid #1a2a44;
}

/* Building 4 - the tallest building in the skyline, positioned right of center.
   Stands out as the skyscraper of the city. */
#building4 {
    width: 110px;
    height: 340px;
    background-color: #0f1926;
    position: absolute;
    bottom: 40px;
    left: 520px;
    border-top: 2px solid #172840;
}

/* Building 5 - the rightmost building, medium height.
   Wider than most to balance out the skyline on the right side. */
#building5 {
    width: 130px;
    height: 250px;
    background-color: #141f33;
    position: absolute;
    bottom: 40px;
    right: 70px;
    border-top: 2px solid #1c2e4a;
}

/* =====================
   ROOF (TRIANGLE)
   ===================== */
/* This is a triangle which is being used for the pointed rooftop
   on building 3 (the center building).
   The triangle is created by setting the width and height to 0
   and using thick borders. The left and right borders are transparent
   and the bottom border is colored, which forms a triangle shape. */
#roof {
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 50px solid #131d30;
    position: absolute;
    bottom: 200px;
    left: 350px;
}

/* =====================
   WINDOWS
   ===================== */
/* Windows are small squares placed on the buildings.
   They have a warm yellow/orange color to look like lit rooms.
   The box-shadow gives each window a soft glow effect
   to simulate light spilling out at night. */

/* Window on building 1 - upper left window */
#win-1a {
    width: 18px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 260px;
    left: 75px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Window on building 1 - lower right window */
#win-1b {
    width: 18px;
    height: 18px;
    background-color: #c4973a;
    position: absolute;
    bottom: 180px;
    left: 125px;
    box-shadow: 0 0 6px rgba(196, 151, 58, 0.4);
}

/* Window on building 1 - middle window, slightly dimmer to show
   that not every room has the lights on */
#win-1c {
    width: 18px;
    height: 18px;
    background-color: #a07830;
    position: absolute;
    bottom: 110px;
    left: 75px;
    box-shadow: 0 0 4px rgba(160, 120, 48, 0.3);
}

/* Window on building 2 - upper area */
#win-2a {
    width: 20px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 190px;
    left: 210px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Window on building 2 - lower area */
#win-2b {
    width: 20px;
    height: 18px;
    background-color: #c4973a;
    position: absolute;
    bottom: 110px;
    left: 265px;
    box-shadow: 0 0 6px rgba(196, 151, 58, 0.4);
}

/* Window on building 3 - single lit window near the top */
#win-3a {
    width: 16px;
    height: 16px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 150px;
    left: 395px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Window on building 4 (tallest) - near the top */
#win-4a {
    width: 20px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 330px;
    left: 555px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Window on building 4 - middle level */
#win-4b {
    width: 20px;
    height: 18px;
    background-color: #c4973a;
    position: absolute;
    bottom: 240px;
    left: 600px;
    box-shadow: 0 0 6px rgba(196, 151, 58, 0.4);
}

/* Window on building 4 - lower level, dimmer light */
#win-4c {
    width: 20px;
    height: 18px;
    background-color: #a07830;
    position: absolute;
    bottom: 140px;
    left: 555px;
    box-shadow: 0 0 4px rgba(160, 120, 48, 0.3);
}

/* Window on building 5 - upper left side */
#win-5a {
    width: 20px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 220px;
    right: 145px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Window on building 5 - lower right side */
#win-5b {
    width: 20px;
    height: 18px;
    background-color: #c4973a;
    position: absolute;
    bottom: 120px;
    right: 90px;
    box-shadow: 0 0 6px rgba(196, 151, 58, 0.4);
}

/* =====================
   GROUND / STREET
   ===================== */
/* The ground is a dark rectangle that stretches across the entire
   bottom of the scene, representing the street below the buildings. */
#ground {
    width: 100%;
    height: 40px;
    background-color: #0d0d0d;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid #1a1a1a;
}

/* =====================
   STREET LAMP
   ===================== */
/* The lamp post is a thin tall rectangle representing the pole
   of a street lamp sitting on the sidewalk between buildings. */
#lamp-post {
    width: 4px;
    height: 80px;
    background-color: #333;
    position: absolute;
    bottom: 40px;
    left: 330px;
}

/* This is a circle/oval which is being used for the glowing light
   at the top of the street lamp post. The border-radius of 50%
   makes it a circle, and the box-shadow creates a warm cone of
   light radiating outward, simulating a streetlight glow. */
#lamp-light {
    width: 14px;
    height: 14px;
    background-color: #f5d070;
    border-radius: 50%;
    position: absolute;
    bottom: 113px;
    left: 325px;
    box-shadow: 0 0 12px #f5d070, 0 0 30px rgba(245, 208, 112, 0.3);
}

/* =====================
   EXTRA WINDOWS
   ===================== */
/* Additional windows on each building to make the city feel more
   alive. Some are bright (lights on), some are dim (lights off or
   curtains drawn), giving the buildings a realistic lived-in look. */

/* Building 1 - dark/unlit window on the upper right side */
#win-1d {
    width: 18px;
    height: 18px;
    background-color: #1a2840;
    position: absolute;
    bottom: 260px;
    left: 125px;
    border: 1px solid #223355;
}

/* Building 1 - dim window on lower left, barely any light */
#win-1e {
    width: 18px;
    height: 18px;
    background-color: #2a3a50;
    position: absolute;
    bottom: 180px;
    left: 75px;
    border: 1px solid #223355;
}

/* Building 2 - bright window on the upper right */
#win-2c {
    width: 20px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 190px;
    left: 265px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Building 2 - dark unlit window in the lower left area */
#win-2d {
    width: 20px;
    height: 18px;
    background-color: #1a2840;
    position: absolute;
    bottom: 110px;
    left: 210px;
    border: 1px solid #223355;
}

/* Building 3 - dark window below the lit one */
#win-3b {
    width: 16px;
    height: 16px;
    background-color: #1a2840;
    position: absolute;
    bottom: 100px;
    left: 395px;
    border: 1px solid #223355;
}

/* Building 4 - bright window on the upper right column */
#win-4d {
    width: 20px;
    height: 18px;
    background-color: #e8c44a;
    position: absolute;
    bottom: 330px;
    left: 600px;
    box-shadow: 0 0 6px rgba(232, 196, 74, 0.4);
}

/* Building 4 - dim/dark window in the mid-lower area */
#win-4e {
    width: 20px;
    height: 18px;
    background-color: #2a3a50;
    position: absolute;
    bottom: 240px;
    left: 555px;
    border: 1px solid #223355;
}

/* Building 5 - bright window in the middle right */
#win-5c {
    width: 20px;
    height: 18px;
    background-color: #c4973a;
    position: absolute;
    bottom: 170px;
    right: 90px;
    box-shadow: 0 0 6px rgba(196, 151, 58, 0.4);
}

/* Building 5 - dark unlit window on the upper right */
#win-5d {
    width: 20px;
    height: 18px;
    background-color: #1a2840;
    position: absolute;
    bottom: 220px;
    right: 90px;
    border: 1px solid #223355;
}

/* =====================
   CAR
   ===================== */
/* Animation that moves the car from off-screen left to off-screen right.
   It starts at -150px (hidden off the left side) and ends at 950px
   (past the right edge of the 900px scene). This makes the car
   appear to drive across the entire street and loop back around. */
@keyframes drive {
    from { transform: translateX(-600px); }
    to { transform: translateX(500px); }
}

/* The car body is a wide, short rectangle sitting on the street.
   It has a dark red color to stand out against the dark road.
   The animation makes it drive across the street over 10 seconds
   and loop infinitely. */
#car-body {
    width: 70px;
    height: 22px;
    background-color: #8b2020;
    position: absolute;
    bottom: 38px;
    left: 460px;
    border-radius: 3px;
    animation: drive 10s linear infinite;
}

/* The car top/cabin is a smaller rectangle on top of the car body.
   It is narrower and represents the windowed cabin section of the car.
   The rounded top corners make it look like a car roof. */
#car-top {
    width: 36px;
    height: 18px;
    background-color: #7a1a1a;
    position: absolute;
    bottom: 58px;
    left: 472px;
    border-radius: 5px 5px 0 0;
    animation: drive 10s linear infinite;
}

/* Car wheel 1 (rear) - small dark circle positioned under the
   left side of the car body to look like the back wheel */
#car-wheel1 {
    width: 14px;
    height: 14px;
    background-color: #1a1a1a;
    border-radius: 50%;
    position: absolute;
    bottom: 32px;
    left: 468px;
    border: 2px solid #333;
    animation: drive 10s linear infinite;
}

/* Car wheel 2 (front) - small dark circle positioned under the
   right side of the car body to look like the front wheel */
#car-wheel2 {
    width: 14px;
    height: 14px;
    background-color: #1a1a1a;
    border-radius: 50%;
    position: absolute;
    bottom: 32px;
    left: 510px;
    border: 2px solid #333;
    animation: drive 10s linear infinite;
}

/* The headlight is a tiny bright circle on the front of the car
   with a glow effect to simulate the light beam shining forward */
#car-headlight {
    width: 6px;
    height: 6px;
    background-color: #ffffaa;
    border-radius: 50%;
    position: absolute;
    bottom: 46px;
    left: 530px;
    box-shadow: 0 0 6px #ffffaa, 0 0 14px rgba(255, 255, 170, 0.3);
    animation: drive 10s linear infinite;
}