*{
    box-sizing: border-box;
}
body{
    background-color: lightblue;
    margin: 0;
}
img{
    max-width: 100%;
}

.container{
    background: linear-gradient(180deg,thistle, lightgoldenrodyellow);
    background-size: 400% 400%; 
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow-y: hidden;
    overflow-x: hidden;
    align-items: center;
    justify-content: center;
    margin: 0px, auto;
    animation: gradientAnimation 1.5s ease infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}


.circle-down, .inside-circle-down{
    border: 5px, solid, white;
    display: flex;
    align-items: center;
    border-radius: 100%;
    animation: scale-negative 1.5s alternate ease-in-out infinite;
}

.circle-up, .inside-circle-up{
    border: 5px, solid, white;
    display: flex;
    align-items: center;
    border-radius: 100%;
    animation: scale-up 1.5s alternate ease-in-out infinite;
}


.circle-left, .inside-circle-left{
    border: 5px, solid, white;
    display: flex;
    align-items: center;
    border-radius: 100%;
    animation: scale-left 1.5s alternate ease-in-out infinite;
}

.circle-right, .inside-circle-right{
    border: 5px, solid, white;
    display: flex;
    align-items: center;
    border-radius: 100%;
    animation: scale-right 1.5s alternate ease-in-out infinite;
}

.circle-up, .circle-down, .circle-left, .circle-right{
    position: absolute;
    width: 200px;
    height: 200px;
}

.inside-circle-up, .inside-circle-down, .inside-circle-left, .inside-circle-right{
    position: absolute;
    width: 200px;
    height: 200px;
}


@keyframes scale-negative {
    0%{
        transform: scale(10%) translateY(0px) rotate(0deg);
        border: 5px, solid, black;
    }
    100%{
        transform: scale(100%) translateY(100px) rotate(360deg);
        border: 5px, solid, white;
    }
}

@keyframes scale-up {
    0%{
        transform: scale(10%) translateY(0px) rotate(0deg);
        border: 5px, solid, black;
    }
    100%{
        transform: scale(100%) translateY(-100px) rotate(360deg);
        border: 5px, solid, white;
    }
}

@keyframes scale-left {
    0%{
        transform: scale(10%) translateX(0px) rotate(0deg);
        border: 5px, solid, black;
    }
    100%{
        transform: scale(100%) translateX(-100px) rotate(360deg);
        border: 5px, solid, white;
    }
}

@keyframes scale-right {
    0%{
        transform: scale(10%) translateX(0px) rotate(0deg);
        border: 5px, solid, black;
    }
    100%{
        transform: scale(100%) translateX(100px) rotate(360deg);
        border: 5px, solid, white;
    }
}

/* tablet */
@media screen and (max-width: 900px) {
    .container{
        background: linear-gradient(180deg, thistle, lightgoldenrodyellow);
        background-size: 200% 200%; 
    }
    .circle-up, .circle-down, .circle-left, .circle-right{
        border-radius: 20%;
    }
    
    .inside-circle-up, .inside-circle-down, .inside-circle-left, .inside-circle-right{
        border-radius: 100%;
    }
}
/* phone */
@media screen and (max-width: 600px) {
    .container{
        background: linear-gradient(180deg,thistle, lightgoldenrodyellow);
        background-size: 170% 170%; 
    }
    .circle-up, .circle-down, .circle-left, .circle-right{
        border-radius: 100%;
    }
    
    .inside-circle-up, .inside-circle-down, .inside-circle-left, .inside-circle-right{
        border-radius: 20%;
    }

}