body {
    min-height: 100vh;
    background: #031321;
    font-family: monospace;
  }
  .container{
    display: flex;
    flex-wrap: wrap;
  }
  .neon{
    margin: 20px 40px;
  }
  .neon a {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    overflow: hidden;
    transform: 0.2s;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
  }
  #neon1 a {
    color: #c3d403;
  }
  
  #neon2 a {
    color: #07becf;
  }
  
  #neon3 a {
    color: #c3d403;
  }
  
  #neon4 a {
    color: #07becf;
  }
  
  #neon5 a {
    color: #c3d403;
  }
  
  #neon6 a {
    color: #ffffff;
  }
  .neon a:hover {
    color: #255784 !important;
    transition-delay: 1s;
  }
  #neon1 a:hover {
    background: #c3d403;
    box-shadow: 0 0 10px #c3d403, 0 0 40px #c3d403, 0 0 80px #c3d403;
  }
  #neon2 a:hover {
    background: #07becf;
    box-shadow: 0 0 10px #07becf, 0 0 40px #07becf, 0 0 80px #07becf;
  }
  #neon3 a:hover {
    background: #c3d403;
    box-shadow: 0 0 10px #c3d403, 0 0 40px #c3d403, 0 0 80px #c3d403;
  }
  #neon4 a:hover {
    background: #07becf;
    box-shadow: 0 0 10px #07becf, 0 0 40px #07becf, 0 0 80px #07becf;
  }
  #neon5 a:hover {
    background: #c3d403;
    box-shadow: 0 0 10px #c3d403, 0 0 40px #c3d403, 0 0 80px #c3d403;
  }
  #neon6 a:hover {
    background: #ffffff;
    box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
  }
  
  .neon a span {
    position: absolute;
    display: black;
  }
  
  .neon a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
  }
  .neon a:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
  }
  .neon a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
  }
  .neon a:hover span:nth-child(3) {
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
  }
  .neon a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
  }
  .neon a:hover span:nth-child(2) {
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
  }
  .neon a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
  }
  .neon a:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
  }
  
  #neon1 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #c3d403);
  }
  #neon1 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #c3d403);
  }
  
  #neon1 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #c3d403);
  }
  #neon1 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #c3d403);
  }
  #neon2 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #07becf);
  }
  #neon2 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #07becf);
  }
  #neon2 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #07becf);
  }
  #neon2 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #07becf);
  }
  #neon3 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #c3d403);
  }
  #neon3 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #c3d403);
  }
  #neon3 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #c3d403);
  }
  #neon3 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #c3d403);
  }
  #neon4 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #07becf);
  }
  #neon4 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #07becf);
  }
  #neon4 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #07becf);
  }
  #neon4 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #07becf);
  }
  #neon5 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #c3d403);
  }
  #neon5 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #c3d403);
  }
  #neon5 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #c3d403);
  }
  #neon5 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #c3d403);
  }
  #neon6 a span:nth-child(1) {
    background: linear-gradient(90deg, transparent, #ffffff);
  }
  #neon6 a span:nth-child(3) {
    background: linear-gradient(270deg, transparent, #ffffff);
  }
  #neon6 a span:nth-child(2) {
    background: linear-gradient(180deg, transparent, #ffffff);
  }
  #neon6 a span:nth-child(4) {
    background: linear-gradient(360deg, transparent, #ffffff);
  }
  .boxglow{
    background-color:rgba(51,51,51,0.7);
    width: 96%;
    height: 96%;
    margin-right: 2%;
    margin-left: 2%;
  }
  .boxglow {
    text-align: center;
    -webkit-animation: boxglow 5s ease-in-out infinite alternate;
    -moz-animation: boxglow 5s ease-in-out infinite alternate;
    animation: boxglow 5s ease-in-out infinite alternate;
  }
  
  
  @keyframes boxglow {
    from {
      box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #c3d403, 0 0 40px #c3d403, 0 0 50px #c3d403, 0 0 60px #c3d403, 0 0 70px #c3d403;
    }
    
  /*   to {
      box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    } */
    to {
      box-shadow: 0 0 20px #fff, 0 0 30px #07becf, 0 0 40px #07becf, 0 0 50px #07becf, 0 0 60px #07becf, 0 0 70px #07becf, 0 0 80px #1b03a3;
    }
  }