body{
    background-color: #fff;
    overflow: hidden;
}
section{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
}
.circle{
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #808080;
    justify-self: center;
    align-self: center  ;
}
.circle::before{
    content: " ";
    position: absolute; 
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  width: 400px;
    height: 400px;
    border: 14px solid white;
    border-radius: 100%;
    border-top: 10px solid crimson;
}

.circle div{
    position: absolute;
    width: 200px;
    height: 10px;
    left: 50%;
    top: 50%;
    background: red;
    transform-origin: left center;
    transform: rotate(0deg);
    transition: transform 0.7s linear;
    animation: rotateLine 7s infinite linear;
}

/* @keyframes rotateLine{
    from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
}



*/

  body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #FFFFFF;
        }

        section {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 100%;
            cursor: pointer;
        }

        section::before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            background: #ffffff;
            border: 14px solid #808080;
            border-radius: 100%;
            border-top: 14px solid #DC143C;
            cursor: pointer;
        }

        section:hover {
            transform: rotate(360deg);
            transition: all 1s;
        }

        aside {
            width: 150px;
            height: 10px;
            background: #DC143C;
            position: absolute;
            transform: rotate(133deg);
            right: 0;
            left: 33%;
            top: 0;
            bottom: 38%;
            margin: auto;
        }

        div {
            width: 30px;
            height: 30px;
            background: #DC143C;
            border-radius: 100%;
            bottom: 70%;
            right: 0;
            top: 0;
            left: 63%;
            margin: auto;
            position: absolute;
        }