body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0
}

.one {
  text-transform: uppercase;
  letter-spacing: .5em;
  display: inline-block;
  border: 4px double rgba(255,255,255,.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
}  
  span{

    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: .25em 0 .325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255,255,255,.5);

    background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;

    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;

  }


@-webkit-keyframes aitf {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.card{
  padding: 10px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.container{
    margin-top: 500px;
}
.col{
  color: black;
}



.card{
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  background-position: center;
  transition: all 0.3s;
  position: relative;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
  
  .card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 100%;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
  filter: brightness(70%);
  }
  
  .card, .card::before{
  background-color:rgb(142, 209, 231);
  background-size: cover;
  background-repeat: no-repeat;
  }
  
  .card:hover{
    background-color: lightblue;
  transform: scale(1.2);
  z-index: +10;
  }
  
  .card:hover::before{
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }


  html, body {
    width: 100%;
    height:100%;
  }
  
  body {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }