:root {
  /* Pentatonic scale: https://spencermortensen.com/articles/typographic-scale */
  --font-size-inc-7: 4em;
  --font-size-inc-6: 3em;
  --font-size-inc-5: 2em;
  --font-size-inc-4: 1.7511em;
  --font-size-inc-3: 1.5157em;
  --font-size-inc-2: 1.3195em;
  --font-size-inc-1: 1.1487em;
  --font-size-base: 1em;
  --font-size-dec-1: 0.8706em;
  --font-size-dec-2: 0.7579em;
  --font-size-dec-3: 0.6599em;
  --font-size-dec-4: 0.5745em;
  --font-size-dec-5: 0.5em;

  /* Colors */
  --color-back: #FFF;
  --color-surface: #EFE8E0;
  --color-primary: #F89921;
  --color-secondary: #231F20;

  --color-on-back: #231F20;
  --color-on-surface: #231F20;
  --color-on-primary: #000;
  --color-on-secondary: #FFF;

  --color-info: var(--color-surface);
  --color-warn: var(--color-surface);
  --color-error: var(--color-surface);

  --color-on-info: #44B;
  --color-on-warn: #AA0;
  --color-on-error: #B44;

  --color-link: #DE8007;
  --color-link-hover: #F89921;
  --color-link-active: #F89921;
  --color-link-visited: #AD6306;

  --top-bar-height: 3em;

  --swiper-theme-color: var(--color-primary) !important;
}

@font-face {
  font-family: "AntPoltLt";
  font-weight: normal;
  src: url('fonts/AntPoltLt-Regular.ttf') format("truetype");
}
@font-face {
  font-family: "AntPoltLt";
  font-weight: bold;
  src: url('fonts/AntPoltLt-Bold.ttf') format("truetype");
}
@font-face {
  font-family: "AntPoltLt";
  font-style: italic;
  src: url('fonts/AntPoltLt-Italic.ttf') format("truetype");
}
@font-face {
  font-family: "AntPoltLt";
  font-weight: bold;
  font-style: italic;
  src: url('fonts/AntPoltLt-BoldItalic.ttf') format("truetype");
}

html {
  margin: 0;
  border: 0;
  padding: 0;

  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;

  margin: 0;
  border: 0;
  padding: 0;

  min-width: 320px;
  min-height: 100vh;

  box-sizing: border-box;

  color: var(--color-on-back);
  background-color: var(--color-back);
}
body._ {
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;

  border-width: 36px;
}
body._ > hr {
  width: 100%;
  border: 0;
}
body._ > img {
  min-width: 240px;
  min-height: 240px;
  max-width: 80%;
  max-height: 640px;
}
body._ > a {
  margin: 1em;
  border: 0;
  border-radius: 0.5em;
  padding: 1em;

  box-shadow: 0 0 1em var(--color-on-back);

  width: 320px;

  font-family: "AntPoltLt", serif;
  font-weight: bold;
  font-size: var(--font-size-inc-1);

  text-align: center;
  text-decoration: none;

  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

.csipke-ki {
  border-image-source: url(icons/csipke-ki.png);
  border-image-slice: 120 fill;
  border-image-repeat: repeat;
  border-style: solid;
}
.csipke-be {
  border-image-source: url(icons/csipke-be.png);
  border-image-slice: 120 fill;
  border-image-repeat: repeat;
  border-style: solid;
}

#header {
  z-index: 100;
  display: flex;

  position: sticky;
  top: 0;

  height: var(--top-bar-height);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}
#header_logo {
  height: 100%;
  transform: scale(0.8);
}
#header.csipke-ki {
  border-width: 0 0 var(--font-size-inc-6) 0;
  background-color: transparent;
}
#nav_top {
  margin-left: auto;

  width: var(--top-bar-height);
  height: var(--top-bar-height);
  transform: scale(0.8);
}
#menu-toggle {
  width: var(--top-bar-height);
  height: var(--top-bar-height);
  transform: scale(0.8);

  background-image: url(icons/menu.svg);
}

