@keyframes rotAnimation {
    from{ transform: rotate(90deg); }
    to{ transform: rotate(540deg); }
}

.rotatingButton {
    animation-name: rotAnimation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.3,0,.7,1);
}

/* Circle */
.half-circle {
    position: fixed;
    transform: translate(-50%, -100%);
    width: 140px;
    height: 70px; /* as the half of the width */
    background-color: transparent;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid white;

    border-bottom: 0;
}
.whole-circle {
    position: fixed;
    width: 125px;
    height: 125px; /* as the half of the width */
    background-color: grey;
    border-radius: 100%; 
    transform-origin: center;
    transition: all 0.2s ease-out;
}
.whole-circle:hover{
    transform: scale(1.4, 1.4);
    background-color: rgb(230, 230, 230);

}
.whole-circle:hover .centered {
    color: black;
}