.fun {
    display: none;
    /*display: flex;*/
}

.success-gif {
    transition: opacity 1s;
    opacity: 0;

    position: absolute;

    bottom: 2rem;
    right: 2rem;

    max-width: 7rem;
}

.success-gif.success-gif-fade {
    opacity: 1;
}

header #header-reindeer {
    pointer-events: none;
    max-height: 5rem;

    position: relative;
    top: -0.5rem;
}

#ornaments {
    pointer-events: none;
    position: absolute;

    width: 5rem;

    left: 0.5rem;
    top: 54px;
}

#fir-wreath {
    pointer-events: none;
    position: absolute;

    top: 0.5rem;
    left: 50%;

    transform: translate(-50%, 0);

    width: 6rem;
}

#christmas-tree {
    pointer-events: none;
    position: absolute;

    width: 10rem;

    left: 0;
    bottom: 1.5rem;
}

#fairy-lights {
    pointer-events: none;
    position: absolute;
    width: 20rem;

    z-index: 2;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    bottom: 2.3rem;
    right: 0.1rem;

    transform: rotate(-13.37deg);
}

#fun-underlay {
    position: absolute;
    width: 100%;
    height: 100%; /*note: cl: full height*/
    z-index: -1;

    padding: 0 0 0 0;
    margin: 0 0 0 0;

    background-image: url("images/merry-christmas.gif");
    background-size: contain;

    text-align: center;

    flex-flow: row wrap;
    align-items: center;
    justify-content: center;

    font-size: 64px;
}

#fun-underlay > .fun-red {
    color: rgb(255, 0, 0, 0.5);
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}

#fun-underlay > .fun-white {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}

#fun-underlay > .fun-green {
    color: rgba(0, 143, 0, 0.5);
    font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}

@media only screen and (max-width: 20rem) {
    .fun#ornaments, .fun#fir-wreath {
        display: none !important;
    }
}

@media only screen and (max-height: 40rem) {
    .fun#christmas-tree, .fun#fairy-lights {
        display: none !important;
    }
}