html, body {
    height: 100%;
    width: 100%;;
}
body {
    background-color: black;
    margin: 0;
}

svg {
    position: absolute;
}

p {
    position: absolute;
}

canvas {
    position: absolute;
}

rect {
    animation-duration: 8s;
    animation-name: palkki;
    animation-iteration-count: infinite;
    /** Ajetaan samaa animaatiota molempiin suuntiin */
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

#pingviini1 {
    animation-name: pingviini1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
#pingviini2 {
    animation-name: pingviini2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

canvas {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: start;
}
#osa1 {
    animation-name: osa1;
}
#osa2 {
    animation-name: osa2;
}#osa3 {
    animation-name: osa3;
}
#osa4 {
    animation-name: osa4;
}

@keyframes palkki {
    from {
        transform: translateX(0%);
    }

    to {
        /** 110, jotta palkit menisivät ulos näytöstä*/
        transform: translateX(110%);
    }
}

/** Pingviinit */
@keyframes pingviini1 {
    from {
        transform: translate(0%, 0%);
    }

    50% {
        transform: translate(calc(50% - 5em / 2), calc(100% - 5em));
    }

    to {
        transform: translate(calc(100% - 5em), 0%);
    }
}

@keyframes pingviini2 {
    from {
        transform: translate(calc(100% - 5em), calc(100% - 5em));
    }

    50% {
        transform: translate(calc(50% - 5em / 2), 0%);
    }

    to {
        transform: translate(0%, calc(100% - 5em));
    } 
}

/** Pöllöt */
@keyframes osa1 {
    from {
        transform: translate(0vw, 0vh);
    }

    to {
        transform: translate(calc(50vw - 281px), calc(50vh - 275px));
    }
}

@keyframes osa2 {
    from {
        transform: translate(calc(100vw - 281px), 0vh);
    }

    to {
        transform: translate(50vw, calc(50vh - 275px));
    }
}

@keyframes osa3 {
    from {
        transform: translate(0vw, calc(100vh - 275px));
    }

    to {
        transform: translate(calc(50vw - 281px), 50vh);
    }
}

@keyframes osa4 {
    from {
        transform: translate(calc(100vw - 281px), calc(100vh - 275px));
    }

    to {
        transform: translate(50vw, 50vh);
    }
}

.stop1 {
    stop-color: black;
}

.stop2 {
    stop-color: cyan;
}

.stop3 {
    stop-color: lime;
}

.hidden {
    visibility: hidden;
}