html,
body {
    margin: 0;
    overflow: hidden;
    background: #1f1f1f;
}

screen-area {
    position: absolute;
    width: 1280px;
    height: 480px;
    overflow: hidden;
}

@media screen and (min-height: 560px) {
    screen-area {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 36px;
        border: 2.5rem solid #060606;
        filter: drop-shadow(0 16px 24px #00000060);
        -webkit-filter: drop-shadow(0 16px 24px #00000060);
    }
}

iframe {
    border: 0;
    margin: 0;
    user-select: none;
    user-zoom: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

#aod-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: 0.75s ease-in;
}

#home-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 0.85s ease-in;
}

#standup-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    transition: 0.85s ease-in;
}

#demo-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    transition: 0.85s ease-in;
}


.home-deactive {
    transform: scale(150%);
    filter: blur(32px);
    -webkit-filter: blur(32px);
    pointer-events: none;
}

.aod-hidden-animate {
    filter: blur(32px);
    -webkit-filter: blur(32px);
    transform: scale(125%);
    opacity: 0.0;
    pointer-events: all;
}

.aod-hidden {
    display: none;
    pointer-events: none;
}