style.css

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: 'Source Code Pro'   ;
}
.app{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
}
header h1{
    margin:50px 0px 30px 0px;
    text-align: center;
    font-size: 40px;
}
header p{
    font-size: 20px;
}
.pads{
    background:lightblue;
    width:100%;
    display:flex;
}
.pads > div{
    height:150px;
    width:100px;
    flex:1;
}
.pad1{
    
    background: #6860d3;
}
.pad2{
    
    background:#60b2d3;
}
.pad3{
    
    background:#60d394;
}
.pad4{
    background:#fffa6b;
}
.pad5{
    
    background:#f0843d;
}
.pad6{
    background:#d36060;
}

@keyframes jump {
    0%{
        left:0%;
        bottom:20%;
    }
    50%{
        left:50%;
        bottom:50%
    }
    100%{
        bottom:0%;
        left:80%;
    }
}
.visual > div{
    position: absolute;
    height: 50px;
    width:50px;
    border-radius: 50%;
    bottom:0%;
    left:20%;
    bottom:0%;
    /* z-index: -1; */
}