/* base settings */
:root {
  --light-bg-color: #F8F8FF;
  --medium-bg-color: #A9A9A9;
  --dark-bg-color: #4F4F4F;
  --accent-bg-color: #008CBA;
  --padding-none: 0px;
  --padding-small: 0.08rem;
  --padding-large: 0.16rem;
  --font-size-huge: 2.3rem;
  --font-size-very-large: 2rem;
  --font-size-large: 1.4rem;
  --font-size-bigger: 1.2rem;
  --font-size-smaller: 0.8rem;
  --margin-small: 0.5rem;
  --margin-large: 1rem;
}

body { 
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
}

* {
  padding: var(--padding-none)
}
	
/* document layout */
.main-head {
  grid-area: header;  
  background: var(--medium-bg-color);
  padding: var(--padding-large);
 }
.content {
  grid-area: content;
  background: var(--light-bg-color);
  padding: var(--padding-large)
}
.main-nav {
  grid-area: nav;
  background: var(--dark-bg-color);
  min-width:200px;
  padding: var(--padding-large);
}
.side {
  grid-area: sidebar;
  background: var(--dark-bg-color);
  padding: var(--padding-large)
}
.ad {
  grid-area: ad;
  background: var(--dark-bg-color);
  padding: var(--padding-large)
}
.main-footer {
  grid-area: footer;
  background: var(--medium-bg-color);
  padding: var(--padding-large);
}

.wrapper {
  display: grid;
  gap: 0px;
  min-height: 90vh;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "header"
    "content"
    "nav"
    "sidebar"
    "ad"
    "footer";
}

.twocolum {
  column-count: 1;
  margin: var(--margin-small);
}

main.grid {
 width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(auto-fill);
  grid-auto-flow: row dense;
  column-gap: 10px;
  column-gap: 10px;
  
}

main.grid > section {
  text-align: center;
}
	
@media (min-width: 600px) {
  .wrapper {
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "header  header"
      "nav content"
      "sidebar ad"
      "footer  footer";
  }
  grid-template-columns: repeat(2, 1fr);
}	

@media (min-width: 900px) {
  .wrapper {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr 1fr auto;
    grid-template-areas:
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer";
  }

.twocolum {
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--dark-2g-color);
}

main.grid {
  grid-template-columns: repeat(2, 40%);
}
}

@media (min-width: 1200px) {
  .wrapper {
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header  header header"
      "nav    content sidebar ad"
      "footer footer  footer footer";
  }

.twocolum {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid var(--dark-bg-color);
}

main.grid {
  grid-template-columns: repeat(3, 30%);
}

}

@media (min-width: 2000px) {
.twocolum {
  column-count: 4;
  column-gap: 40px;
  column-rule: 1px solid var(--dark-bg-color);
}

}

/* navigation */
ul.nav {
  list-style-type: none;
}

ul.nav > li {
  background: var(--medium-bg-color);
  color: var(--light-bg-color);
  padding: var(--padding-small);

 text-decoration: none;
 
}

/*
  margin: var(--margin-small);
  display:block;
  padding: 5px 15px;

} */

li.nav > a.active {
  text-decoration: none;
  background-color: var(--accent-bg-color); 
  color: var(--dark-bg-color);
  font-size: var(--font-size-bigger);
  display:block;
  padding: 5px 15px;
}

nav.main-nav {
  padding: var(--padding-small);
}

nav.main-nav > ul {
  list-style-type: none;
  background: var(--medium-bg-color);
  font-size: var(--font-size-bigger);
  padding: var(--padding-small);
  margin: var(--margin-small);
}

/* image contents */
.img-content {
  overflow:auto;
  margin: 0.5rem;
  border: 1px solid;
}

.img-content img {
    margin-right: var(--margin-large);
    float: left;
}

.img-content h3{
    margin-left: var(--margin-large);
    display: block;
    font-size: var(--font-size-bigger);
}

.img-content p{
    display: block;
    margin: var(--margin-small) 0 0 0;
    font-size:  var(--font-size-normal);
}

/* stand-alone figure in content */

section.content figure {
  text-align: center;
}

/* heading in content */
section h1 {
  font-weight: bold;
  font-size:  var(--font-size-huge);
  text-align: center;
  margin: var(--margin-small);
}

section.content h2 {
  font-weight: bold;
  font-size:  var(--font-size-bigger);
  text-align: center;
  margin: var(--margin-small);
}

section.content p {
  margin: var(--margin-small);
}

section.content p.center {
  margin: var(--margin-small);
  text-align: center;
}

/* used for H&H label */
em.brown {
  font-style:normal;
  font-weight:bold;
  color:#990000
}

/* link as button */
a.button {
  background-color: var(--accent-bg-color); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

/* small text */
small.tiny {
  font-size: var(--font-size-smaller);
}

/* section with border */
section.border {
	width: 85%; 
	border: 1px solid;
}

/* footer layout */
footer.main-footer > p {
	margin: var(--margin-small);
}

/* todo: rename this */
.klein {
  font-size: var(--font-size-smaller);
}

section {
  padding:5px;
  text-align: center;
   margin: auto;
}

section.left {
  padding:5px;
  text-align: left;
}

.heading-with-text    {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid;
}

/* table of contents  */
details ol {
  list-style-type:none;
}

details ul {
  list-style-type:none;
}	
	

details ol li {
   font-style: italic;
}	

}	
details ol li li {
    font-size: var(--font-size-smaller);
}	

details ul li {
   font-style: italic;
}	
details ul li li {
    font-size: var(--font-size-smaller);
}	

details ul li li li {
   color: darkgrey;
}	

details ol li li li {
   color: darkgrey;
}