:root {
  --bitter: #888f7f;
  --green: #527d4a;
  --olive: #99bc7e;
  --magenta: #c72e84;
  --pink: #804464;
}

body {
  margin: 0;
  font-family: 'Fira Sans', sans-serif;
  font-size:1.1rem;
  background-color:#f1b3c2;
}
p, li {
    hyphens: auto;
    overflow-wrap: break-word;
}
footer a {
	color:#fff;
	font-weight:bold;
}
header, footer {
  background: var(--pink);
  color: #fff;
  padding: 1rem;
  position: relative;
}
#bg_main {
  background-image:url('/images/ugm-klavierunterricht-in-chemnitz-susann-beyer.jpg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  min-height:80vh;
  padding: 1em;
}
main#main {
	background-color:#ffffffcc;
	border-radius:30px;
	padding:1em 1.5em 1em 1.5em;
	margin-bottom:10em;
}
h1, h2 {
  font-family: 'Elsie', sans-serif;
}
h3, h4, h5, h6 {
	font-family: 'Fira Sans', sans-serif;
}
.portrait {
	border-radius:0 25px 25px 0;
	margin-bottom: 1em;
}
.button.success {
	background-color: var(--olive);
	border-radius: 5px;
}
.button.success:hover, .button.success:focus {
	background-color: var(--green);
	color: #fff;
}
/* Burger-Icon */
.menu-toggle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

/* Overlay-Menu */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.overlay {
	background-image:url('/images/ugt-klavierunterricht-in-chemnitz-susann-beyer.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	background-blend-mode:multiply;
}
.overlay.active {
  display: flex;
  flex-direction: column;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.overlay nav ul {
  list-style: none;
  padding: 0;
  margin-left:0;
}

.overlay nav ul li {
  margin: 1rem 0;
}

.overlay nav ul li a {
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  transition: color 0.5s ease;
}

.overlay nav ul li a:hover {
  color: #ffcc00;
}

.close-overlay {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.4rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#nav-container a {
  display: inline-block; /* nötig für transform */
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  transform-origin: center;
}

#nav-container a:hover {
  transform: scale(1.5);
}

@media screen and (min-width: 40em) {
main#main {
	padding:2em;
}
#bg_main {
  background-image:url('/images/ug-klavierunterricht-in-chemnitz-susann-beyer.jpg');
  background-size:cover;
  background-position:center bottom;
  min-height:80vh;
  padding: 1em;
}
.subline {
	font-size:1.4em;
}
}

@media screen and (max-width: 39.9375em) {
h2 {
	font-size:1.6rem;
}
.overlay {
	background-image:url('/images/ugt-klavierunterricht-in-chemnitz-susann-beyer.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	background-blend-mode:multiply;
}
}