/*gradient background small*/
#shape-1{
    width: 24vw;
    height: 24vw;
    animation: one 6s infinite;
    background-color: #f1b9c4;
}

#shape-2{
    width: 15vw;
    height: 15vw;
    animation: two 6s infinite;
    background-color: #ff926e;
}

#shape-3{
    width: 10vw;
    height: 10vw;
    animation: three 6s infinite;
    background-color: rgb(68, 171, 255);
}


@keyframes one{
    0%{left: 2.5vw; top: 10vw;}
    25%{left: -5vw; top: 5vw;}
    50%{left: 5vw; top: 10vw;}
    75%{left: 0vw; top: 2.5vw;}
    100%{left: 2.5vw; top: 10vw;}
}

@keyframes two{
    0%{left: 0px; top: 0px;}
    25%{left: -2.5vw; top: -2.5vw;}
    50%{left: 2.5vw; top: -10vw;}
    75%{left: -10vw; top: -5vw;}
    100%{left: 0px; top: 0px;}
}

@keyframes three{
    0%{left: -7.5vw; top: 10vw;}
    25%{left: -10vw; top: 7.5vw;}
    50%{left: -15vw; top: 12.5vw;}
    75%{left: -5vw; top: 15vw;}
    100%{left: -7.5vw; top: 10vw;}
}

/*gradient background*/
#shape-4{
    width: 30vw;
    height: 30vw;
    animation: four 6s infinite;
    background-color: #f1b9c4;
}

#shape-5{
    width: 20vw;
    height: 20vw;
    animation: five 6s infinite;
    background-color: #ff926e;
}

#shape-6{
    width: 15vw;
    height: 15vw;
    animation: six 6s infinite;
    background-color: rgb(68, 171, 255);
}

@keyframes four{
    0%{left: 2.5vw; top: 2vw;}
    25%{left: -5vw; top: -2vw;}
    50%{left: 5vw; top: 5vw;}
    75%{left: -10vw; top: 0vw;}
    100%{left: 2.5vw; top: 2vw;}
}

@keyframes five{
    0%{left: 0px; top: 0px;}
    25%{left: -2.5vw; top: -2.5vw;}
    50%{left: 2.5vw; top: -10vw;}
    75%{left: -10vw; top: -5vw;}
    100%{left: 0px; top: 0px;}
}

@keyframes six{
    0%{left: 0vw; top: 10vw;}
    25%{left: -2.5vw; top: 2.5vw;}
    50%{left: 10vw; top: 5vw;}
    75%{left: 5vw; top: -2.5vw;}
    100%{left: 0vw; top: 10vw;}
}

/*icon profile image*/
@keyframes rotate{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


@keyframes slideDown {
    from {
        transform: translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 767px) and (orientation: portrait){
    #shape-1{
        width: 48vw;
        height: 48vw;
    }
    
    #shape-2{
        width: 30vw;
        height: 30vw;
    }
    
    #shape-3{
        width: 20vw;
        height: 20vw;
        filter: blur(60px);
    }
    
    /*gradient background*/
    #shape-4{
        width: 60vw;
        height: 60vw;
    }
    
    #shape-5{
        width: 40vw;
        height: 40vw;
    }
    
    #shape-6{
        width: 30vw;
        height: 30vw;
    }
}