:root {
    /* set of fonts */
    --font1: "Merriweather", serif;
    --font2: "Merriweather sans", sans-serif;
    --font3: "Times New Roman", serif;
    --font4: "Oswald", sans-serif;
    --font5: "Quicksand", sans-serif;
    --font6: "Lato", sans-serif;
    --font7: "Open Sans", sans-serif;
    --font8: "Roboto", sans-serif;

    /* set of font-sizes */
    --size-tiny: 0.7rem;
    --size-smaller: 0.8rem;
    --size-small: 0.9rem;
    --size-normal: 1rem;
    --size-big: 1.2rem;
    --size-bigger: 1.3rem;
    --size-large: 1.5rem;
    --size-larger: 1.7rem;
    --size-xlarge: 2.0rem;
    --size-huge: 3.0rem;

    /* modifiable text styles */
    --titlecolor: rgb(145, 2, 2);
    --titlefont: var(--font1);
    --titlesize: var(--size-large);
    --headingcolor: rgb(145, 2, 2);
    --headingfont: var(--font1);
    --headingsize: var(--size-bigger);
    --subheadingcolor: rgb(145, 2, 2);
    --subheadingfont: var(--font6);
    --subheadingsize: var(--size-big);
    --textcolor: black;
    --textfont: var(--font2);
    --textsize: var(--size-normal);
    --text1color: black;
    --text1font: var(--font2);
    --text1size: var(--size-normal);
    --text2color: orange;
    --text2font: var(--font4);
    --text2size: var(--size-normal);
    --text3color: blue;
    --text3font: var(--font7);
    --text3size: var(--size-normal);
    --navcolor: yellow;
    --navfont: var(--font1);
    --navsize: var(--size-normal);
    --footerfont: var(--textfont);
    --footercolor: green;
    --footersize: 1rem;
    --linkcolor: darkblue;
    --linkfont: var(--font-1);

    /* color set */
    --cset-1: white;
    --cset-2: white;
    --cset-3: white;
    --cset-4: white;
    --cset-5: white;
    --cset-6: white;
    --cset-7: white;
    --cset-8: white;
    --cset-9: white; 
    --cset-10: white;
    --cset-11: white; 
    --cset-12: white;
    --cset-13: white; 
    --cset-14: white;
    --cset-15: white; 
    --cset-16: white;
    --cset-17: white; 
    --cset-18: white;
    --cset-19: white; 
    --cset-20: white;
    --cset-21: white;
    --cset-22: white;
    --cset-23: white;
    --cset-24: white;
    --cset-25: white;
    --cset-26: white;
    --cset-27: white;
    --cset-28: white;
    --cset-29: white;
    --cset-30: white;

    /* modifiable background styles */
    --pagecolor: white;
    --headercolor: white;
    --herostartbackground: rgb(26, 98, 26);
    --heroendbackground: rgb(198, 255, 226);
    --blockcolor: grey;
    --footercolor: white;
    --navcolor: grey;
    --transparentbackground: rgba(0,0,0,0);

    /* modifiable border colors */
    --border1color: grey;
    --border2color: var(--titlecolor);
    --blockeditcolor: grey;
    --groupeditcolor: grey;
    --elementeditcolor: grey;
    --editselectioncolor: red;

    /* box shadow options */
    --shadow: none;
    --shadow1: 5px 5px 5px var(--border1color);
    --shadow2: 5px 5px 5px var(--border2color);

    /* border options */
    --border: none;
    --border1: 1px solid var(--border1color);
    --border2: 7px solid var(--border1color);


    /* modifiable borders and shadows */
    --blockborder: var(--border);
    --blockshadow: var(--shadow);
    --heroborder: var(--border);
    --heroshadow: var(--shadow);

    /* modifiable gap and radius */
    --blockgap: 10;
    --blockradius: 0;
    --blockpadding: 0px;

    /* other modifiable values */
    --pagewidth: 600px;

    --selecteditemcolor: rgb(149, 0, 0);
    --newsbackground: var(--blockcolor);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, b, big, cite, code,
del, dfn, em, font, i, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
}

* {
    box-sizing: border-box;
}

h1,h2,h3 { 
    font-weight: 600; 
    margin-top: 0px;
    margin-bottom: 5px;
}

h1 { 
    width: 100%; 
    /* padding: 10px; */
    /* text-align: center; */
    color: var(--titlecolor);
    font-family: var(--titlefont);
    font-size: var(--titlesize);
}

