.context{
    height: 100vh;
    position: relative;
}
#card1{
    height: 8vh;
    background-color: red;
    position: sticky;
    top: 0;
    z-index: 3;
}
#card2{
    height: 8vh;
    background-color: #0044ff;
    position: sticky;
    top: 0;
    z-index: 3;

}
body>section:nth-child(2){
    background-color: #477ce7;
}
#card3{
    height: 8vh;
    background-color: #171414;
    position: sticky;
    top: 0;
    z-index: 3;
}
body>section:nth-child(3){
    background-color: #869097;
}
#card4{
    height: 8vh;
    background-color: #710c0c;
    position: sticky;
    top: 0;
    z-index: 3;
}
body>section:nth-child(4){
    background-color: #f34949;
}
.heading{
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin: 0;
}
div{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    width: 100px;
}
p{
font-size: 100px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    width: 100px;
}