@keyframes monkey-rescale {
    0% {
        transform: scale(0.85);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.85);
    }
}

@keyframes spin {
	from {
        transform: rotate(0deg);
    }
	to {
        transform: rotate(360deg);
    }
}

@keyframes fall {
    from {
        top: -40%;
    }
    to {
        top: 140%;
    }
}

body {
    overflow: hidden;
}

#monkey-wrapper {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -5; /* Under header */
    display: grid;

    background: #e4000f;
    background: radial-gradient(circle,rgba(228, 0, 15, 1) 0%, rgba(77, 1, 23, 1) 100%);
}

#monkey {
    /* Place monkey in centre of the screen */
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;

    max-width: 350px;
    max-height: 350px;
    width: 60%;
    height: 60%;
    object-fit: contain;

    z-index: 10;

    animation: monkey-rescale 2.5s ease 0s infinite;
}

#sunrays {
    /* Place rays in centre of the screen (stacked with the monkey) */
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;

    background: url("/static/media/sunrays.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    max-width: 700px;
    max-height: 700px;
    width: 100%;
    height: 100%;

    animation: spin 10s linear 0s infinite;
}

.falling-monkey {
    position: absolute;
    z-index: -5;

    animation-name: fall;
    animation-timing-function: linear;
    animation-fill-mode: both;
}