:root {
  --space: 5px;
  --color-one: #ff00de;
}
body {
  background:#000;
  color:#fff;
  padding:20px;
}
.bg-gray {
  padding:20px;
}
.interactive-icon {
  width:500px;
  position:relative;
}
.rounded-element {
  width:500px;
}
.loading-line {
  margin-top:5px;
}
.line-top-to-bottom {
  left:calc(50% + var(--space));
  position:absolute;
  width:50%;
  height:calc(100% - var(--space));
  .linear-line {
    border-left:2px solid var(--color-one);
    border-bottom:2px solid var(--color-one);
    box-shadow: 0 0 10px rgba(255,255,255,1), 0 0 0px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 10px var(--color-one), 0 0 15px var(--color-one), 0 0 20px var(--color-one), 0 0 30px var(--color-one);
    width:0;
    height:0;
    -webkit-animation:top-to-bottom 1s ease-in .5s forwards;
    animation: top-to-bottom 1s ease-in .5s forwards;
  }
}
.line-bottom-to-top {
  left:calc(50% + var(--space));
  position:absolute;
  width:50%;
  height:calc(100% - var(--space));
  transform: scale(1, -1);
  .linear-line {
    border-left:2px solid #0dcaf0;
    border-bottom:2px solid #0dcaf0;
    width:0;
    height:0;
    -webkit-animation:top-to-bottom 1s ease-in .5s forwards;
    animation: top-to-bottom 1s ease-in .5s forwards;
  }
}
.line-top-to-right {
  left:calc(50% + var(--space));
  position:absolute;
  width:50%;
  height:calc(50% - var(--space));
  .linear-dot {
    background:#fff;
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    left:-3px;
    top:50%;
    box-shadow:0 0 25px #ffc107;
    animation-iteration-count: infinite;
    -webkit-animation:dot-top-to-bottom 1s ease-in .5s infinite,
                      dot-left-to-right 1s ease-in 1.5s forwards;
    animation: dot-top-to-bottom 1s ease-in .5s forwards,
               dot-left-to-right 1s ease-in 1.5s forwards;
  }
  .linear-line {
    border-left:2px solid #0dcaf0;
    border-bottom:2px solid #0dcaf0;
    width:0;
    height:0;
    -webkit-animation:top-to-bottom 1s ease-in .5s forwards,
                      left-to-right 1s ease-in 1.5s forwards;
    animation: top-to-bottom 1s ease-in .5s forwards,
               left-to-right 1s ease-in 1.5s forwards;
  }
}
.line-top-to-left {
  right:calc(50% + var(--space));
  position:absolute;
  width:50%;
  height:calc(50% - var(--space));
  transform: scale(-1, 1);
  .linear-line {
    border-left:2px solid #cc0000;
    border-bottom:2px solid #cc0000;
    width:0;
    height:0;
    -webkit-animation:top-to-bottom 1s ease-in .5s forwards,
                      left-to-right 1s ease-in 1.5s forwards;
    animation: top-to-bottom 1s ease-in .5s forwards,
               left-to-right 1s ease-in 1.5s forwards;
  }
}
.line-bottom-to-right {
  left:50%;
  bottom:0;
  position:absolute;
  width:50%;
  height:calc(50% - var(--space));
  margin-left: var(--space);
  transform: scale(1, -1);
  .linear-line {
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    width:0;
    height:0;
    -webkit-animation:bottom-to-top 1s ease-in .5s forwards,
                      left-to-right 1s ease-in 1.5s forwards;
    animation: bottom-to-top 1s ease-in .5s forwards,
               left-to-right 1s ease-in 1.5s forwards;
  }
}
.line-bottom-to-left {
  right:50%;
  bottom:0;
  position:absolute;
  width:50%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  transform: scale(-1, -1);
  .linear-line {
    border-left:2px solid #ffc107;
    border-bottom:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:bottom-to-top 1s ease-in .5s forwards,
                      left-to-right 1s ease-in 1.5s forwards;
    animation: bottom-to-top 1s ease-in .5s forwards,
               left-to-right 1s ease-in 1.5s forwards;
  }
}
.line-left-to-top {
  left:17%;
  bottom:50%;
  position:absolute;
  width:50%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  transform: scale(1, -1);
  .linear-line {
    border-right:2px solid #ffc107;
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:left-to-right 1s ease-in .5s forwards,
                      top-to-bottom 1s ease-in 1.5s forwards;
    animation: left-to-right 1s ease-in .5s forwards,
               top-to-bottom 1s ease-in 1.5s forwards;
  }
}
.line-left-to-bottom {
  left:17%;
  bottom:10px;
  position:absolute;
  width:50%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  .linear-line {
    border-right:2px solid #ffc107;
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:left-to-right 1s ease-in .5s forwards,
                      top-to-bottom 1s ease-in 1.5s forwards;
    animation: left-to-right 1s ease-in .5s forwards,
               top-to-bottom 1s ease-in 1.5s forwards;
  }
}
.line-left-to-right {
  left:17%;
  bottom:15px;
  position:absolute;
  width:100%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  .linear-line {
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:left-to-right 1s ease-in .5s forwards;
    animation: left-to-right 1s ease-in .5s forwards;
  }
}
.line-right-to-top {
  right:17%;
  bottom:50%;
  position:absolute;
  width:50%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  transform: scale(-1, -1);
  .linear-line {
    border-right:2px solid #ffc107;
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:left-to-right 1s ease-in .5s forwards,
                      top-to-bottom 1s ease-in 1.5s forwards;
    animation: left-to-right 1s ease-in .5s forwards,
               top-to-bottom 1s ease-in 1.5s forwards;
  }
}
.line-right-to-bottom {
  right:17%;
  bottom:10px;
  position:absolute;
  width:50%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  transform: scale(-1, 1);
  .linear-line {
    border-right:2px solid #ffc107;
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:left-to-right 1s ease-in .5s forwards,
                      top-to-bottom 1s ease-in 1.5s forwards;
    animation: left-to-right 1s ease-in .5s forwards,
               top-to-bottom 1s ease-in 1.5s forwards;
  }
}
.line-right-to-left {
  right:17%;
  bottom:15px;
  position:absolute;
  width:100%;
  margin-right:var(--space);
  height:calc(50% - var(--space));
  transform: scale(-1, 1);
  .linear-line {
    border-top:2px solid #ffc107;
    width:0;
    height:0;
    -webkit-animation:right-to-left 1s ease-in .5s forwards;
    animation: right-to-left 1s ease-in .5s forwards;
  }
}

