/* styles.css */
body {
    background-color: #e0ecfb;
    color: #333;
    font-family: Arial, sans-serif; 
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 800px;
}
header img {
    margin-top: 10px;  /* Adds 20px of space above the image */
}

/* Container for the rectangle */
#color-rectangle {
    position: absolute;  /* Position relative to the entire page */
    top: 30px;           /* Distance from the top */
    right: 30px;         /* Distance from the right */
}

/* Rectangle containing squares */
.rectangle {
    display: flex;         /* Align squares horizontally */
    justify-content: space-between; /* Space squares evenly within the rectangle */
}

/* Individual squares */
.square {
    width: 40px;          /* Size of each square */
    height: 40px;         /* Size of each square */
}

/* On mobile, move the rectangle to a new position and adjust other elements */
@media (max-width: 768px) {
    /* Move the rectangle below the header */
    #color-rectangle {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 10px;  /* Adds space between the name and rectangle */
    }

    /* Stack the elements vertically, if needed */
    header {
        text-align: center;  /* Center the header content on small screens */
        margin-bottom: 20px;  /* Space between header and rectangle */
    }


    /* Optionally adjust the width of the container */
    .container {
        padding-left: 10px;  /* Optional: Adds padding on smaller screens */
        padding-right: 10px;
    }
}