/* From Uiverse.io by MijailVillegas */ 
body {
    margin: 0;
    padding: 0;
    background: #0f0e0e;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}
.container {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-style: italic;
    font-weight: bold;
    display: flex;
    margin: auto;
    aspect-ratio: 16/9;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1em;
    height: 50vh;
  }
  
  .card-container {
    filter: drop-shadow(46px 36px 24px #4090b5) drop-shadow(-55px -40px 25px #9e30a9);
    animation: blinkShadowsFilter 8s ease-in infinite;
  }
  
  .card-content {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    grid-template-rows: 0.1fr 0.7fr 0.25fr;
    background-color: hsl(296, 59%, 10%);
    width: 10em;
    aspect-ratio: 9/16;
    -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
  }

  .card-content2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    grid-template-rows: 0.1fr 0.7fr 0.25fr;
    background-color: hsl(296, 59%, 10%);
    width: 30em;
    height: 10em;
  
    -webkit-clip-path: polygon(0 0, 85% 0, 100% 5%, 100% 60%, 100% 100%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    clip-path: polygon(0 0, 85% 0, 100% 5%, 100% 60%, 100% 100%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
  }
  
  .card-content::before {
    content: "";
    position: absolute;
    width: 250%;
    aspect-ratio: 1/1;
    transform-origin: center;
    background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);
    animation: rotate 5s infinite linear;
  }
  
  .card-content::after {
    content: "";
    position: absolute;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 98%;
    background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);
    box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);
    -webkit-clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    clip-path: polygon(0 0, 85% 0, 100% 14%, 100% 60%, 92% 65%, 93% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    animation: backglitch 94ms linear infinite;
  }

  .card-content2::before {
    content: "";
    position: absolute;
    width: 250%;
    aspect-ratio: 1/1;
    transform-origin: center;
    background: linear-gradient(to bottom, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent), linear-gradient(to left, transparent, transparent, #66e0ff, #66e0ff, #e366ff, #e366ff, transparent, transparent);
    animation: rotate 10s infinite linear;
  }
  
  .card-content2::after {
    content: "";
    position: absolute;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 98%;
    background: repeating-linear-gradient(to bottom, transparent 0%, rgba(64, 144, 181, 0.6) 1px, rgb(0, 0, 0) 3px, rgba(64, 144, 181, 0.3019607843) 5px, #153544 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsla(295, 60%, 12%, 0.99) 100%);
    box-shadow: inset 0px 0px 30px 40px hsl(296, 59%, 10%);
    -webkit-clip-path: polygon(0 0, 85% 0, 100% 5%, 100% 60%, 100% 100%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    clip-path: polygon(0 0, 85% 0, 100% 5%, 100% 60%, 100% 100%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 0 100%);
    animation: backglitch 94ms linear infinite;
  }
  
  .card-title {
    z-index: 80;
    -webkit-clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
    clip-path: polygon(90% 0, 100% 100%, 0% 100%, 0% 0%);
    background: linear-gradient(90deg, rgba(255, 254, 250, 0) 0%, rgba(102, 224, 255, 0.3) 27%, rgba(102, 224, 255, 0.3) 63%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(102, 224, 255, 0.3) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 96%, rgba(102, 224, 255, 0.3) 100%);
    width: 98%;
    font-size: 1.2em;
  }
  .glitch {
    position: relative;
    overflow: hidden;
    align-items: center;
    align-content: center;
    left: 50%;
    translate: -50%;
  }
  .glitch img {
    position: relative;
    z-index: 1;
    display: block;
    
    width: 80%;
    filter: sepia(100%) hue-rotate(190deg) saturate(500%);
  }
  .glitch__layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    filter: sepia(100%) hue-rotate(120deg) saturate(500%);
    bottom: 0;
    background-image: url(assets/banner.png);
    width: 80%;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .glitch__layer:nth-child(1) {
    transform: translateX(-5%);
    animation: glitch-anim-1 2s infinite linear alternate;
  }
  .glitch__layer:nth-child(2) {
    transform: translateX(3%) translateY(3%);
    animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
  }
  .glitch__layer:nth-child(3) {
    transform: translateX(5%);
    animation: glitch-anim-flash 1s infinite linear;
  }
  @keyframes glitch-anim-1 {
    0% {
      clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
    }
    10% {
      clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    20% {
      clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    30% {
      clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    40% {
      clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
    }
    50% {
      clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
    }
    60% {
      clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
    }
    70% {
      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    80% {
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    90% {
      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    100% {
      clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
    }
  }
  @keyframes glitch-anim-2 {
    0% {
      clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
    }
    15% {
      clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    25% {
      clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
    }
    30% {
      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    45% {
      clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
    }
    50% {
      clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
    }
    65% {
      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    75% {
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    80% {
      clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
    }
    95% {
      clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
    }
    100% {
      clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
    }
  }
  @keyframes glitch-anim-flash {
    0% {
      opacity: .2;
    }
    30%, 100% {
      opacity: 0;
    }
  }
  
  .title {
    width: 100%;
    height: 100%;
    text-align: right;
    position: relative;
    z-index: 2;
    color: hsl(192, 100%, 88%);
    font-size: 1em;
    transition: all ease-in-out 2s linear;
  }
  .subtitle {
    width: 100%;
    height: 100%;
    text-align: right;
    position: relative;
    z-index: 2;
    color: hsl(192, 13%, 54%);
    font-size: .8em;
    transition: all ease-in-out 2s linear;
  }
  .banner {
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    z-index: 10;

    width: 45%;
    clip-path: polygon(0 10%, 85% 0, 100% 14%, 100% 60%, 92% 50%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 10% 100%);
    -webkit-clip-path: polygon(0 10%, 85% 0, 100% 14%, 100% 60%, 92% 50%, 100% 77%, 99% 80%, 99% 90%, 89% 100%, 10% 100%);
  }
  
  
  .card-body {
    padding-block: 1.5em;
    padding-inline: 1em;
    z-index: 80;
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
  }
  
  .svg-card {
    text-decoration: none;
    color: hsl(192, 100%, 88%);
    background: linear-gradient(90deg, transparent 0%, rgba(102, 224, 255, 0.2) 27%, rgba(102, 224, 255, 0.2) 63%, transparent 100%);
    fill: currentColor;
    width: 3em;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }
  
  .svg-card .face {
    width: 3em;
  }
  
  .svg-card .twit {
    width: 3em;
  }
  
  .svg-card .insta {
    width: 3em;
  }
  
  .svg-card .whats {
    width: 2.5em;
  }
  
  .svg-card:hover {
    cursor: pointer;
    color: hsl(192, 100%, 100%);
  }
  
  .card-footer {
    padding-inline: 1em;
  }
  .neon-btn .txt {
    text-align: right;
    position: relative;
    z-index: 2;
    color: aliceblue;
    font-size: 1em;
    transition: all ease-in-out 2s linear;
    text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;
  }
  
  @keyframes backglitch {
    0% {
      box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
    }
  
    50% {
      box-shadow: inset 0px -20px 30px 40px hsl(296, 59%, 10.2%);
    }
  
    to {
      box-shadow: inset 0px 20px 30px 40px hsl(296, 59%, 10%);
    }
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg) translate(-50%, 20%);
    }
  
    50% {
      transform: rotate(180deg) translate(40%, 10%);
    }
  
    to {
      transform: rotate(360deg) translate(-50%, 20%);
    }
  }
  
  @keyframes blinkShadowsFilter {
    0% {
      filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
    }
  
    25% {
      filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 24px #9e30a9);
    }
  
    50% {
      filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));
    }
  
    75% {
      filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157)) drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));
    }
  
    to {
      filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706)) drop-shadow(-55px -40px 28px #9e30a9);
    }
    
  }/*# sourceMappingURL=style.css.map */
   .neon-btn .span {
    inset: 2px;
    background-color: #4090b5;
    background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);
    box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);
  }
  .neon-btn {
    width: 300px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 5em;
    text-align: right;
    background: transparent;
    position: relative;
    overflow: hidden;
    transition: all 2s ease-in-out;
    -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
    clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  }
  .neon-btn .span {
    display: flex;
    -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
    clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
    position: absolute;
    inset: 1px;
    background-color: #212121;
    z-index: 1;
  }
  .neon-btn::before {
    content: "";
    position: absolute;
    height: 300px;
    aspect-ratio: 1.5/1;
    box-shadow: -17px -19px 20px #9e30a9;
    background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);
    animation: rotate2 4s linear infinite -2s;
  }
  
  .neon-btn::after {
    content: "";
    position: absolute;
    height: 300px;
    aspect-ratio: 1.5/1;
    box-shadow: -17px -19px 10px #4090b5;
    background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);
    animation: rotate2 4s linear infinite;
  }
  
  @keyframes rotate2 {
    0% {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes colorchange {
    0% {
      text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);
    }
  
    50% {
      text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
    }
  
    to {
      text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
    }
  }
  
  @keyframes backgroundchange {
    0% {
      background-color: transparent;
    }
  
    50% {
      background-color: #4090b5;
    }
  
    to {
      background-color: transparent;
    }
  }