otherworld/sass/screen.scss

.screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.bg {
    z-index: 0;

    background: black url(/sunset.gif) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
    filter: brightness(0.75);
    box-shadow: inset 0 0 512px 128px black;
    transition: 250ms ease;

    @media (max-width:667px) {
        filter: brightness(0.5);
        box-shadow: inset 0 0 128px 32px black;
        background-position-x: 14.5%;
    }
}

.content {
    z-index: 1;
    color: #c1c4c1;
    padding: 40px;

    text-align: center;
    width: 80%;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);

    overflow-y: auto;

    .md-content {
        text-align: left;
    }
}

@keyframes fader-fade {
    0% {
        opacity: 1;
        background: black;
    }
    to {
        opacity: 0;
        pointer-events: none;
    }
}

.fader {
    background: black;
    z-index: 3;

    animation: fader-fade 3s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    p {
        animation: fader-fade 1s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
}