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

html,
body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;

    background:#000;
    color:#fff;

    font-family:'Inter',sans-serif;
}

/* ========================= */
/* VIDEO DE FUNDO */
/* ========================= */

#bg{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;
}

/* ========================= */
/* CAMADA ESCURA */
/* ========================= */

.overlay{
    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(0,0,0,.15),
    rgba(0,0,0,.95)),
    rgba(0,0,0,.45);

    z-index:1;
}

/* ========================= */
/* EFEITO DE RUÍDO */
/* ========================= */

.noise{
    position:fixed;
    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index:2;
}

/* ========================= */
/* CONTEÚDO */
/* ========================= */

main{

    position:relative;
    z-index:3;

    width:min(90%,900px);
    min-height:100vh;

    margin:auto;

    padding:clamp(25px,5vw,70px);

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

    text-align:center;
}

/* ========================= */
/* OLHO */
/* ========================= */

.eye{

    width:clamp(90px,15vw,150px);

    margin-bottom:clamp(20px,4vw,40px);

    animation:pulse 5s ease-in-out infinite;

    filter:
    drop-shadow(0 0 20px rgba(255,255,255,.25))
    drop-shadow(0 0 40px rgba(255,255,255,.15));
}

/* ========================= */
/* TEXTO SUPERIOR */
/* ========================= */

.top{

    color:#a0a0a0;

    font-size:clamp(10px,1vw,14px);

    letter-spacing:.55em;

    margin-bottom:20px;

    text-transform:uppercase;
}

/* ========================= */
/* TÍTULO */
/* ========================= */

h1{

    font-family:'Cinzel',serif;

    font-size:clamp(2.8rem,8vw,6rem);

    letter-spacing:.15em;

    line-height:1.1;

    text-shadow:

    0 0 12px rgba(255,255,255,.7),

    0 0 40px rgba(255,255,255,.25);

    transition:.4s;
}

/* ========================= */
/* DESCRIÇÃO */
/* ========================= */

.description{

    margin-top:35px;

    width:100%;
    max-width:700px;

    color:#d5d5d5;

    font-size:clamp(.95rem,2vw,1.15rem);

    line-height:1.9;
}

/* ========================= */
/* LINHA */
/* ========================= */

.line{

    width:min(240px,60%);

    height:1px;

    background:#555;

    margin:45px 0;
}

/* ========================= */
/* RODAPÉ */
/* ========================= */

.bottom{

    color:#9d9d9d;

    font-size:clamp(.7rem,.9vw,.9rem);

    letter-spacing:.45em;

    text-transform:uppercase;
}

/* ========================= */
/* ANIMAÇÕES */
/* ========================= */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.07);

    }

    100%{

        transform:scale(1);

    }

}

/* ========================= */
/* TABLET */
/* ========================= */

@media (max-width:768px){

    main{

        padding:35px 20px;

    }

    .description{

        line-height:1.75;

    }

}

/* ========================= */
/* CELULAR */
/* ========================= */

@media (max-width:480px){

    .top{

        letter-spacing:.3em;

    }

    .bottom{

        letter-spacing:.25em;

    }

    .description{

        font-size:.95rem;

    }

    .line{

        width:55%;

    }

}