* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Grandstander', cursive;
        background: lightblue;
    }
    
    .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: 100px;
        width: 100px;
        flex: 1;
    }
    
    .pad1 {
        background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    }
    
    .pad2 {
        background: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
    }
    
    .pad3 {
        background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    }
    
    .pad4 {
        background: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
    }
    
    .pad5 {
        background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);
    }
    
    .pad6 {
        background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
    }
    
    .pad7 {
        background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
    }
    
    .pad8 {
        background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
    }
    
    .pad9 {
        background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
    }
    
    .pad10 {
        background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
    }
    
    .pad11 {
        background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
    }
    
    .pad12 {
        background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
    }
    
    .visual>div {
        position: absolute;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        bottom: 0%;
        left: 20%;
        bottom: 0%;
        z-index: -1;
    }
    
    @keyframes jump {
        0% {
            bottom: 0%;
            left: 20%;
        }
        50% {
            bottom: 50%;
            left: 50%;
        }
        100% {
            bottom: 0%;
            left: 80%;
        }
    }
    /* .visual>div {
        position: absolute;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        bottom: 0%;
    } */