/* ============================= */
/* RESET */
/* ============================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    font-family:

        "Segoe UI",
        Arial,
        sans-serif;

    touch-action:none;

}

/* ============================= */
/* CANVAS */
/* ============================= */

#scene{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    background:#000;

}

/* ============================= */
/* VIÑETA */
/* ============================= */

#overlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(circle,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.55) 100%);

}

/* ============================= */
/* CARTA */
/* ============================= */

#letterContainer{

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%);

    width:min(90vw,650px);

    opacity:0;

    visibility:hidden;

    transition:

        opacity 2s ease,

        transform 2s ease,

        visibility 2s;

    z-index:20;

}

#letterContainer.show{

    opacity:1;

    visibility:visible;

    transform:
        translate(-50%,-50%)
        scale(1);

}

.glass{

    padding:

        40px
        28px;

    border-radius:28px;

    background:

        rgba(255,255,255,.07);

    backdrop-filter:

        blur(18px);

    -webkit-backdrop-filter:

        blur(18px);

    border:

        1px solid rgba(255,255,255,.15);

    box-shadow:

        0 0 50px rgba(255,0,100,.20),

        inset 0 0 20px rgba(255,255,255,.05);

}

.glass h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:20px;

    color:white;

}

#letter{

    color:white;

    font-size:1.15rem;

    line-height:1.8;

    white-space:pre-line;

    text-align:center;

    letter-spacing:.5px;

}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:768px){

    .glass{

        padding:

            28px
            22px;

        border-radius:22px;

    }

    .glass h2{

        font-size:2.3rem;

    }

    #letter{

        font-size:1rem;

        line-height:1.7;

    }

}

@media (max-width:420px){

    #letterContainer{

        width:92vw;

    }

    .glass{

        padding:

            24px
            18px;

    }

    #letter{

        font-size:.95rem;

    }

}