:root {
    /* see variables.scss for more variables*/

    --highlight: #deda86; /* muss in theme/hugo-scroll/assets/css/variables.css geändert werden */

    --section-light-text-color: #3a4145!important;
    --section-light-bg-color: #f2efe8!important;
    --section-dark-bg-color: var(--section-light-text-color)!important;
    
}

a.btnlink {
  font-family: "Oswald", sans-serif;
  text-decoration: none;
  background-color: var(--highlight);
  color: var(--highlight-contrast);
  border-radius: 6px;
  -webkit-border-radius: 6px;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  overflow: visible;
  position: relative;
  font-size: clamp(13px, 2.4vh ,16px);
  padding: clamp(2px, 1.0vh, 10px) clamp(5px, 2.2vh, 20px);
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: lighter;

}
a.btnlink:hover {
  color: var(--highlight-inverse-contrast);
  background-color: var(--highlight-inverse);
}
 /*Keep large images within the bounds of the post-width*/
.post-content img {
  display: block;
  /*width: 60%;*/
  /*margin: 0 auto;*/
  /*align: left;*/
  /*margin: 0 0;*/
}

.main-menu {
  margin: auto;
  max-width: 95%;
  margin-top: clamp(0.2rem, 3vw, 1rem);
}


.vertical {
  margin-top: clamp(0.2rem, 1vw, 2rem);
}

a.btn {
  box-shadow: var(--cover-title-text-shadow);
  font-size: clamp(13px, 2.4vh ,16px);
  padding: clamp(2px, 1.0vh, 10px) clamp(5px, 2.2vh, 20px);
}


#blog-logo {
  display: block;
  padding-top: 1vh;
  padding-top: 1svh;
  padding-bottom: 0.5rem;
  margin: auto;
}

@media only screen and (min-width: 1800px) {
  #blog-logo {
  padding-top: 1vh;
  padding-top: 1svh;
  }
}

/* menü schmaler bei nicht ganz großen bildschirmen */
@media only screen and (max-width: 1500px) {
  .main-menu {
    max-width: 100%;
  }
}

@media only screen and (max-width: 700px) {
  #blog-logo {
   padding-top: 1vh;
   padding-top: 1vh;
  }
  a.btn {
    font-size: 14px;
    padding: 8px 16px 8px 16px;
  }
}

/* @media only screen and (min-aspect-ratio 9 / 169) { */
/* breiter als hoch */
@media only screen and (aspect-ratio > 480/319) {
  #blog-logo {
    max-height: 200px;
    max-width: clamp(200px, 33vw, 1000px);
  }
}

/* höher als breit */
@media only screen and (aspect-ratio < 480/319) {
  #blog-logo {
    max-height: clamp(100px, 20svh, 200px);
  }
}

@media only screen and (width > 500px) {
  #blog-logo {
    max-width: 100%;
  }
}

@media only screen and (width <= 500px) {
  #blog-logo {
    /* background: rgba(10,70,90,0.3); */
    max-width: 90%;
  }
}

#site-head, #site-head.withCenteredImage {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  margin-bottom: 0rem;
  text-align: center;
  color: var(--cover-text-color);
  /*background-size: cover;*/
  background-size: cover;
  /*background: var(--section-light-bg-color) no-repeat center center;*/
  /*background: rgba(1,0,0,0.2);*/
}

a.social-menu {
  font-size: 18px;
}


/* columns: */

.row {
  display: flex;
  /* color: var(--section-dark-text-color); */
  /* background-color: lightblue; */
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* kleinere Schrift: */
body {
  /* hide scrollbar */
 /* overflow: hidden; */
  /* height: 100%; */
  /* max-height: 100%; */
  /* font-family: "Roboto Slab", serif; */
  font-size: 1.8rem;
  /* line-height: 1.6em; */
  /* color: var(--section-light-text-color); */
}

 /* Hide scrollbar for Chrome, Safari and Opera */

body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

summary:hover {
  color: var(--highlight);
}

details[open] {
  max-height: 10000px;
  /* background-color: rgba(0,0,0,0.2); */
  padding-bottom: 1em;
}

details summary {
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

/* mehr platz nach blockquote */
blockquote::after {

  content: '';
  display: block;
  /* background: red; */
  width: 0.6rem;
  height: 0.6rem;

}