:root {
    --paprika: #a92b25;
    --paprika-dark: #76201d;
    --kek: #164b67;
    --nap: #e9b84b;
    --papir: #fbf3df;
    --tinta: #30241d;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--tinta);
    font-family: Georgia, "Times New Roman", serif;
    background-color: #e9d5a9;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px), radial-gradient(circle at 80% 45%, rgba(105, 70, 30, .12) 0 1px, transparent 1.5px);
    background-size: 17px 17px, 23px 23px;
}

.keret {
    width: min(760px, calc(100% - 32px));
    margin: 32px auto;
    padding: clamp(28px, 6vw, 68px) clamp(22px, 7vw, 78px);
    background: var(--papir);
    border: 12px solid var(--paprika);
    outline: 3px solid var(--nap);
    outline-offset: -20px;
    box-shadow: 0 16px 40px rgba(63, 36, 11, .28);
}

.motívum { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--paprika); font-size: 1.3rem; letter-spacing: .15em; }
.motívum::before, .motívum::after { width: 27%; height: 3px; content: ""; background: repeating-linear-gradient(90deg, var(--kek) 0 7px, var(--nap) 7px 14px); }
.motívum--elso { margin-bottom: 22px; }
.motívum--utolso { margin-top: 22px; }

.zenelejatszo { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 8px 13px 8px 9px; color: var(--kek); background: #f5dfac; border: 2px solid var(--paprika); box-shadow: 3px 3px 0 var(--nap); }
.zenelejatszo button { width: 36px; height: 36px; padding: 0 0 0 2px; color: var(--papir); cursor: pointer; background: var(--paprika); border: 2px solid var(--paprika-dark); border-radius: 50%; font: inherit; line-height: 1; }
.zenelejatszo button:hover, .zenelejatszo button:focus-visible { background: var(--paprika-dark); outline: 3px solid var(--nap); outline-offset: 2px; }

p { max-width: 590px; margin: 0 auto 1.25em; font-size: clamp(1.08rem, 2.5vw, 1.24rem); line-height: 1.7; }
p:first-of-type::first-letter { float: left; margin: .12em .13em 0 0; color: var(--paprika); font-size: 3.6em; font-weight: bold; line-height: .72; }
footer { max-width: 590px; margin: 0 auto; color: var(--kek); }
a { color: var(--paprika-dark); font-weight: bold; text-decoration-color: var(--nap); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover, a:focus-visible { color: var(--paprika); }

@media (max-width: 500px) {
    .keret { margin: 16px auto; border-width: 8px; outline-offset: -14px; }
    .alcim { margin-bottom: 28px; }
}