*{
    margin:0;
    padding:0;
}

html,body{
    width:100%;
    height:100%;
    overflow-x:hidden;
}

#river{
    position:absolute;
    width:30%;
    top:10%;
    left:25%;
}

#river #wave{
    
    stroke-dashoffset: 0;
    stroke-dasharray: 1620;
    animation:wave 10s ease infinite;
}

@keyframes wave{
    0%{
        stroke-dashoffset: 1620;
    }

    100%{
        stroke-dashoffset: 0;
    }
}


/* file */

#file{
    width:25%;
    z-index:3;
}

.file{
    position:absolute;
    background-color:#135F91;
    width:10%;
    overflow:hidden;
    padding:12px 18px;
    border-radius:40px;
    top:14%;
    left:31%;
}


.file #file,.file h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}



.file h6{
    position:absolute;
    top:19px;
    left:76px;
    text-align: center;
    color:white;
}

.file:hover h6{
    
    color:rgb(0, 255, 13);
}

.one h1{
    position:absolute;
    background-color:white;
    
    top:12%;
    left:41%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#135F91;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}

/* Hand-Shake */


#shake{
    width:25%;
    z-index:3;
}

.shake{
    position:absolute;
    background-color:#135F91;
    width:10%;
    overflow:hidden;
    padding:12px 18px;
    border-radius:40px;
    top:24%;
    left:41%;
}


.shake #shake,.shake h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}


.shake h6{
    position:absolute;
    top:19px;
    left:76px;
    text-align: center;
    color:white;
}

.shake:hover h6 {
    
    color:rgb(0, 255, 13);
}

.two h1{
    position:absolute;
    background-color:white;
    top:22.5%;
    left:51%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#135F91;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}

/* Money */
#money{
    width:25%;
    z-index:3;
}

.money{
    position:absolute;
    background-color:#6BC6FF;
    width:10%;
    overflow:hidden;
    padding:10px 18px;
    border-radius:40px;
    top:42%;
    left:28%;
}


.money #money,.money h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}


.money h6{
    position:absolute;
    top:19px;
    left:76px;
    text-align: center;
    color:white;
}

.money:hover h6 {
    
    color:rgb(0, 255, 13);
}

.three h1{
    position:absolute;
    background-color:white;
    top:40%;
    left:38%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#6BC6FF;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}

/* Base */


#base{
    width:25%;
    z-index:3;
}

.base{
    position:absolute;
    background-color:#1289FC;
    width:10%;
    overflow:hidden;
    padding:12px 18px;
    border-radius:40px;
    
    top:61%;
    left:42%;
}


.base #base,.base h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}


.base h6{
    position:absolute;
    top:19px;
    left:76px;
    text-align: center;
    color:white;
}

.base:hover h6 {
    
    color:rgb(0, 255, 13);
}

.four h1{
    position:absolute;
    background-color:white;
    
    top:60%;
    left:52%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#1289FC;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}


/* Hand */

#hand{
    width:20%;
    z-index:3;
}

.hand{
    position:absolute;
    background-color:#1289FC;
    width:10%;
    overflow:hidden;
    padding:10px 18px;
    border-radius:40px;
    
    top:64%;
    left:26%;
}


.hand #hand,.hand h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}


.hand h6{
    position:absolute;
    top:19px;
    left:76px;
    text-align: center;
    color:white;
}

.hand:hover h6 {
    
    color:rgb(0, 255, 13);
}

.five h1{
    position:absolute;
    background-color:white;
    
    top:62%;
    left:36%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#1289FC;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}


/* Graph */

#graph{
    width:20%;
    z-index:3;
}

.graph{
    position:absolute;
    background-color:#6BC6FF;
    width:10%;
    overflow:hidden;
    padding:11px 18px;
    border-radius:40px;
    
    top:84%;
    left:32%;
}


.graph #graph,.graph h6{
    
    display:flex;
    overflow:hidden;
    float:left;
    
}


.graph h6{
    position:absolute;
    top:10px;
    left:76px;
    text-align: center;
    color:white;
}

.graph:hover h6 {
    
    color:rgb(0, 255, 13);
}

.six h1{
    position:absolute;
    background-color:white;
    top:83%;
    left:41.7%;
    padding:8px;
    width:40px;
    height:40px;
    text-align: center;
    border-radius:50%;
    color:#6BC6FF;
    z-index:30;
    box-shadow: 1px 2px 3px 0 rgb(209, 208, 208);
}