*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set the background color and alignment for the body element */
body{
    display: block;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #10269e;
}

.pastoral{
    color: rgb(25, 22, 204);
    font-family: Helvetica;
    /**text-align: right;*/
    background: #00f376;
}

/* Set the styles for the container element */
.container{
    position: relative;
    display: flex;
    background: red;
    justify-content: center;
    align-items:center;
    width: 100%;
    gap: 40px;
    /* Add a reflection effect to the container element */
    -webkit-box-reflect: below 2px linear-gradient(transparent,#005);
}

/* Set the styles for each square box */
.container .box{
    position: relative;
    width: 200px;
    height: 200px;
    /* Create a gradient background for the box */
    background:linear-gradient(45deg,#00f376 5%,transparent 5%,transparent 25%,#00f376 25%,#00f376 30%,transparent 30%,transparent 50%,
    #00f376 50%,#00f376 55%,transparent 55%,transparent 75%,#00f376 75%,#00f376 80%,transparent 30%,transparent 100%);
    background-size: 40px 40px;
    /* Rotate the box based on its custom property value */
    transform: rotate(calc(var(--i) * 90deg));
    /* Change the hue of the box based on its custom property value */
    filter: hue-rotate(calc(var(--i) * 90deg));
    /* Create an animation effect for the background */
    animation: animate 1s linear infinite;
}

/* Create the animation effect */
@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background: position 40px;
    }
}