.fan-section {
    position: relative;
    width: 700px; /* Total width: 500px for fan + 200px for the button area */
    margin: 0 auto;
}

.fan-section #fan-container {
    position: relative;
    width: 100%;
    height: 500px; /* Match the height of the fan */
}

.fan-section #fan {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 200px; /* Leave 200px space for buttons and display */
    transform-origin: center;
}

.fan-section #fan-controls {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the buttons */
    align-items: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between buttons */
}

.fan-section #fan-controls button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

.fan-section #fan-controls button.active {
    background-color: green;
    color: white;
}

.fan-section #status {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fan-section #fan.spin {
    animation: spin linear infinite;
}
/* Hide #fan element on mobile and tablet devices (screen width less than or equal to 768px) */
@media (max-width: 768px) {
    #fan {
        display: none;
    }
}