Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

  1. The top edge of the .moon element should be aligned with the top edge of its containing block

I’ve already set .moon’s position to absolute and top: 0, how can I do? Ty

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Moon Orbit</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="space">
        <div class="earth"></div>
        <div class="orbit">
            <div class="moon"></div>
        </div>
    </div>
</body>

</html>

/* file: styles.css */
@keyframes orbit {
    0% {
        transform: rotate(0deg) translate(-50%, -50%);
    }
    100% {
        transform: rotate(360deg) translate(-50%, -50%);
    }
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}


.space {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: black;
}

.earth {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
    border-radius: 50%;
}

.orbit {
    width: 200px;
    height: 200px;
    position: absolute;
    transform: translate(-50%, -50%);
    animation: orbit 5s linear infinite;
}

.moon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: -0%;
    transform: translateX(-50%);
    background-color: gray;
    border-radius: 50%;

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

Why have you chosen this value for your .moon selector? If you want a value of 0, just use 0.