@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(134, 183, 84,1) 0%, rgba(0,0,0,0) 100%);
}

.tooltip{
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    margin-top: 10%;
}

.tooltiptext{
    width: 250px;
    background-color: #273342;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -120px;
    visibility: hidden;
}

.tooltiptext::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-style: solid;
    border-color: #273342 transparent transparent transparent;
    margin-left: -5px;
    border-width: 5px;
}

.tooltip:hover .tooltiptext{
    visibility: visible;
}