<!-- GOOGLE FONT -->
<style>

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

:root {

    /* MAIN FONTS */
    --font-1    : "Be Vietnam Pro", sans-serif;
    --font-2    : "Cormorant Garamond", serif;

    /* MONOSPACE */
    --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;

    /* VINTAGE COLORS */
    --wood-dark     : #241b16;
    --wood-medium   : #5b3a29;
    --wood-light    : #c89b6d;
    --paper         : #f8f3eb;
    --glass         : rgba(255,255,255,.08);
}

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

body{
    width:100%;
    height:100vh;

    overflow:hidden;

    font-family:var(--font-1);

    background:#0f1115;

    position:relative;
}

/* ==================================================
BACKGROUND
================================================== */

.bg-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(.48)
    saturate(105%);
}

/* ==================================================
OVERLAY
================================================== */

.overlay{
    position:absolute;
    inset:0;

    background:

    radial-gradient(
    circle at top,
    rgba(200,155,109,.10),
    transparent 40%),

    linear-gradient(
    to bottom,
    rgba(0,0,0,.25),
    rgba(0,0,0,.78));

    z-index:1;
}

/* ==================================================
CLOUD EFFECT
================================================== */

.cloud{
    position:absolute;

    width:500px;
    height:180px;

    background:rgba(255,255,255,.08);

    border-radius:100px;

    filter:blur(40px);

    z-index:2;
}

.cloud-1{
    top:10%;
    left:-30%;

    animation:cloudMove1 28s linear infinite;
}

.cloud-2{
    bottom:5%;
    right:-30%;

    animation:cloudMove2 35s linear infinite;
}

@keyframes cloudMove1{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(180vw);
    }
}

@keyframes cloudMove2{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-180vw);
    }
}

/* ==================================================
CENTER
================================================== */

.language-screen{
    position:relative;
    z-index:5;

    width:100%;
    height:100vh;

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

    padding:20px;
}

/* ==================================================
BOX
================================================== */

.language-box{
    width:420px;

    padding:55px 45px;

    border-radius:34px;

    background:rgba(18,14,12,.45);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);

    text-align:center;

    animation:fadeIn 1.2s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==================================================
LOGO
================================================== */

.logo{
    font-family:var(--font-2);

    color:rgba(255,255,255,.78);

    font-size:52px;
    line-height:1;

    letter-spacing:2px;

    margin-bottom:18px;

    font-weight:600;

    text-shadow:
    0 4px 18px rgba(0,0,0,.45);
}

/* ==================================================
SUBTITLE
================================================== */

.subtitle{
    color:rgba(255,255,255,.78);

    font-size:15px;
    line-height:1.8;

    margin-bottom:38px;

    font-weight:300;

    letter-spacing:.4px;
}

/* ==================================================
BUTTONS
================================================== */

.lang-buttons{
    display:flex;
    justify-content:center;
    gap:22px;
}

.lang-btn{
    width:96px;
    height:96px;

    border:none;
    border-radius:50%;

    font-size:42px;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    transition:.45s ease;

    backdrop-filter:blur(10px);

    box-shadow:
    0 8px 24px rgba(0,0,0,.22);
}

.lang-btn:hover{
    transform:translateY(-6px) scale(1.08);

    background:rgba(200,155,109,.18);

    border-color:rgba(200,155,109,.28);

    box-shadow:
    0 18px 40px rgba(0,0,0,.35);
}

.lang-btn:active{
    transform:scale(.92);
}

/* ==================================================
MOBILE
================================================== */

@media(max-width:768px){

    .language-box{
        width:100%;
        padding:40px 25px;
    }

    .logo{
        font-size:42px;
    }

    .subtitle{
        font-size:14px;
    }

    .lang-btn{
        width:82px;
        height:82px;

        font-size:34px;
    }

}

</style>