.round-box {
  background:#1e1f27;
  border:1px solid #1e1f27;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width:100px;
  height:100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 25px #ffc107;
  margin-top: -10px;
  .icon {
    width:100%;
    height:40%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    &.energy {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUxMS45OTkgNTExLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMzg5LjA1MyA3LjYwM2MtMi42NjYtNC43MDMtNy42NDctNy42MDMtMTMuMDUyLTcuNjAzaC0xODBjLTYuODg1IDAtMTIuODc2IDQuNjg4LTE0LjU0NiAxMS4zNjdsLTYwIDI0MWMtMS4xMjggNC40ODItLjExNyA5LjIyOSAyLjcyNSAxMi44NjEgMi44NDIgMy42NDcgNy4yMDcgNS43NzEgMTEuODIxIDUuNzcxaDY4LjM1bC04Mi4zOTcgMjIwLjcyN2MtMi42MzcgNy4wMzEuMzM3IDE0LjkyNyA2Ljk0MyAxOC40ODYgNi42MzYgMy41NTYgMTQuODQ2IDEuNjUzIDE5LjIzMy00LjM5NWwyNDAtMzMxYzMuMzI1LTQuNTU2IDMuNzk0LTEwLjU5MSAxLjI0NS0xNS42My0yLjU2My01LjAyNC03LjczNC04LjE4OC0xMy4zNzQtOC4xODhoLTYzLjUwMWw3Ni4zNjItMTI4LjI4YzIuNzg0LTQuNjQzIDIuODU3LTEwLjQxNC4xOTEtMTUuMTE2eiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiIgY2xhc3M9IiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+');  
    }
  }
}

.glow {
    &:before,
    &:after {
      height: 6px;
      -webkit-filter: blur(5px);
      border-radius: 5px;
    }
    
    &:before {
      background: linear-gradient(to right, blue, hotpink);
    }
    
    &:after {
      background: linear-gradient(to left, blue, hotpink);
    }
  }

@-webkit-keyframes dot-top-to-bottom {
    0% { top: 0; }
    100% { top: calc(100% - 6px); }
  }
  @keyframes dot-top-to-bottom {
    0% { top: 0; }
    100% { top: calc(100% - 6px); }
  }
@-webkit-keyframes dot-left-to-right {
    0% { left: 0; }
    100% { left: 60%; }
  }
  @keyframes dot-left-to-right {
    0% { left: 0; }
    100% { left: 60%; }
  }



@-webkit-keyframes top-to-bottom {
    0% { height: 0; }
    100% { height: 100%; }
  }
  @keyframes top-to-bottom {
    0% { height: 0; }
    100% { height: 100%; }
  }
@-webkit-keyframes bottom-to-top {
    0% { height: 0; }
    100% { height: 100%; }
  }
  @keyframes bottom-to-top {
    0% { height: 0; }
    100% { height: 100%; }
  }
  @-webkit-keyframes left-to-right {
    0% { width: 0; }
    100% { width: 60%; }
  }
  @keyframes left-to-right {
    0% { width: 0; }
    100% { width: 60%; }
  }
  @-webkit-keyframes right-to-left {
    0% { width: 0; }
    100% { width: 60%; }
  }
  @keyframes right-to-left {
    0% { width: 0; }
    100% { width: 60%; }
  }