@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200&display=swap');

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

body {
    display: flex;
    min-height: 100vh;
    background: #161623;    
}

.container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    flex-wrap: wrap;
   
}

.container .card {
    
    position: relative;
    display: grid;
   
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, min(350px,80%));
    padding: 10px;
    top: 10%;
    left: 10%;
    width: 70%;
    height: 70%;
    margin: 30px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    
    border-radius: 15px;
    background: rgba(51, 51, 56, 0.596);
    /* backdrop-filter: blur(.4rem); */

    border-left: 1px solid rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.5);
    
    transform-style: preserve-3d;
    transform: perspective(500px);
}
.card_container{
    width: 400px;
}
.container .card  a {
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background: #fff;
    color: #000;
    border-radius: 40px;

    text-decoration: none;
    font-weight: 500;
    transform: translateZ(300px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
   
}

.container .card  a span {
    transform: translateZ(50px) scale(0.7);
}
.container .card .self {
    transform: translateZ(100px) ;
    background-image: radial-gradient( rgba(169, 240, 240, 0.692) 25%,rgba(183, 241, 241, 0.733) 25%, rgba(129, 238, 220, 0.671) 25%, rgba(5, 89, 88, 0.466) 60%);
    background-color: rgba(63, 236, 236, 0.445);
    margin-left: 4vw;
    margin-top: 4vw;
    width: auto;
    height: 55vw;
    max-height: 300px;
    border-radius: 50%;
    box-shadow: 0 0 50px #35cfe0, 0 0 10px #9ae5ee;
   
    object-fit:fill;
   }

   
.typing{
    transform: translateZ(100px) ;
    margin: 15px;
    display:block;
    font-size: max(15px,2vw);
    color:#fff;
  }
  .typing::after {
    content: '';
    height: 100%;
    padding: 2px;
    margin-left: 10px;
   
    background-color: #05ccc2;
    animation: typing 1.2s ease infinite;
  }
  span.typed-cursor {
    display:none;
  }
  
  
  @keyframes typing {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  .nametag{
    font-size: max(35px,4vw);
    margin-left: 40px;
    color: #228DFF;
    font-family: Iceland;
  }
  .nametag:hover{
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
  }
  
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}