*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Montserrat', sans-serif;
    background-color: #16161a;
}

.app{
    min-height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

header h1{
    margin:50px 0px 30px 0px;
    text-align: center;
    font-size: 40px;
    color: #94a1b2;
}

header p{
    font-size: 25px;
    color: #94a1b2;
}

.pads{
    background: lightblue;
    width:100%;
    display: flex;
}

.pads>div{
    height:100px;
    width:100px;
    flex:1;
}

.pad1{
    background: #8EE4AF;
}
.pad2{
    background: #e27d60;
}
.pad3{
    background: #c060d3;
}
.pad4{
    background: #d3d160;
}
.pad5{
    background: #6860d3;
}
.pad6{
    background: #60b2d3;
}

.visual > div{
    position:absolute;
    height:50px;
    width: 50px;
    border-radius: 50%;
    bottom: 0%;
    transform: scale(1);
    z-index: -1;
}

@keyframes jump{
    0%{
        bottom:0%;
        left:20%;
    }
    50%{
        bottom:50%;
        left:50%;
    }
    100%{
        bottom:0%;
        left:80%;
    }
}