card css

.sub{

    border-radius: 4px;

    box-shadow: 0 0 .3rem rgba(0,0,0,.3);

    background-color: aliceblue;

    margin: 2rem;

    padding: 1rem;

    width:30%;

    position: relative;

    /* clip-path: circle(180px at center 0); */

}

.main{

    display: flex;

    text-align: center;

    counter-reset:number;

}

.sub::before{

    counter-increment:number;

    content:counter(number);

    position: absolute;

    width:30px;

    height: 40px;

    background-color: rgb(21, 209, 209);

    top: -1rem;

    right: 10rem;

    border-radius: 50%;

    display: block;

    padding: 3px;

    line-height: 2.5rem;

}h1{

    font-size: medium;

    font-family: 'Courier New', Courier, monospace;

    margin-top: 20px;

}p{

    font-size: medium;

    font-weight: 300;

    font-family: 'Times New Roman', Times, serif;

}h2{

    text-align: center;

    font-size: larger;

}