body{

    font-family:'Lora', Georgia, serif;

    background:
        radial-gradient(circle at 20% 10%, rgba(216,184,93,.10), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(200,60,70,.06), transparent 40%),
        #efe2c2;

    color:#3f2e20;

    min-height:100vh;

    padding:60px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

/* ===========================
      BILHETE
=========================== */

.bilhete{

    position:relative;

    max-width:640px;

    width:100%;

    background:#fffdf8;

    padding:60px 50px 45px;

    border-radius:4px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    transform:rotate(-.6deg);

    animation:entrada .8s ease;

}

/* fita adesiva segurando o bilhete */
.bilhete::before{

    content:"";

    position:absolute;

    top:-14px;

    left:50%;

    width:110px;

    height:28px;

    background:rgba(216,184,93,.35);

    transform:translateX(-50%) rotate(2deg);

}

.bilhete p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:20px;

    text-align:justify;

}

/* segundo recado, escrito depois */
.bilhete .depois{

    margin-top:35px;

    padding-top:25px;

    border-top:1px dashed rgba(139,94,60,.35);

    font-style:italic;

    color:#6d5a4c;

}

/* ===========================
      VOLTAR
=========================== */

.voltar{

    margin-top:40px;

    font-family:'Playfair Display', serif;

    font-style:italic;

    font-size:16px;

    color:#8b5e3c;

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:color .3s, border-color .3s;

}

.voltar:hover{

    color:#5a3e2b;

    border-bottom-color:rgba(139,94,60,.45);

}

/* foco pelo teclado (não aparece no clique do mouse) */

a:focus-visible{

    outline:3px solid #8b5e3c;

    outline-offset:4px;

}

@keyframes entrada{

    from{ opacity:0; transform:translateY(25px) rotate(-.6deg); }
    to{ opacity:1; transform:translateY(0) rotate(-.6deg); }

}

@media(max-width:700px){

    .bilhete{ padding:45px 26px 35px; }

    .bilhete p{ font-size:15.5px; }

}