*{
    box-sizing: border-box;

}
body{
    font-family: "Nunito", sans-serif;
    
    background-color:#191919;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    color: white;
}

.tooltip-container{
    width: 518px;
    /* height: 237px; */
    border: solid 1px #FFFFFF;
    border-radius: 19px;
    display: flex;
    justify-content: space-between;
    padding:0px 64px 0px 64px ;
   

  
}

.tooltip-icon{
display: flex;
flex-direction: column;
align-items: center;
font-size:36px ;
font-weight: 700;
padding: 54px 0 56px 0;
cursor: pointer;

}
span{
    padding-top: 22px;
}
.tooltip-icon img {
    height: 50px;
}

.MongoDB{
    color: rgba(71, 162, 72, 1);
}
.Express{
    
}
.React{
    color: rgba(97, 218, 251, 1);
}

.Node{
    color:rgba(140, 200, 75, 1);
}



.text-db,.text-ex, .text-re, .text-no{
    font-size: 10px;
    margin-bottom: 10px;
    border-radius: 50px;
    background-color: green;
    width: 60px;
    height: 29px;
   padding: 6px 0 0 12px;
    color: black;
    margin-bottom: 15px;
    position: absolute;
    visibility: hidden;
    top: 456px;
     transition: opacity 0.2s ease, transform 0.2s ease;
   
    

}

.text-db{ 
    padding-top: 6px;
    padding-left: 5px;
    background-color: green;
    color: white;
    /* visibility: hidden; */
}
.text-ex {
    padding-top: 6px;
    padding-left: 7px;
    background-color:white ;
    /* visibility: hidden; */
    
   
}
.text-re{
    background-color: rgba(97, 218, 251, 1);
   /* visibility: hidden; */
   
}
.text-no{
background-color: rgba(140, 200, 75, 1);
/* visibility: hidden; */
}



.tip1,.tip2,.tip3,.tip4{
    position: absolute;
     height: 10px;
    width: 10px;
    /* background-color: green; */
    top: 480px;
    transform: rotate(45deg);
    visibility: hidden;
     transition: opacity 0.2s ease, transform 0.2s ease;
}
.tip1{
    background-color: green;
}
.tip2{
    background-color:white ; ;
}
.tip3{
    background-color:rgba(97, 218, 251, 1) ;
}
.tip4{
    background-color:rgba(140, 200, 75, 1) ;
}

.tooltip-icon:hover .text-db,
.tooltip-icon:hover .text-ex,
.tooltip-icon:hover .text-re,
.tooltip-icon:hover .text-no,
.tooltip-icon:hover .tip1,
.tooltip-icon:hover .tip2,
.tooltip-icon:hover .tip3,
.tooltip-icon:hover .tip4{
 
    visibility: visible;
}