/* Circle (right side) */ 

.circleBase{
    border: 2px solid var(--black);
    width: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    margin: 17.5vh 25% 0 auto;
    box-shadow: 0 0 50px var(--accent);
    animation: rotate 60s linear infinite;
    -webkit-animation: rotate 60s linear infinite;
    -moz-animation: rotate 60s linear infinite;
    -o-animation: rotate 60s linear infinite;
    -ms-animation: rotate 60s linear infinite;
    opacity: 0.9;
}

.bubble:hover{
    -webkit-filter: invert(100%);
    filter: invert(100%);
    border: 3px solid var(--white);
    box-shadow: 0 0 50px 2px var(--accentInvert);
    width: 31%;
}

.bubble{
    font-family: "Funnel Display", serif;
    border: 2px solid var(--black);
    background-color: var(--white);
    border-radius: 100%;
    width: 30%;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    animation: antirotate 60s linear infinite;
    -webkit-animation: antirotate 60s linear infinite;
    -moz-animation: antirotate 60s linear infinite;
    -o-animation: antirotate 60s linear infinite;
    -ms-animation: antirotate 60s linear infinite;
    display: block;
    position: absolute;
    transition: 0.3s;
}

.bubbleTxt{
  font-family: "Funnel Display", serif;
  text-shadow: 0 0 5px 1px rgba(70, 70, 70, 0.25);
  font-size: 90%;
  width: 100%;
  position: fixed;
  text-align: center;
  bottom: 12%;
  user-select: none;
}

.icon{
    height: 40%;
    width: 40%;
    margin-top: 20%;
    user-select: none;
}

@-webkit-keyframes rotate {
    to {transform: rotate(360deg);}
}
@-moz-keyframes rotate {
    to {transform: rotate(360deg);}
}
@-o-keyframes rotate {
    to {transform: rotate(360deg);}
}
@-ms-keyframes rotate {
    to {transform: rotate(360deg);}
}
@keyframes rotate {
    to {transform: rotate(360deg);}
}
@-webkit-keyframes antirotate {
    to {transform: rotate(-360deg);}
}
@-moz-keyframes antirotate {
    to {transform: rotate(-360deg);}
}
@-o-keyframes antirotate {
    to {transform: rotate(-360deg);}
}
@-ms-keyframes antirotate {
    to {transform: rotate(-360deg);}
}
@keyframes antirotate {
    to {transform: rotate(-360deg);}
}