:root {
  --color-white: #f5f1ea;
  --color-black: #090808;
  --color-a1: #144bc4;
  --color-a2: #aa2929;
  --color-a3: #511086;
  --color-purewhite: #fff;
  --color-pureblack: #000;
  --color-primary1: #f0e8bd;
  --color-primary2: #c5bfa0;
  --color-primary3: #b4ad8d;
  --color-primary4: #f5f3e9;
  --color-primary5: #eee9ce;
  --color-accent: #b10b0b;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input {
  background: none;
  border: none;
  outline: none;
}
html {
  overflow-x: hidden;
}
/*
@font-face {
    font-family: 'Libertinus';
    src: url('libertinus/LibertinusSerif-Regular.woff2') format('woff2');
}
*/
@font-face {
  font-family: "Libertinus";
  src: url("LibertinusSerif-Regular.pdf") format("woff2");
}
/*
@font-face {
    font-family: 'Libertinus Italic';
    src: url('libertinus/LibertinusSerif-Italic.woff2') format('woff2');
}
*/
@font-face {
  font-family: "Libertinus Italic";
  src: url("LibertinusSerif-Italic.pdf") format("woff2");
}
/*
@font-face {
    font-family: 'Libertinus Bold';
    src: url('libertinus/LibertinusSerif-Bold.woff2') format('woff2');
}
*/
@font-face {
  font-family: "Libertinus Bold";
  src: url("LibertinusSerif-Bold.pdf") format("woff2");
}
body,
html {
  width: 100%;
}
body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: "Libertinus", Garamond, serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.2rem;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
  font-feature-settings: "ss02";
}
* {
  box-sizing: border-box;
}
a {
  color: var(--color-a1);
}
a:hover {
  color: var(--color-a2);
}
a:visited {
  color: var(--color-a3);
}
a img {
  border: 0;
}
a:focus,
a:active {
  outline: 0;
}
b,
strong {
  font-weight: 400;
  font-family: "Libertinus Bold";
}
i,
em {
  font-family: "Libertinus Italic", Garamond, serif;
}
.sc {
  font-variant-caps: small-caps;
}
.center {
  text-align: center;
}
.small {
  font-size: 75%;
}
#page {
  max-width: 1200px;
  margin: 30px auto;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1), -10px -10px 30px rgba(255, 255, 255, 1);
  background: var(--color-purewhite);
  border-radius: 20px;
}
/* home */
#home #page {
  background: var(--color-primary2);
}
#header h1 {
  margin: 0;
}
#header h1 a {
  display: block;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-primary1);
}
#header h1 a .line1 {
  font-size: 5rem;
  line-height: 5rem;
  text-transform: uppercase;
  color: var(--color-white);
}
#header h1 a .line2 {
  font-size: 1rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 4px;
}
#header h1 a .line3 {
  font-size: 2rem;
  line-height: 2rem;
}
/* article */
#header {
  background: url(images/papp-geza-16-3.jpg) center 65% no-repeat;
  background-size: cover;
  position: relative;
  border-radius: 20px 20px 0 0;
}
.bigheader #header {
  background-image: url(images/papp-geza-16-6.jpg);
  aspect-ratio: 16/6;
  display: flex;
  align-items: center;
  justify-content: center;
}
#nav {
  position: relative;
  clear: both;
  display: flex;
  justify-content: space-evenly;
  background-color: var(--color-primary4);
  background: linear-gradient(var(--color-primary4), var(--color-primary5));
}
#nav a {
  position: relative;
  display: block;
  width: 100%;
  font-variant-caps: small-caps;
  margin: 0;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
}
#nav a div {
  font-size: 22px;
  line-height: 22px;
  padding: 10px;
  text-shadow: 0 0 0 var(--color-white);
  color: var(--color-accent);
  position: relative;
  transition: text-shadow 1s ease;
  background: linear-gradient(var(--color-primary4), var(--color-primary5));
}
#nav a:hover div {
  text-shadow: 0 0 1rem var(--color-accent);
}
#nav a.active div {
  background: linear-gradient(180deg, var(--color-primary4) 0%, var(--color-purewhite) 100%);
  text-shadow: 0 0 0 var(--color-white);
}
#article {
  position: relative;
  clear: both;
  padding: 30px;
  font-size: 1.2rem;
  line-height: 26px;
  text-align: justify;
  hyphens: none;
}
h1,
h2,
h3,
h4 {
  margin-bottom: 26px;
  line-height: 120%;
  color: var(--color-accent);
  hyphens: none;
}
h1 {
  font-size: 250%;
}
h2 {
  font-size: 200%;
}
h3 {
  font-size: 150%;
}
h4 {
  font-size: 125%;
  font-family: "Libertinus Italic", Garamond, serif;
}
sup {
  vertical-align: super;
  font-size: smaller;
}
#article p {
  margin-bottom: 1rem;
}
.text_indent h4,
.notem {
  font-family: "Libertinus", Garamond, serif;
}
.right {
  text-align: right;
}
.smaller {
  font-size: 80% !important;
}
.verysmall {
  font-size: 60%;
}
.bigger {
  font-size: 150% !important;
  line-height: 150% !important;
}
.text_indent p + p {
  text-indent: 26px;
}
.no_indent {
  text-indent: 0 !important;
}
.text_marginbottom p {
  margin-bottom: 26px;
}
.text_marginbottom_small p {
  margin-bottom: 6px;
}
.text_title {
  text-align: center;
  margin-bottom: 52px;
}
.text_title h3,
.text_title h4 {
  margin: 0;
}
.text_title h3::after {
  content: "· ❦ ·";
  color: var(--color-primary3);
  display: block;
  font-size: 16px;
  margin: 6px 0 0 0;
}
#article hr {
  height: 1px;
  border: 0;
  background: var(--color-primary1);
  margin: 52px auto;
  width: 90%;
}
#article hr.small {
  width: 20%;
  margin: 26px auto;
}
.sidebar {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-areas: "article toc";
  gap: 1rem;
}
.sidebar article {
  grid-area: article;
}
#toc {
  font-size: smaller;
  line-height: 120%;
  text-align: left;
  position: sticky;
  top: 2rem;
  align-self: start;
  grid-area: toc;
  background: var(--color-primary4);
  border: 2px solid var(--color-primary1);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.sticky {
  position: sticky;
  top: 0;
}
#toc a:not(:last-child) {
  display: block;
  margin-bottom: 0.5rem;
}
.text_indent_all {
  padding-left: 26px;
}
audio {
  width: 100%;
}
.images,
.image,
.pdf {
  text-align: center;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.image_desc a,
.images a,
.image a,
.pdf a {
  display: inline-block;
  color: var(--color-black);
  text-decoration: none;
  vertical-align: top;
  margin-bottom: 1rem;
}
.images a img,
.image a img,
.pdf a img {
  width: 100%;
  margin: auto;
  height: auto;
  display: block;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 1rem var(--color-primary5);
}
blockquote {
  font-size: 150%;
  line-height: 135%;
  width: 90%;
  margin: 50px auto;
  font-family: "Libertinus Italic", Garamond, serif;
}
blockquote.noem {
  font-family: "Libertinus", Garamond, serif;
}
/* footer */
#footer {
  position: relative;
  clear: both;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-black);
}
#footertext {
  padding-bottom: 30px;
  font-size: 15px;
}
#footer .zti {
  padding: 10px;
}
#footer .zti img {
  width: 300px;
}
/* topic */
/* media queries */
@media screen and (max-width: 767px) {
  #btns a {
    width: 100%;
    height: 100px;
    line-height: 100px;
  }
  #page {
    margin: 0;
    border-radius: 0;
  }
  #nav {
    flex-wrap: wrap;
  }
  #nav a {
    flex-basis: fit-content;
  }
  #nav a div {
    font-size: 14px;
    line-height: 14px;
    padding: 8px;
  }
  #header {
    border-radius: 0;
  }
  #header h1 {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 0;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #header h1 a .line1 {
    font-size: 3rem;
    line-height: 3rem;
  }
  #article {
    padding: 10px;
    text-align: left;
    hyphens: auto;
    font-size: 1rem;
    line-height: 1.2rem;
  }
  .sidebar {
    display: block;
  }
  #toc {
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
  #footertext {
    padding: 10px;
    text-align: center;
    font-size: small;
  }
  .images {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #page {
    margin: 0;
    border-radius: 0;
  }
  #nav a div {
    font-size: 14px;
    line-height: 14px;
  }
  #header > img:first-child {
    display: none;
  }
  #header h1 {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 0;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #header h1 img {
    width: 440px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  #page {
    margin: 0;
    border-radius: 0;
  }
  #nav a div {
    font-size: 18px;
    line-height: 18px;
  }
}