@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Dynamic Topics styling */
:root {
    --font-family-headings: "Quicksand", sans-serif;
    --font-family-body: "Times New Roman", sans-serif;
    --font-family-monospace: "Roboto Mono", "Courier New", monospace;
    --font-size-1: clamp(2rem, 1.7993rem + 0.8451vw, 2.75rem);
    --font-size-2: clamp(1.8rem, 1.6261rem + 0.7324vw, 2.45rem);
    --font-size-3: clamp(1.6rem, 1.4662rem + 0.5634vw, 2.1rem);
    --font-size-4: clamp(1.4rem, 1.293rem + 0.4507vw, 1.8rem);
    --font-size-5: clamp(1.2rem, 1.1331rem + 0.2817vw, 1.45rem);
    --font-size-6: clamp(0.9rem, 0.8732rem + 0.1127vw, 1rem);
    --font-size-body: clamp(0.5rem, 0.9599rem + 0.169vw, 1.05rem);
  }

body :lang("de") :html-lang("en") {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-optical-sizing: auto;
    font-weight: 400;
    line-height: 1.5;
  }

/* body {
    margin: 1em;
    min-height: 100svh;
    min-width: 100svw;
    

    scroll-margin-top: 0;
    padding: 0 1em;
    box-sizing: border-box;
    font-family: 'Roboto', 'Times New Roman', sans-serif;
    font-size: inherit;
    color: black;
} */

/* body {
    margin: 0;
    height: calc(100vh + 13em);
    font-family: 'Roboto', 'Times New Roman', sans-serif;

    scroll-margin-top: 0;
    padding: 0 3em;
    box-sizing: border-box;
    font-family: 'Roboto', 'Times New Roman', sans-serif;
    font-size: inherit;
    color: black;
} */

.topic_card {
    padding: auto;
}

.top_block {
    display: inline;
    color: darkblue;
    min-height: auto;
}


/* body {
    margin: 0;
    height: 105svh;
    width: 100svw;
    

    scroll-margin-top: 0;
    padding: 0 3em;
    box-sizing: border-box;
    font-family: 'Roboto', 'Times New Roman', sans-serif;
    font-size: inherit;
    color: black;
} */

.go_body {
    /* height: 100svh;
    height: 100vh; */
  
    background: url("https://www.ne1.com/someclds.jpg") no-repeat;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    min-height: minmax(svh, calc(dvh-0rem));
}

.button {
    background-color: lightblue;
    border-radius: 7px;
    color: navy;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
}

.logo {
    padding: 1em;
    align-items: left;
    color:blue;
    /* border: 2px solid black; */
  }
  
  .logo h1 span, .logo h4 span .logo h5 span, .logo h6 span {
    color: black;
  }

.media-scroller {
    --_spacer: var(--size-2, 1.44rem);
    display: grid;
    gap: max(var(--_spacer), 1.44em);
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    margin-top: 0;
    padding: 0 var(--_spacer) var(--_spacer);
    min-height: auto;

    overflow-x: auto;
    /* overflow-y: calc(100svh - 30svh); */
    overscroll-behavior-inline: contain;
    /* --_spacer: var(--size-2, 1.44rem);
    display: grid;
    gap: max(var(--_spacer), 1.44em);
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    margin-top: 0; */
    /* margin-bottom: 3rem; */
    /* padding: 0 var(--_spacer) var(--_spacer);
    min-height: auto; */

    /* min-width: none; */
    /* overflow-y: calc(100svh - 10svh); */
    /* overscroll-behavior-inline: contains; */
}

.media-element {
    display: grid;
    grid-template-rows: min-content;
    width: min(900px, 100%-3rem);
    height: calc(100dvh - 7rem);
    margin-inline: auto;
    margin-top: 1em;
    margin-bottom: -4em;
    font-size: clamp(50%, 100%, 150%);
    /* max-height: calc(svh + 0em); */
    max-height: auto;
    gap: 1rem var(--_spacer);
    scrollbar-gutter: stable;
    /* margin: 3rem; */
    /* padding-right: 3rem; */
    padding: 2rem;
   
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

.media-element > img {
    inline-size: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer);
}

.snaps-inline > * {
    scroll-snap-align: start;
}

.intro {
    background: lightyellow;
}
.church7 {
    background: lightgrey;
}
.whats-next {
    background: whitesmoke;
}
.epilogue {
    background: rgb(237, 214, 83);
}

.fv {
    text-indent: 0em;
    font: bold;
    font-style: italic;
}

.i  {
    font-style: italic;
}

.ir {
    font-style: italic;
    font: bold;
    color: red;
}

p span {
    color: black;
}

.pv1 {
    margin-left: 1em;
}
.pv2 {
    margin-left: 2em;
}
.pv3 {
    margin-left: 3em;
}
.pv4 {
    margin-left: 4em;
}
.pv5 {
    margin-left: 5em;
}
.pv6 {
    margin-left: 6em;
}
.pv7 {
    margin-left: 7em;
}

.media-element > iframe {
    position: absolute;
    inline-size: auto;
    writing-mode: horizontal-tb;
}

.media-element > img {
    inline-size: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.media-element > a {
    display: grid;
    place-items: center;
    color: blueviolet;
    border-radius: 7px;
    border: 2px solid blueviolet;
    box-shadow: var(--shadow-2);
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline > * {
    scroll-snap-align: start;
}

/* Original Slider code here. */

/* .media-scroller {
    --_spacer: var(--size-3, 1rem);
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
    grid-auto-columns: 88%;

    padding: 0 var(--_spacer) var(--_spacer);

    overflow-x: auto;
    overscroll-behavior-inline: contain;
} */

/* .media-element {
    display: grid;
    grid-template-rows: min-content;
    gap: var(--_spacer);
    padding: var(--_spacer);
    background: var(--surface-2);
    /* margin-bottom: 1rem; */
    /* background: black; */
    /* border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
} */

/* .media-element > img {
    inline-size: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer);
}

.snaps-inline > * {
    scroll-snap-align: start;
} */