CSS Battle #17 – Fidget Spinner

[AmyShackles]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[AmyShackles]

Code Source – 596.29 {955}

<div id="a"></div>
<div id="center"><div id="b"></div><div id="d"></div></div>
<div id="e"></div><div id="c"></div>
<style>
  body {
    background: #09042A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    height: 100%;
    margin: 5px;
  }
  #a,#e {
    background: #F5BB9C;
    border: 10px solid #09042A;
    z-index: 2;
    margin-bottom:8px;
    margin-top: -3px;
  }
  #c {
    height:65px;
    width: 50px;
    background:#E78481;
    border-radius: 20%;
    position:absolute;
    top:40%;
    z-index:1;
  }
  #b,#d {
    height: 60px;
    width: 60px;
    background: #09042A;
    border: 10px solid #E78481;
    margin-top:-10px;
  }
  #center {
    display: flex;
    justify-content:space-between;
    width:51%;
    height:20px;
    align-items:center;
  }
  div {
    border-radius: 50%;
    height: 60px;
    width: 60px;
    background: #F5BB9C;
    background: #E78481
  }
</style>