.main-container{
    display: flex;
}

#wraper {
    width: 250px; 
    padding: 20px; 
    position: relative;
    margin-left: 10px;
    margin-top: -20px;
}

#top-wraper {
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 15px; 
}

#wraper #top-wraper i{
    color:red;
    animation: pulse 1s infinite;
}

.data-wraper ul {
    list-style-type: none; 
    padding: 0; 
}

.data-wraper li {
    margin: 10px 0; 
}

.radius {
    display: inline-block; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    background-color: #007bff;
    color: white; 
    text-align: center; 
    line-height: 25px; 
    margin-right: 10px; 
}

.data-wraper #top1{
    background-color: red;
}
.data-wraper #top2{
    background-color: rgb(245, 245, 32);
}

.data-wraper #top3{
    background-color: rgb(92, 198, 92);
}

.data-wraper a {
    text-decoration: none; 
    color: black; 
}

.data-wraper a:hover {
    color: #0099e6;
}

@keyframes pulse {
    0% {
        transform: scale(1); 
    }
    50% {
        transform: scale(1.2); 
    }
    100% {
        transform: scale(1); 
    }
}