html,body{
    margin:0;
    padding:0;
}

body{
    font-family: var(--primary-font);
    background-color: var(--primary-bg-color);
}
.circle{
    width: 1.5rem;
    height: 1.5rem;
    background: var(--dark-color);
    animation: rotate 1s  infinite ;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100vh;

}
.circle:nth-child(1){
    background: rgb(255, 0, 0);
}
.circle:nth-child(2){
    background: rgb(0, 8, 255);
}
.circle:nth-child(3){
    background: rgb(0, 255, 85);
}
:root{
    --primary-font: Arial, Helvetica, sans-serif;
    --primary-bg-color:#1aacdd;
    --dark-color:#000;
    --light-gray-color:#847d7d;
}
@keyframes rotate{
    0%{
       transform: rotate(-45deg);
    }
    100%{
      transform: rotate(45deg);
    }
}