App.css

}



.cls-1{fill:#c8d5ea;}
.cls-2{fill:#e8f1f9;opacity:0.43;}
.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke-miterlimit:10;}
.cls-3,.cls-4,.cls-5{stroke:#d30f0f;stroke-linecap:round;}
.cls-3{stroke-width:0.47px;}
.cls-4{stroke-width:0.47px;}
.cls-5{stroke-width:0.66px;}
.cls-6{stroke:#1f4e79;}
.cls-7{stroke:#39dd17;}
.cls-11,.cls-12,.cls-7,.cls-9{stroke-width:4px;}
.cls-8{fill:#39dd17;}.cls-9{stroke:#ce1b1b;}
.cls-10{fill:#ce1b1b;}.cls-11{stroke:#f7931e;}
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
  

.svg-button:hover{
  cursor: pointer;
}


.rotate-linear-infinite{
  animation: rotation 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* .rotate-linear-infinite:hover{
  animation-play-state: paused;
} */

.methods-node:nth-of-type(1) div{
  margin-top: 25%;
  font-weight: bold;
  font-size: medium;
}
.methods-node:nth-of-type(3) div{
  margin-top: 35%;
  font-weight: bold;
  font-size: small;
}

.methods-node:nth-of-type(5) div, .methods-node:nth-of-type(2) div, .methods-node:nth-of-type(4) div{
  margin-top: 35%;
  font-weight: bold;
  font-size: medium;
}
.methods-node{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 6rem;
  width: 6rem;
  border: 0.1vw solid var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 20px;
  font-size: small;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  z-index: 5;
  text-align: center;
}
.methods-node:nth-of-type(1){
  background-color: var(--accen-secondary);
}
.methods-node:nth-of-type(2){
  background-color: var(--accent-gradient-one-of-three);
}
.methods-node:nth-of-type(3){
  background-color: var(--accent-gradient-two-of-three);
}
.methods-node:nth-of-type(4){
  background-color: var(--accent-gradient-three-of-three);
}
.methods-node:nth-of-type(5){
  background-color: var(--accent-primary);
}
.methods-node:nth-of-type(odd) {
  top: 2vw;
  left: 0;
}
.methods-node:nth-of-type(even){
  bottom: 2vw;
}

.methods-node:nth-of-type(even):before {
  content: '';
  position: absolute;
  top: 80%;
  z-index: 0;
  left: -3.4vw;
  width: 3.8vw;
  transform: rotate(-25deg);
  border-top: 1px solid var(--text-primary);
}
.methods-node:nth-of-type(even):after {
  content: '';
  position: absolute;
  top: 80%;
  z-index: 0; 
  left: 6.4vw;
  width: 3.8vw;
  transform: rotate(25deg);
  border-top: 1px solid var(--text-primary);
}