#menu {
  z-index: 90;
  display: none;

  flex-direction: column;

  position: fixed;
  top: var(--top-bar-height);
  right: 0;

  margin: 0;
  background-color: var(--color-primary);
}
#menu-state { display: none; }
#menu-state:checked + #menu {
  display: flex;
}
#menu > a {
  margin: 7px 12px;
  color: var(--color-on-primary);
  font-family: "AntPoltLt", serif;
  font-weight: bold;
  font-size: var(--font-size-inc-3);
  line-height: var(--font-size-inc-3);
  text-decoration: none;
}

#footer {
  margin: auto 0 0 0;
  border-top: 1px solid var(--color-primary);

  color: var(--color-on-primary);
  background-color: var(--color-primary);
}
#footer.csipke-ki {
  border-width: var(--font-size-inc-5) 0 0 0;
  background-color: transparent;
}
#footer a {
  color: var(--color-on-primary);
}

.kapcsolat { display: flex; }
.kapcsolat img { margin-right: 1rem; height: var(--font-size-inc-2); }

/* [id] {
  scroll-margin-top: var(--top-bar-height);
} */

/* Element resets */
h1, h2, h3 {
  margin: 5mm 2mm 1mm 2mm;
  border: 0;
  padding: 0;
  font-family: "AntPoltLt", serif;
  font-weight: bold;
  font-size: var(--font-size-inc-2);

  text-align: center;
}

h4, h5, h6 {
  margin: 3mm 2mm 1mm 2mm;
  border: 0;
  padding: 0;
  font-family: "AntPoltLt", serif;
  font-size: var(--font-size-inc-1);
  font-weight: bold;
}

p {
  margin: 2mm;
  border: 0;
  padding: 0;
}

video {
  width: 100%;
}

iframe {
  border: 0;
  width: 100%;
}

section {
  margin: 3px auto;
  border: 0;
  padding: 0;

  width: 100%;

  clear: both;
}
section a         { color: var(--color-link); }
section a:hover   { color: var(--color-link-hover); }
section a:active  { color: var(--color-link-active); }
section a:visited { color: var(--color-link-visited); }

article {
  clear: both;
}

.quotes {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
}

blockquote {
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 1em var(--color-on-back);

  color: var(--color-on-surface);
  background-color: var(--color-surface);
}

.ar-16_10 { position: relative; overflow: hidden; padding-top: 65.5%; }
.ar-16_9  { position: relative; overflow: hidden; padding-top: 56.25%; }
.ar-4_3   { position: relative; overflow: hidden; padding-top: 75%; }
.ar-3_2   { position: relative; overflow: hidden; padding-top: 66.66%; }
.ar-3_1   { position: relative; overflow: hidden; padding-top: 33.33%; }
.ar-2_1   { position: relative; overflow: hidden; padding-top: 50%; }
.ar-1_1   { position: relative; overflow: hidden; padding-top: 100%; }
[class^="ar-"] > iframe,
[class*=" ar-"] > iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

.swiper {
  max-height: 40vh;
}
.swiper-slide {
  object-position: center;
}

.nevjegyek {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}
.nevjegyek > hr {
  width: 100%;
  border: 0;
}

.nevjegy {
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 1em var(--color-on-back);

  width: 100%;

  color: var(--color-on-surface);
  background-color: var(--color-surface);
}
.nevjegy_nev {
  font-weight: bold;
}

.fl { float: left;  margin: 7px 7px 7px 0; }
.fr { float: right; margin: 7px 7px 7px 0; }

@media (min-width: 761px) {
  html { font-size: 20px; }
  #footer { padding: 2rem; }


  body > section {
    margin: 12px auto;
  }

  #menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: initial;

    height: var(--top-bar-height);
  }
  #menu-toggle { display: none; }

  blockquote { width: 300px; }
  .nevjegy { width: 300px; }
}

@media (min-width: 1201px) {
  html { font-size: 22px; }
  #footer { padding: 3rem; }

  #menu {
    justify-content: space-evenly;
  }

  body > section {
    margin: 12px auto;
  }

  h1, h2, h3 { margin: 7mm 3mm 2mm 3mm; }
  h4, h5, h6 { margin: 5mm 3mm 2mm 3mm; }
  p { margin: 5mm; }

  blockquote { width: 400px; }
  .nevjegy { width: 400px; }
}