html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.container {
    transition: 500ms cubic-bezier(0.175, 0.82, 0.265, 1);
    transition-property: scale;
    transform: scale(100%);
}

.duck {
    width: 506px;
    height: 686px;
    background: url(img/animation.png) no-repeat;
    transition: 500ms cubic-bezier(0.175, 0.82, 0.265, 1);
    transition-property: transform, translate;
    transform-origin: 50% 100%;
    transform: scale(100%);
}

.duck:hover{
    transform: scale(104%);
}

.duck:active {
    transform: scale(95%);
}

@media(prefers-color-scheme: light) {
    body {
        background: radial-gradient(50% 50% at 50% 50%, #ffdac3 0%, #ebc4ab 100%);
    }
}

@media(prefers-color-scheme: dark) {
    body {
        background: radial-gradient(50% 50% at 50% 50%, #2e2e67 0%, #12123a 100%);
    }
}