The design looks great on Android devices, but on desktop, the hr tag expands out of the circle and moves towards the top of the circle
#circle {
border : 5px solid red;
width : 40%;
box-shadow : 0 0 20px red, inset 0 0 20px red;
aspect-ratio : 1/1;
border-radius : 50%;
text-align : center;
font-size : large;
}
#circle > div {
font-size : 24px;
color : white;
text-shadow : 0 0 10px #0fa;
}
#circle > hr {
background : red;
border : 2px solid red;
box-shadow : 0 0 20px red, inset 0 0 20px red;
}
#circle > span {
color : white;
text-shadow : 0 0 10px #0fa;
}<div class="circle" id="circle">
<br>
<div id="result1" ></div>
<hr>
<span id="result2"></span>
</div>