:root {
    --font-size-base: 16px;
    --font-family-head: "Roboto", sans-serif;
    --font-family-body: "Open Sans", sans-serif;

    --color-1: #e43f3f;
    --color-2: #f43669;
    --color-3: #8235e6;
    --color-on-1: #FFFFFF;
    --color-on-2: #FFFFFF;
    --color-on-3: #FFFFFF;

    --color-back:      #EFF2EF;
    --color-base-1:    #FFFFFF;
    --color-base-2:    #FEFEFE;
    --color-on-back:   #212121;
    --color-on-base-1: #212121;
    --color-on-base-2: #212121;
    --color-outline-1: #465646;
    --color-outline-2: #586858;

    --z-index-dropdown:           1000;
    --z-index-sticky:             1020;
    --z-index-fixed:              1030;
    --z-index-offcanvas-backdrop: 1040;
    --z-index-offcanvas:          1045;
    --z-index-modal-backdrop:     1050;
    --z-index-modal:              1055;
    --z-index-popover:            1070;
    --z-index-tooltip:            1080;
    --z-index-toast:              1090;

    --scroll-top-height: 3rem;

    --gap-x: 1.0rem;
    --gap-y: 0.5rem;
}
@media (min-width: 48em) { :root{ --font-size-base: 20px; --gap-x: 2.0rem; --gap-y: 1.0rem; } }
@media (min-width: 80em) { :root{ --font-size-base: 24px; --gap-x: 3.0rem; --gap-y: 1.5rem; } }

/* Style */
html {
    scroll-behavior: smooth;
    margin: 0; border: 0; padding: 0;
    font: normal 400 var(--font-size-base)/1.2 var(--font-family-body);
}
h1 { font: normal 600 2.00em/1.5 var(--font-family-head); letter-spacing: normal; }
h2 { font: normal 600 1.75em/1.5 var(--font-family-head); letter-spacing: normal; }
h3 { font: normal 600 1.50em/1.5 var(--font-family-head); letter-spacing: normal; }
h4 { font: normal 600 1.30em/1.5 var(--font-family-head); letter-spacing: normal; }
h5 { font: normal 600 1.15em/1.5 var(--font-family-head); letter-spacing: normal; }
h6 { font: normal 600 1.00em/1.5 var(--font-family-head); letter-spacing: normal; }
h1, h2, h3, h4, h5, h6 {
    margin-block-start: unset; margin-block-end: unset; margin-inline-start: unset; margin-inline-end: unset;
    margin: 1.2rem 0 0.5rem 0; border: 0; padding: 0;
}
p {
    margin-block-start: unset; margin-block-end: unset; margin-inline-start: unset; margin-inline-end: unset;
    margin: 0.7rem 0 0.3rem 0; border: 0; padding: 0;
}
p.title    { font: normal 600 2.00em/1.5 var(--font-family-head); text-align: center; }
p.subtitle { font: italic 600 1.75em/1.5 var(--font-family-head); text-align: center; }
a { text-decoration: none; color: var(--color-1); }
img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }

iframe { border: none; width: 100%; height: 25vh; }
iframe.gdrive_folder { flex-grow: 1; min-height: 12rem; }

blockquote {
    margin: 0.7rem; border: 0; padding: 0;
    color: var(--color-outline-2);
    text-align: right;
    font-family: var(--font-family-head);
}

/* Layout */
[id] { scroll-margin-top: var(--scroll-top-height); }
body {
    display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch;
    margin: 0; border: 0; padding: 0;

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

    overflow-y: show;
    overflow-x: hidden;

    color: var(--color-on-back);
    background: var(--color-back) url("kepek/ZselicAMI_Hatter.png") no-repeat fixed bottom / contain;
}
body > header {
    position: sticky; top: 0; z-index: var(--z-index-fixed);
    display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;
    height: var(--scroll-top-height);
    background: var(--color-base-1); color: var(--color-on-base-1);
}
body > footer {
    margin: auto 0 0 0; border: 0; padding: var(--gap-x) var(--gap-y);
    background: var(--color-on-base-1); color: var(--color-base-1);
}
body > section {
    margin: var(--scroll-top-height) 0;
    padding: var(--gap-y) var(--gap-x);
}

/* Utility */
.cicrle { border-radius: 50%; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-justify { text-align: justify; }

.flex-wrap-before {
    display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch;
    gap: var(--gap-y) var(--gap-x)
}
.flex-wrap-before > :first-child {
    flex: 1 1 50%;
}

@media (min-width: 48em) {
    .flex-wrap-before { flex-flow: row nowrap; justify-content: space-between; }
}

section.dokumentumok { display: flex; flex-flow: column nowrap; }

.logos {
    display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; align-content: flex-start;
    gap: 0.5rem auto;
}
.logos img { height: 5rem; margin: 1rem 0.5rem; }