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

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

html{
    width:100%;
    height:100%;
}

body{

    width:100%;
    height:100vh;

    overflow:hidden;

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

    background:#F8F2E8;

    font-family:"Cinzel",serif;

    position:relative;

    color:#B67A21;

}

/* ===========================
   TEXTURA DO PAPEL
=========================== */

body::before{

    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(circle at center,
    rgba(255,255,255,.65),
    rgba(248,242,232,.96) 65%),

    repeating-radial-gradient(

    circle at center,

    rgba(184,132,39,.012) 0px,
    rgba(184,132,39,.012) 3px,

    transparent 12px,
    transparent 32px

    );

    opacity:.95;

}

.paper{

    position:absolute;

    inset:0;

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

    opacity:.13;

    pointer-events:none;

}

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

main{

    position:relative;

    z-index:2;

    width:100%;

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

    text-align:center;

    transform:translateY(-45px);

    animation:fadeIn 1.2s ease;

}

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

.logo{

    width:320px;

    max-width:45vw;

    margin-bottom:22px;

    animation:float 8s ease-in-out infinite;

}

.logo img{

    width:100%;
    height:auto;

    display:block;

}

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

h1{

    font-size:72px;

    font-weight:400;

    letter-spacing:18px;

    color:#B67A21;

    margin-bottom:18px;

}

/* ===========================
   SUBTÍTULO
=========================== */

.subtitle{

    font-size:22px;

    letter-spacing:10px;

    color:#C79A58;

    opacity:.75;

    margin-bottom:60px;

}

/* ===========================
   BOTÃO
=========================== */

.construction{

    display:inline-flex;

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

    padding:20px 70px;

    background:rgba(182,122,33,.08);

    border:1px solid rgba(182,122,33,.06);

    backdrop-filter:blur(12px);

    font-family:Arial,Helvetica,sans-serif;

    font-size:18px;

    font-weight:700;

    letter-spacing:7px;

    color:#B67A21;

    transition:.35s;

}

.construction:hover{

    background:rgba(182,122,33,.13);

    transform:translateY(-2px);

}

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

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(-45px);

    }

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===========================
   RESPONSIVO
=========================== */

@media (max-width:1024px){

    .logo{

        width:270px;

    }

    h1{

        font-size:58px;
        letter-spacing:14px;

    }

}

@media (max-width:768px){

    main{

        transform:translateY(-20px);

    }

    .logo{

        width:210px;

        max-width:70vw;

    }

    h1{

        font-size:40px;

        letter-spacing:10px;

    }

    .subtitle{

        font-size:16px;

        letter-spacing:6px;

        margin-bottom:40px;

    }

    .construction{

        padding:16px 42px;

        font-size:14px;

        letter-spacing:4px;

    }

}

@media (max-width:480px){

    .logo{

        width:170px;

    }

    h1{

        font-size:30px;

        letter-spacing:6px;

    }

    .subtitle{

        font-size:13px;

        letter-spacing:4px;

    }

    .construction{

        width:90%;

        max-width:320px;

        padding:16px;

        font-size:13px;

        letter-spacing:3px;

    }

}