*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#F4E8D8;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
}

.container{
    width:100%;
    max-width:500px;
    padding:40px 25px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo{
    width:220px;
    margin-bottom:50px;
}

.mesa{
    text-align:center;
    color:#C88E56;
    margin-bottom:25px;
}

.mesa span{
    letter-spacing:4px;
    font-size:18px;
}

.mesa h1{
    font-size:80px;
    font-weight:bold;
}

h2{
    color:#C88E56;
    margin-bottom:40px;
    text-align:center;
}

.botao{
    width:100%;
    background:#C88E56;
    color:#ffffff;
    text-decoration:none;
    text-align:center;
    padding:28px 20px;
    border-radius:30px;
    font-size:26px;
    font-weight:bold;
    margin-bottom:25px;
    transition:all .25s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.botao:hover{
    transform:translateY(-2px);
}

.botao:active{
    transform:scale(.97);
}

/* BOTÃO HEINEKEN */

.heineken{
    background:#008C45 !important;
    color:#ffffff !important;

    border:3px solid #ffffff;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    box-shadow:
        0 6px 18px rgba(0,140,69,.35),
        inset 0 1px 0 rgba(255,255,255,.2);
}

.heineken:hover{
    background:#00A651 !important;
    transform:translateY(-3px);
}

.heineken::before{
    content:"";
    width:30px;
    height:30px;

    background-image:url("estrelavermelha.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    display:block;
    flex-shrink:0;
}

.simbolo{
    width:80px;
    margin-top:50px;
    opacity:.9;
}

/* RESPONSIVO */

@media(max-width:500px){

    .logo{
        width:180px;
    }

    .mesa h1{
        font-size:70px;
    }

    .mesa span{
        font-size:16px;
    }

    h2{
        font-size:22px;
    }

    .botao{
        font-size:22px;
        padding:24px 16px;
    }

    .heineken::before{
        width:26px;
        height:26px;
    }
}