:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pagePink);
}
svg {
  width: 60px;
  height: 60px;
  fill: #0a3d62;
  transition: all .2s;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
}
ul li {
  list-style-type: none;
  width: 120px;
  height: 120px;
  margin: 0px 10px;
  border: 2px solid #0a3d62;
  border-radius: 50%;
  transition: all .5s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul li:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:  #0a3d62;
  border-radius: 50%;
  z-index: -1;
  transition: all .4s;
  opacity: 0;
}
ul li:hover:before {
  opacity: 1;
  transform: scale(.8);
}
ul li:hover svg {
  fill: white;
}
ul li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:  transparent;
  border-radius: 50%;
  z-index: -1;
  transition: all .4s;
  opacity: 0;
  border: 2px dashed #2386de;
  box-sizing: border-box;
}
@keyframes rotating {
  0% {transform: scale(.92) rotate(0deg)}
  100% {transform: scale(.92) rotate(360deg)}
 
}
li:hover:after {
  opacity: 1;
  animation: rotating 10s linear infinite;
}