body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
}

.header {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.circle-container {
    position: relative;
    width: 200px; /* Adjust size as needed */
    height: 200px; /* Adjust size as needed */
}

.circle {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    border-radius: 50%;
    background-color: black; /* Changed to black */
    position: absolute;
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.around {
    width: 40px; /* Slightly smaller to ensure touching */
    height: 40px;
}

.top { top: 0; left: 50%; transform: translateX(-50%); }
.bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.left { left: 0; top: 50%; transform: translateY(-50%); }
.right { right: 0; top: 50%; transform: translateY(-50%); }
.top-left { top: 25%; left: 25%; }
.top-right { top: 25%; right: 25%; }
.bottom-left { bottom: 25%; left: 25%; }
.bottom-right { bottom: 25%; right: 25%; }