body{
    width:390px;
    height:844px;
    margin: auto;
    
    background-color:#000000
   
 ;
    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%}
}
#child-body{
    margin-top: 50px;
    
    width: 389px;
    height: 500px;
   
   border-radius: 30px;
   background: transparent;
    backdrop-filter: blur(600px);
    margin-bottom: 150px;
    background:linear-gradient(45deg,black,rgb(94, 0, 216),black);
    

}
#photo{
    
    width:389px;
    height:500px;
    
   position: relative;
    top: 0px;

    display: flex;
    
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: -1;
    

}
#image {
    margin-top: 20px;
    width: 155px;
    height: 155px;
    border-radius: 50% ;
    background: transparent;
    
    backdrop-filter: blur(10px);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    
}
#photo img{
    width: 389px;
    height: 500px;
    overflow:scroll;
    position: absolute;
    top:30px;
     
    overflow: hidden;
    z-index: 1;
    
}
#name{
    margin-top: 5px;
    font-size: 50px;
;
    position: absolute;
    top:2px;
    left:47px;
   
    color: #efefefd3;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: fade 3s ease-in-out;
    z-index: -1;

}
@keyframes fade{
   
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes individual-fade{
    0%{opacity:0; transform: translateY(70px);}
    100%{opacity:1; transform: translateY(0px);}
}
#inn{
    
    height: 190px;
    width: 250px;
    position: relative;
    top: -380px;
    left:0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    
}
.box{
    width: 45px;
    height:45px;
    
    background-color: rgba(147, 64, 255, 0.422);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
     
    
    
    animation: individual-fade 2s ease-in 0s 1  ;
}
.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    
   
    
}
#box-4{
    width:107px
}
#box-5{
    width:107px;
}
#box-1 img{
   transform: scale(2);



}
#box-1{
    width:69px;
    
}
#box-3{
    width:69px;
}
#box-2{
    
    width:69px;
    
    
}
   
#box-2 img{
    height:40px;
    width:40px;
}
#box-3 img{
    height:40px;
    width:40px;
}
#box-4 img{
    height:30px;
    width:30px;
}
#box-5 h5{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   text-decoration: none;
    color: rgb(0, 0, 0);
}  
#button{
    width: 214px;
    height: 54px;
    margin: auto;
   
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    
    width: 221px;
    height: 50px;
    border: none;
    background-color: rgba(147, 64, 255, 0.422);
    color: rgb(203, 203, 203);
    font-size: 18px;
    border-radius: 12px;
    cursor: pointer;
    position:relative;
    top: -420px;
    left:0px;
     
    animation: individual-fade 2s ease-in 0s 1  ;
    
}
#button a{
    text-decoration: none;
    color: rgb(18, 18, 18);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight:550;
}
@keyframes translate {
    0%{transform: translateY(70px); opacity:0;}
    100%{transform: translateY(0px); opacity:1;
       
    }
}
#photo img{
    animation: translate 2s ease-in-out 0s 1;
}