h2 { 
    color: var(--headingcolor);
    font-family: var(--headingfont);
    font-size: var(--headingsize);
    /* padding-top: 10px; */
}

h3 { 
    color: var(--subheadingcolor);
    font-family: var(--subheadingfont); 
    font-size: var(--subheadingsize);
}

p { 
    margin-bottom: 0.2em; 
    font-family: var(--textfont);
    font-size: var(--textsize);
    color: var(--textcolor)
}

a { color: var(--linkcolor); 
    /* font-family:var(--linkfont); */
    text-decoration: none; 
}


body {
    margin: 0 auto;
    padding: 2%;
    background-color: var(--pagecolor); 
    max-width: calc(var(--pagewidth) * 1px);
}

.text { 
    color: var(--textcolor); 
    font-family: var(--textfont);
    font-size: var(--textsize);
}

.text1 {
    color: var(--text1color);
    font-family: var(--text1font);
    font-size: var(--text1size);
}

.text2 { 
    color: var(--text2color);
    font-family: var(--text2font);
    font-size: var(--text2size);
}

.text3 {
    color: var(--text3color);
    font-family: var(--text3font);
    font-size: var(--text3size);
}

/* if these are changed, then
 * the corresponding styles in the
 * Quill snow stylesheet must be changed as well
 */
.tiny, .ql-size-tiny {font-size: var(--size-tiny);}
.smaller, .ql-size-smaller {font-size: var(--size-smaller);}
.small, .ql-size-small {font-size: var(--size-small);}
.normal, .ql-size-normal {font-size: 1.0rem;}
.big, .ql-size-big {font-size: var(--size-big);}
.bigger, .ql-size-bigger {font-size: var(--size-bigger);}
.large, .ql-size-large {font-size: var(--size-large);}
.larger, .ql-size-larger {font-size: var(--size-larger);}
.xlarge, .ql-size-xlarge {font-size: var(--size-xlarge);}
.huge, .ql-size-huge {font-size: var(--size-huge);}
.ql-font-merriweather{font-family: 'Merriweather', sans-serif;}
.ql-font-roboto{font-family: 'Roboto', sans-serif;}
.ql-font-oswald{ font-family: 'Oswald', sans-serif;}
.ql-align-center {text-align: center;}
.ql-align-right {text-align: right;}

.clickable {
    cursor: pointer;
}

.inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.list {
    display:flex;
    flex-direction: column;
}

.content {
    width: 100%;
}

.flexible, .blocks {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:flex-start;
    align-items: stretch;
    flex-grow: 1;
    gap: calc(var(--blockgap) * 1px);
    /* margin-top: calc(var(--blockgap) * 1px); */
}

.blocks.tall {
    flex-direction: column;
}

.vcentered {
    align-items:center;
}

.flexible.smallgap {
    gap: 3px;
    margin-top: 0px;
}

.left {
    justify-content: left;
    text-align: left;
}

.headerfont {
    font-family: var(--headerfont);
}

.page {
    width: 100%;
    min-height: 20px;
}

.block {
    max-width: 100%;
    width: 300px;
    flex: 0 0 auto;
    background-color: var(--blockcolor);
    border-radius: calc(var(--blockradius) * 1px);
    padding: var(--blockpadding);
}

.block {
    position: relative;
    border: var(--blockborder);
    box-shadow: var(--blockshadow);
    flex-grow: 1;
    margin-top: calc(var(--blockgap) * 1px);
}

.block.nogrow {
    flex-grow: unset;
}

.block.wide {
    width: 100%;
}

.blockcontent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blockcontent.wide {
    flex-direction: row;
}

.group {
    margin: 0px;
    width: 100%;
}

.blocktext {
    position: relative;
    flex: 1;
    padding: 5px;
}

.textcontainer, .imagecontainer {
    position:relative;
    width: 100%;
    min-height: 0;
    overflow: clip;
}

.floating {
    width: auto;
}

.textcontainer {
    flex-shrink: 1.2;
    overflow:visible;
}

.spacer {
    position: relative;
    height: 50px;
    width: 50px;
    flex-grow: 999;
}

.slideshowcontainer {
    display: inline-flex;
    flex-direction: row;
    position: relative;
    min-height: 50px;
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: 0 auto !important;
    overflow: clip;
}
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* transition: opacity 1s ease-in-out; */
  }

