body {
     background: #00000d;
background: linear-gradient(336deg, #00000d 0%, rgba(0, 0, 61, 1) 61%, rgba(0, 49, 59, 1) 91%);
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: center;
      min-height: 100vh;
      overflow-x: hidden;
      padding: 20px;
    }
.name h1{color: white;
font-family: poppins;}
.container {}
.container .name{position:absolute;
font-size: 25px;
text-align: right;
z-index: -1;
left: 12%;
top: 3%;}
.container .pro img{
    font-size: 100%;
    z-index:-1 ;}

.tools{position: absolute;
top: 12%;
left: 3%;}
.tools div{
    margin: 30px;
    transition: 1s ease-in;
}
.tools div:hover{
    transform: scale(1.5);
}
.tools div:nth-child(1){
    animation: float 6s ease-in-out infinite;
    

}
.tools div:nth-child(2){
    animation: float 6s ease-in-out infinite;
    animation-delay: 1s;
}
.tools div:nth-child(3){
    animation: float 6s ease-in-out infinite;

}
.tools div:nth-child(4){
    animation: float 6s ease-in-out infinite;
    animation-delay: 3s;
}
.tools div:nth-child(5){
    animation: float 6s ease-in-out infinite;

}
.tools div:nth-child(6){
    animation: float 6s ease-in-out infinite;
    animation-delay: 5s;
}
.tools div:nth-child(7){
    animation: float 6s ease-in-out infinite;

}
.tools div:nth-child(8){
    animation: float 6s ease-in-out infinite;
    animation-delay: 7s;
}

@keyframes float {
	0% {
	
		transform: translatey(0px);
	}
	50% {

		transform: translatey(-30px);
        transform: translatex(-30px);
	}
	100% {
	
		 transform: translatex(0px);
	}
}

.card {position: absolute;
    top: 35%;
    left: 20%;
  width: 100%;
  max-width: 290px;
  height: 400px;
  background: #ffffff3f;
  border-radius: 20px;
  display: flex;
  backdrop-filter: blur(10px);
  transition: 0.5s ease-in-out;
  z-index: -1;
   animation: float 5s ease-in-out infinite;
    
}


.card:hover {
  cursor: pointer;
  transform: scale(1.05);
  z-index: 10;
  
}




.textBox {
  width: calc(100% - 90px);
  margin-left: 10px;
  color: white;
  font-family: 'Poppins' sans-serif;
}

.textContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.span {
  font-size: 10px;
}

.h1 {
  font-size: 16px;
  font-weight: bold;
}

.p {
  font-size: 12px;
  font-weight: lighter;
}