CSS Properties Drawing graphics

P part:

<p class= "React-logo" > <p class= "reactive" ></p></p>

CSS code:

HTML, body{width:100%;    height:100%;    min-height:100%;    font-family: ' Gloria Hallelujah ', cursive;    font-size:100%;  Background-color: #222;  Display:flex;  Align-items:center; Justify-content:center;}.  react-logo{width:500px;  height:160px;  position:relative;  border:15px solid #fff;    border-radius:50%; Box-shadow: #00d8ff 0px 0px 44px 0px;}.  react-logo:before{content: "";  width:500px;  height:160px;  Position:absolute;  border:15px solid #aaa;  border-radius:50%;  Transform:rotate (125DEG);  Top: -25px;    Left: -18px; Box-shadow: #00d8ff 0px 0px 44px 0px;}.  react-logo:after{content: "";  width:500px;  height:160px;  Position:absolute;  border:15px solid #00d8ff;  border-radius:50%;  Transform:rotate ( -125DEG);  Top: -25px;    Left: -18px; Box-shadow: #00d8ff 0px 0px 44px 0px;}.  reactive{width:100px;  height:100px;  Float:left;  Background-color: #aaf;  border-radius:50%;  Margin-left:calc (50%-50px);    margin-top:30px; Box-shaDow: #00d8ff 0px 0px 44px 0px;} 

Final effect: