@font-face {
    font-family: blur;
    src: url(assets/fonts/Montserrat-VariableFont_wght.ttf);
}


body {
    font-family: blur, sans-serif;
    background-image: url(assets/images/wp12821466.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    color: hsla(0, 0%, 90%, 0.87);
    font-weight: 500;
}

.all {

    background: rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    width: 40vh;
    height: 50vh;
    
}

img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vh;
}

.front, .desc, .name {
    display: flex;
    justify-content: center;
    align-items: center;
}

.front {
    margin-bottom: 2vh;
    font-weight: 600;
}

.name {
    margin-bottom: 2vh;

}


.anim {
    margin-left: 5px;
    color: white; 
    animation: changeColor 3s infinite; 

}

@keyframes changeColor {
    0% {
      color: white; 
    }
    50% {
      color: grey; 
    }
    100% {
      color: white; 
    }

}

.desc {
    margin: 2vh;
    font-size: 1.5vh;
}
  

.front {
    white-space: nowrap; 
    overflow: hidden; 
    width: 0; 
    animation: typing 4s steps(240) 1s forwards, blink-caret 0.75s step-end infinite;
  }
  
  @keyframes typing {
    0% {
      width: 0; 
    }
    100% {
      width: 100%; 
    }
  }
  


.logos {
    font-size: 50px;
    display: flex;
    align-items: center;
    margin-top: 4vh;
    margin-left: 8.5vh;

    
}

i {
    transition: transform 0.3s ease;
}

i:hover {
    transform: scale(0.8);
}

.logos a {
    margin-right: 3vh; 
  }
  
  .logos a:last-child {
    margin-right: 0; 
  }

  a {
    text-decoration: none;
    color: hsla(0, 0%, 90%, 0.87);
 }