/* @import url(https://fonts.googleapis.com/css?family=Lobster); */
@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;700&family=Montserrat:wght@700;900&display=swap");

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: hsl(245, 75%, 40%);
  background: radial-gradient(white 100px, hsl(245, 75%, 40%) 60em);
  background-size: cover;
  font: Cabin, Arial, sans-serif;
  font-size: 12pt;
  }

.wrapper {
  position: relative;
  height: 100%;
  }

.text {
  position: relative;
  z-index: 1;
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  height: 1em;
  font: 5em Cabin, Arial, sans-serif;
  text-align: center;
  text-shadow: -1px -1px #FFF,
               -2px -2px #FFF,
               -1px 1px #FFF,
               -2px 2px #FFF,
               1px 1px #FFF,
               2px 2px #FFF,
               1px -1px #FFF,
               2px -2px #FFF, 
               -3px -3px 2px #CCC,
               -3px 3px 2px #CCC,
               3px 3px 2px #CCC,
               3px -3px 2px #CCC;
  color: hsl(248, 100%, 10%);
}

.text a {
  text-decoration: none;
  transition: all .7s;
}

.text a:hover {
    color: hsl(268, 100%, 60%);
}

.text_top {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -6em;
  margin-left: -5em;
  font: 1em Cabin, Arial, sans-serif;
  text-align: center;
  color: hsl(248, 100%, 10%);
}

.text_top a {
  text-decoration: none;
  color: hsl(248, 100%, 10%);
}

.text_bottom {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 6em;
  margin-left: -1.7em;
  font: 1em Cabin, Arial, sans-serif;
  text-align: center;
  color: hsl(248, 100%, 10%);
}

.wrapper ul {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  padding: 0;
  width: 0;
  height: 0;
  list-style: none;
  /* animation: 60s rotate infinite linear;  */
}

.wrapper ul:hover {
  animation-play-state: paused;
}

.wrapper li,
.wrapper li:before,
.wrapper li:after {
  position: absolute;
  border: 0 solid transparent;
  border-width: 2em 20em;
  width: 1px;
  height: 1px;
  font-size: 90px;
  box-shadow: 0 0 2em .5em rgb(236, 235, 252);
}
.wrapper li {
  left: -20em;
  top: 50%;
  margin-top: -2em;
  transform: rotate(.1deg);
  }
.wrapper li:before,
.wrapper li:after {
  left: -20em;
  top: -2em;
  display: block;
  content: "";
}

.wrapper li:before {
  transform: rotate(60deg);
  }
.wrapper li:after {
  transform: rotate(-60deg);
  }
.wrapper li:nth-child(2){
  transform: rotate(15deg);
}
.wrapper li:nth-child(3){
  transform: rotate(30deg);
}
.wrapper li:nth-child(4){
  transform: rotate(45deg);
}

@keyframes rotate {
  100% {
    transform: rotate(90deg);
  }
}

.circle {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  padding: 0;
  width: 380px;
  height: 380px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(104, 98, 254, 0.5);
  /*animation: flicker 5s infinite linear alternate;*/
}

@keyframes flicker {
  0% {
      opacity: 0.1;
  }
  100% {
      opacity: 1;
  }
}

.menu {
  position: absolute;
  top: 0;
  height: 220px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.ca-menu{
  padding: 0 0 0 48px;
  margin: auto;
}
.ca-menu li{
  width: 180px;
  height: 180px;
  border: 8px solid #f6f6f6;
  overflow: hidden;
  position: relative;
  float: left;
  background: #ffffff;
  margin-left:-30px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  border-radius: 100px;
  transition: all 300ms linear;
}
.ca-menu li:last-child{
  margin-right: 0px;
}
.ca-menu li a{
  text-align: left;
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  position: relative;
}
.ca-icon{
  font-family: 'Kabin', sans-serif, cursive;
  font-size: 36px;
  color: #f6f6f6;;
  line-height: 60px;
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0px;
  top: 30px;
  text-align: center;
  transition: all 400ms linear;
}
.ca-main{
  font-family: 'Kabin', sans-serif, cursive;
  font-size: 18px;
  position: absolute;
  top: 40px;
  height: 160px;
  width: 170px;
  left: 50%;
  margin-left: -85px;
  opacity: 0.8;
  text-align: center;
  color: #555;
}
.ca-sub{
  display: none;
}
.ca-menu li:hover{
  border-color: hsl(245, 75%, 40%);
  /*background: radial-gradient(white 80px, hsl(245, 75%, 40%) 15em);*/
  z-index: 3;
  transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
  color: #000;
  font-size: 60px;
  text-shadow: 0px 0px 1px #000;
  animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
  color: hsl(268, 100%, 60%);
  animation: moveFromBottom 300ms ease;
}

@keyframes moveFromBottom {
  from {
      transform: translateY(200%) scale(0.5);
      opacity: 0;
  }
  to {
      transform: translateY(0%) scale(1);
      opacity: 1;        
  }
}