.background-cover {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.hellcatraz-splash-font {
    font-family: 'foo', 'Consolas', 'Calibri', 'Arial';
    font-size: 8vmin;
    color: #FD8000;
    text-align: center;
    line-height: 6.5vmin;
}

#splash-screen {
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    @media @portrait {
        background: url('../assets/splashscreen/splash_screen_background_portrait.png') center no-repeat;
        background-size: cover;
    }

    @media @landscape {
        background: url('../assets/splashscreen/splash_screen_background_landscape.png') center no-repeat;
        background-size: cover;
        background-position-y: 75%;
    }

    .flex-container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-flow: row wrap;
        align-content: space-around;

        @media (max-aspect-ratio: 1/1) {
            align-content: space-between;
        }

        .splash-flex-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-flow: row wrap;
            align-content: space-around;
            width: 100%;

            &.logo {
                height: 16%;

                img.logo {
                    position: absolute;
                    height: 11%;
                    left: 50%;
                    transform: translate(-50%);

                    @media (max-aspect-ratio: 1/1) {
                        position: relative;
                        left: auto;
                        transform: none;
                        height: auto;
                        width: 80vw;
                    }
                }

                @media (max-aspect-ratio: 1/1) {
                    height: 26vw;
                    padding-top: 13vw;
                    margin: 0px;
                }
            }

            &.frames {
                position: relative;
                height: 60%;

                @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
                    height: 39vw;
                }

                @media (max-aspect-ratio: 1/1) {
                    flex-flow: column;
                    height: ~"calc(100% - 38vw)";
                    padding-top: 2vw;
                    padding-bottom: 2vw;
                    margin: 0px;

                    :nth-child(1) {
                        order: 1;
                    }

                    :nth-child(3) {
                        order: 2;
                    }
                }

                .splash-flex-column {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: start;
                    height: 100%;
                    margin-top: 0px;
                    margin-bottom: 0px;

                    :nth-child(1) {
                        order: 0;
                    }

                    &.frame {
                        position: relative;

                        @media (max-aspect-ratio: 1/1) {
                            margin-bottom: 1em;
                        }

                        &.left {
                            @media (min-aspect-ratio: 1/1) {
                                margin-left: 1vw;
                            }
                        }

                        &.right {
                            @media (min-aspect-ratio: 1/1) {
                                margin-right: 1vw;
                            }
                        }

                        .frame-overlay {
                            background: url('../assets/splashscreen/splash_screen_frame_upper.png');
                            -webkit-background-size: contain;
                            -moz-background-size: contain;
                            -o-background-size: contain;
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position-x: center;
                            background-position-y: top;
                            left: 0px;
                            z-index: 101;
                        }

                        .video {
                            position: absolute;
                            z-index: 100;
                            top: 0px;
                            left: 0px;
                            visibility: hidden;

                            &.ready {
                                visibility: visible;
                            }
                        }

                        .video-fallback {
                            .video;
                            visibility: visible;

                            &.left {
                                background: url('../assets/splashscreen/base_game_example_PH.png');
                                -webkit-background-size: contain;
                                -moz-background-size: contain;
                                -o-background-size: contain;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position-x: center;
                                background-position-y: top;
                            }

                            &.right {
                                background: url('../assets/splashscreen/free_spins_example_PH.png');
                                -webkit-background-size: contain;
                                -moz-background-size: contain;
                                -o-background-size: contain;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position-x: center;
                                background-position-y: top;
                            }
                        }

                        .splash-screen-explanation {
                            background: url('../assets/splashscreen/splash_screen_frame_lower.png');
                            -webkit-background-size: contain;
                            -moz-background-size: contain;
                            -o-background-size: contain;
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position-x: center;
                            background-position-y: top;
                            margin-top: -6%;

                            .hellcatraz-splash-font;
                            color: white;

                            div {
                                visibility: hidden;
                            }
                        }
                    }

                    &.cascades {
                        width: 34vh;
                        justify-content: flex-start;
                        margin: -7vh 3% 0 3%;

                        @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
                            width: 22vw;
                        }

                        @media (max-aspect-ratio: 1/1) {
                            width: 80vw;
                            margin: 0px;
                            margin-bottom: 3vw;
                            height: 5vw;
                            justify-content: center;
                        }

                        .splash-flex-row.cascades {
                            width: unset;

                            .hellcatraz-splash-font;
                            font-size: 7vh;
                            text-shadow: 0 0.08em 0.05em #000000;

                            @media only screen and (min-width: 1280px) {
                                -webkit-text-stroke-width: 1px;
                                -webkit-text-stroke-color: #5f2910;
                            }

                            @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
                                font-size: 4.6vw;
                            }

                            @media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 1/3) {}

                            @media (max-aspect-ratio: 1/3) {
                                font-size: 10vw;
                                line-height: 8vw;
                            }
                        }
                    }
                }
            }

            &.continue {
                .hellcatraz-splash-font;
                width: 100%;
                margin-top: -7vh;
                font-size: 6vmin;

                @media only screen and (min-width: 1280px) {
                    -webkit-text-stroke-width: 1px;
                    -webkit-text-stroke-color: #5f2910;
                }

                text-shadow: 0 0.08em 0.05em #000000;
                text-align: center;

                @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
                    font-size: 4vw;
                }

                @media (max-aspect-ratio: 1/1) {
                    height: 15vw;
                    padding-bottom: 10vw;
                    margin: 0px;
                }
            }
        }
    }
}