html.poc {
    background: url(img/logo.png);
    background-color: #FEFEFE;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    xbackground-size: auto|length|cover|contain|initial|inherit;
    background-size: contain;
}

:root {
  --xaccent: red;

  --color-primary: #E3BC9A;  /* NUDOS */
  --color-primary-dark: #C89E78;
  --color-primary-hover: #B78C67;

  --color-bg-main: #FAF6F2;
  --color-bg-alt: #F1E4D8;
  --color-bg-dark: #3E2F25;

  --color-text-main: #3E2F25;
  --color-text-secondary: #6B5647;
  --color-text-light: #FFFFFF;

  --color-nudos: #E3BC9A;
  --font-nudos: "Great Vibes", "Dancing Script", cursive;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body > header {
  padding: 0 0.5rem 0.5rem 0.5rem;
}
body > footer {
  margin-top: 0rem;
  padding: 0rem;
}
h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h3 {
  margin-top: 1rem;
}

body > header {
  xbackground-image: url("/img/logo_header.jpg"), url("/img/bgcover.png");
  background-image: url("/img/logo.png");
  background-position: left;
  background-repeat: no-repeat, repeat;
  background-size: contain;
  padding-left: max(5%, 250px);
  background-color: var(--color-bg-main);
}
body > header h1,
body > header h2 {
  font-family: var(--font-nudos);
  font-size: 5rem;
  margin-bottom: 0px;
  color: var(--color-nudos);
}
body > header h2 {
  font-size: 3rem;
}

body > footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
  header > nav a {
    border: 1px solid var(--border);
    padding: 0.1rem 0.5rem;
    text-decoration: none;
    margin: 0 0.2rem 0.5rem 0.2rem;
  }
  body > header {
    background-position: center;
    padding: 0 0.2rem 1rem 0.2rem;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.fullscreen {
    width: 100%;
    height: 100%;
}
footer span.print-url {
    display: none;
}
@media print {
  footer span.print-url {
    display: block;
    font-size: 12px;
    color: gray;
  }
}

body.www_index header,
body.www_index footer {
    display: none;
}


.hero {
  padding: 4rem 1rem;
  text-align: center;
  background: var(--accent-bg);
  border-radius: var(--border-radius);
}

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 1rem;
}
.card {
  padding: 1.5rem;
  background: var(--accent-bg);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease, background 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.15) rotate(3deg);
  background: var(--accent-bg-hover, var(--accent-bg));
}


.dictionary-entry {
  margin: 1rem 0;
  padding: 1.5rem;
  background: var(--accent-bg);
  border-radius: var(--border-radius);
}
.dictionary-entry .lemma {
  font-size: 1.6rem;
  font-weight: 700;
}
.dictionary-entry .origin {
  font-size: 0.9rem;
  color: var(--muted-text);
  margin-left: 0.3rem;
}
.dictionary-entry .grammar {
  font-size: 0.9rem;
  color: var(--muted-text);
}
.dictionary-entry .note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted-text);
  line-height: 1.4;
}
.dictionary-entry .definitions {
  list-style: "→ ";
  padding-left: 1.2rem; /* klein beetje ruimte voor de marker */
  margin: 0px;
}
.dictionary-entry .definitions li {
  xmargin: 0.3rem 0;
}