html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

.circle {
    width: 200px;
    height: 200px;
    background-color: ghostwhite;
    border-radius: 50%;
    position: absolute;
    animation: moveCircle 5s linear infinite;
}

@keyframes moveCircle {
    0%, 100% { top: 0; left: 0; }
    25% { top: 0; left: calc(100% - 200px); } /* Move to the right */
    50% { top: calc(100% - 200px); left: calc(100% - 200px); } /* Move down */
    75% { top: calc(100% - 200px); left: 0; } /* Move to the left */
}