/* v.1.0.1 */

/*
body {
text-align: center;
background-color: #FCF8F0;
}

html {
display: grid;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: safe center;
align-self: safe center;
}

:root{
--red: #943328;
--orange: #D47900;
--yellow: #A88100;
--green: #29800C;
--blue: #1C88BA;
--indigo: #5B67E2;
--violet: #9E377C;
}

*/

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


@keyframes ani { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes ani2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ani {
display: grid;
position: relative;
width: 25vw;
height: 25vw;
max-width: 25vh;
max-height: 25vh;
justify-items: center;
align-items: center;
margin: 0 auto;

animation: ani2 10s linear infinite;
}

.aniE {
width: 100%;
height: 100%;
border: 1px solid var(--d3);
background: var(--yellow);
opacity: 0.15;
border-radius: 25%;
}

.aniA, .aniB, .aniC, .aniD {
position: absolute;
width: 30%;
height: 30%;

border-radius:25%;
animation: ani 5s linear infinite;
}

.aniA { background: var(--violet); top: 12%; left: 12%; }
.aniB { background: var(--orange); top: 12%; right: 12%; }
.aniC { background: var(--blue); bottom: 12%; left: 12%; }
.aniD { background: var(--green); bottom: 12%; right: 12%; }