*,
*::before,
*::after {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

body {
 min-height: 100vh;
 background: #ffffff;
 background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(129, 195, 252, 1) 34%);
 overflow: hidden;
}

main {
 width: 100%;
 height: 100vh;
 position: relative;

 >section {
  width: 90%;
  height: 80%;
  /* border: 1px solid black; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  >span {
   width: 20%;
   height: 100%;
   font-size: 200px;
   text-transform: uppercase;
   display: flex;
   justify-content: center;
   align-items: center;

   &:nth-of-type(2) {
    opacity: 1;
    animation: i 1s linear 3.5s forwards;
   }
  }
 }

 >svg {
  position: absolute;
  bottom: 33%;
  right: -200px;
  transform: scaleX(-1);
  /* border: 1px solid black; */
  animation: lamp 4s linear forwards;
 }
}

@keyframes lamp {
 0% {
  bottom: 33%;
  right: -200px;
 }

 10% {
  bottom: 53%;
  right: 110px;
  transform: scaleX(-1);
 }

 20% {
  bottom: 33%;
  right: 220px;
 }

 30% {
  bottom: 53%;
  right: 330px;
  transform: scaleX(-1);
 }

 40% {
  bottom: 33%;
  right: 440px;
  transform: scaleX(-1);
 }

 50% {
  bottom: 53%;
  right: 550px;
  transform: scaleX(-1);
 }

 60% {
  bottom: 33%;
  right: 660px;
  transform: scaleX(-1);
 }

 70% {
  bottom: 53%;
  right: 870px;
  transform: scaleX(-1);
 }

 80% {
  bottom: 33%;
  right: 990px;
  transform: scaleX(-1);
 }

 90% {
  bottom: 63%;
  right: 950;
  transform: scaleX(1);
 }

 100% {
  bottom: 33%;
  right: 950px;
  transform: scaleX(1);
 }
}

@keyframes i {
 to {
  opacity: 0;
 }
}

.foot {
 position: relative;
 >div {
  width: 200px;
  height: 200px;
  /* border: 1px solid red; */
  position: fixed;
  bottom: 0;
  left: 10px;

  &:hover {
   >a {
    left: 200px;
   }
  }

  >img {
   width: 100%;
   height: 100%;
   z-index: 90;
   transition: 1s;
   border-radius: 50%;

  }

  >a {
   margin: 10px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   transition: 1s;
   left: -100px;
   text-decoration: none;

   &:nth-of-type(1) {
    top: 10px;
   }

   &:nth-of-type(2) {
    top: 60px;
   }

   &:nth-of-type(3) {
    top: 110px;
   }

   >i {
    font-size: 30px;
    color: black;
   }
  }
 }
}