/*
.infoblock {
    width: 100%;
    padding: 10px;
}

.heroblock {
    display: inline-flex;
    padding-left: 30px;
    padding-right: 30px;
    background-image: linear-gradient(45deg, var(--herostartbackground), var(--heroendbackground));
}

.fullsize {
    width: 100% !important;
}
*/

.hidden {
    display: none !important;
}

/*
.losung { font-family: var(--headerfont); }
.losungtag { font-size: 0.8em; }
.losungtext { font-size: 1.6em; color: rgb(124, 3, 15); }
.losungref { font-size: 0.8em; padding-top: 5px; }
.smallblock {width: 200px; flex-grow:1;}

*/
a
.nogrow {
    flex-grow: 0;
}

.grow {
    flex-grow:1;
}

.newsimg, .blockimage {
    width: 100%;
    margin: 10px 0px;
    position: relative;
}

.scaledimage {
    width: 100%;
    height:auto;
}

.embeddedinfo {
    width: 100%;
    position: relative;
}

.embedded {
    width: 100%;
    position: relative;
    padding-bottom: 100%;  /* This is the aspect ratio */
    height: 0;
    overflow: hidden;
}

.embedded iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pageheader {
    width: 100%;
    background-color: var(--headercolor);
    overflow: visible; 
}

.headercontainer {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.pagefooter {
    width: 100%;
    background-color: var(--footercolor);
    font-family: var(--footerfont);
    font-size: var(--footersize);
    color: var(--footercolor);
}

/*
.footerheader {
    font-family: var(--headingfont);
    font-size: var(--footersize);
    color: var(--headingcolor); 
    margin: 5px 0px;
}

.footerelement {
    max-width: 300px;
    font-family: var(--footerfont);
    font-size: var(--footersize);
    color: var(--footercolor);
}
*/

.col2, .col3, .col4 {
    text-align: justify;
    hyphens: auto;
}

.col2 {
    columns: 1;
    column-gap: 40px;
}

.col3 {
    columns: 1;
    column-gap: 40px;
}
.col4 {
    columns: 1;
    column-gap: 40px;
}

@media (min-width: 600px)
{
    .col2 {column-count: 2;}
    .col3 {column-count: 2;}
    .col4 {column-count: 2;}
}

@media (min-width: 800px)
{
    .col2 {column-count: 2;}
    .col3 {column-count: 3;}
    .col4 {column-count: 3;}
}

@media (min-width: 1000px)
{
    .col2 {column-count: 2;}
    .col3 {column-count: 3;}
    .col4 {column-count: 4;}
}

.linkcolor {
    font-size: inherit;
    color:var(--linkcolor);
}

.blockborder {
    border: solid var(--blockeditcolor) 3px;
    margin: 3px;
}

.groupborder {
    border: solid var(--groupeditcolor) 3px;
    margin: 3px;   
}

.elementborder {
    border: solid var(--elementeditcolor) 3px;
    margin: 3px;
}

.themebutton {
    display: inline-flex;
    font-family: var(--ui-font);
    font-size: 0.8rem;
    text-align: center;
    padding: 6px;
    margin: 2px;
    width: 25px;
    color: var(--ui-color);
    background-color: var(--ui-background);
    border-radius: 2px;
    cursor: pointer;
}

.navbar {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0px;
    gap: 0px 15px;
    width: 100%;
    padding: 2px 0px;
}

.nav {
    margin: 0px;
    padding: 0px;
}

.navlink {
    text-decoration: none;
}

.navitem {
    margin: 0px;
    padding: 2px;
    font-family: var(--navbarfont);
    font-size: var(--navbarsize);
    color: var(--navbarcolor);
    text-transform: uppercase;
    cursor: pointer;
}

.navicon {
    display: block;
    position: relative;
    font-size:xx-large;
    margin-right: 20px;
}

.navmenu {
    display: none;
    flex-direction: column;
    gap: 7px 0px;
    width: 250px;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 99;
    padding: 5px;
    font-size: var(--navsize);
    background-color: var(--headercolor);
    border: 1px solid grey;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);  
}

.navmenu.open {
    display: inline-flex;
}

.unselectable {
    user-select: none;       /* Prevent text selection */
}

/* mobile first */
@media screen and (min-width: 0px)
{
    .block {width: 100%; }
    .navbar { display: none; }
}

@media screen and (min-width: 600px)
{
    .block {width: 300px; }
    .navbar { display: inline-flex; }
    .navicon { display: none; }
}

@media screen and (min-width: 800px)
{
    .embedded {padding-bottom: 40%;}
}