@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Special+Elite&display=swap');

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

body {
  background-color: gold;
  background-image: url('gold.avif');
  background-size: 150px;
  background-blend-mode: soft-light;
  color: #2d2d2d;
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  /* 35em pro text + 4em pro padding (2em z každé strany) */
  max-width: min(39em, 100vw);
  flex: 1;
  margin-inline: auto;
  padding-block: 2em;
  padding-inline: clamp(0.75em, 4vw, 2em);
  background-color: lightgoldenrodyellow;
  background-image: url(ricepaper.png);
  background-blend-mode: multiply;
  overflow: hidden;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.1),
    /* 1. stín: Tenký a ostrý, tvoří hranu papíru */
    0 10px 20px rgba(0, 0, 0, 0.05);
  /* 2. stín: Měkký a hluboký, tvoří efekt zvednutí */
  /* Volitelné: Jemné zakulacení rohů (papír není nikdy dokonale ostrý) */
  border-radius: 2px;
  min-height: 100%;
}

/* @media (max-width: 768px) {
  main {
    max-width: calc(65ch + 1.5rem);
    padding-inline: 0.75rem; 
  }
}
*/
p {
  margin-block: 1.5em;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  ;
}

em {
  font-style: normal;
  text-decoration: underline;
}

strong {
  font-weight: inherit;
  text-transform: uppercase;
}

.soft-no-break {
  /* aby termín držel na jednom řádku, ale v nouzi se v mezeře zalomil,
     chová se při velkém fontu a úzkém viewportu se lépe než  ,
     je ale nutné zahrnou i závěrčnou tečku, protože zlomený inline-block
     se chová jako block a vyplní celou šířku, no matter what */
  display: inline-block;
}

aside {
  position: relative;
  height: 0;
}

.razitko {
  position: absolute;
  z-index: 23;
  user-select: none;
  pointer-events: none;
  font-family: "Special Elite", monospace;
  font-size: 1.5em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #0B5369;
  transform: rotate(5deg);
  white-space: nowrap;
  overflow: hidden;
  /*  filter: url('resources.svg#razitko');
 */
}

.poznamka {
  font-style: italic;
}

.breton {
  text-align: center;
  text-indent: 2em;
  font-family: fantasy;
  font-size: 2rem;
}