body
{
    margin: auto;
    width: 600px;
    background-color: #fcdbde;
}

h2 
{
    font-family: 'Cy', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    color: #fff;
}

/** VERSION MOBILE **/

@media screen and (max-width: 450px) {
    body{
        margin: auto;
        width: 410px;
        background-color: #fcdbde;
    }
}

@media screen and (max-width: 375px) {
    body{
        margin: auto;
        width: 335px;
        background-color:#fcdbde;
    }
}

figure
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

@keyframes goto
{
    0%{
        transform: translateY(0);
    }
    19%{
        transform: translateY(300px);
    }
    24%{
        transform: translateY(180px);
    }
    29%{
        transform: translateY(300px);
    }
    33%{
        transform: translateY(240px);
    }
    39%, 80%{
        transform: translateY(300px);
    }
    100%{
        transform: translateY(0);
    }
}

.btn
{
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background: radial-gradient(
        circle at 70% 20%,
        rgb(100, 100, 168),
        rgb(27, 28, 77)
    );
}

.btn-change
{
    animation: goto 2800ms 200ms ease-in normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}