* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background: #000;
    overflow: hidden;
}

body {
    font-family: "Courier New", Courier, monospace;
    color: #fff;
}

#stage {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    background: #000;
}

/* -----------------------------
   TEXT
----------------------------- */

#text-screen {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6vw;

    background: #000;

    opacity: 1;

    transition: opacity 300ms ease;
}

#text {
    width: 100%;

    text-align: center;

    font-size: clamp(24px, 5vw, 82px);
    line-height: 1.25;

    font-weight: 400;
    letter-spacing: 0.04em;

    word-break: normal;
    overflow-wrap: break-word;

    color: #fff;

    user-select: none;
}

/* -----------------------------
   PHOTO
----------------------------- */

#photo-screen {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0ms;
}

#photo-a,
#photo-b {
    position: absolute;

    inset: 0;

    width: 100vw;
    height: 100vh;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;

    opacity: 0;
}

/* -----------------------------
   MOBILE
----------------------------- */

@media (max-width: 600px) {

    #text-screen {
        padding: 10vw;
    }

    #text {
        font-size: clamp(22px, 7vw, 48px);
        line-height: 1.3;
    }
}