/* FONTS */
@font-face {
  font-family: "Karma";
  src: url(../fonts/Karma-Medium.ttf);
}

@font-face {
  font-family: "AmaticSC";
  src: url(../fonts/AmaticSC-Regular.ttf);
}

/* COLORS */
:root {
  --white: #ffffff;
  --black: #000000;
  --main-flash: #bbbccb;
  --lighter-flash: #c9cad9;
  --darker-flash: ;
}

/* GENERAL STYLES */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  word-break: break-word;
  hyphens: auto;
}

body {
  font-family: "Karma", serif;
}

h1 {
  text-align: center;
  color: var(--white);
  font-size: 2rem;
  font-weight: 100;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

p {
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

a:hover {
  color: var(--lighter-flash);
}

section,
footer {
  padding: 120px 60px 60px 60px;
}

@media screen and (max-width: 600px) {
  section,
  footer {
    padding: 120px 30px 20px 30px;
  }
  h1 {
    font-size: 1.25rem;
  }
}

/* HEADER */
header img {
  width: 140px;
}

header a {
  color: var(--black);
  text-decoration: none;
  text-transform: capitalize;
}

/* NAVIGATION */

/* For large devices up to 940px  */
.widenav {
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  width: 100vw;
  padding: 20px;
  z-index: 10;
  display: flex;
  background-color: var(--white);
}

.widenav ul {
  display: flex;
  gap: 60px;
}

.widenav ul li {
  list-style: none;
}

.widenav ul li:nth-last-of-type(1) a {
  background-color: var(--main-flash);
  color: var(--white);
  border-radius: 10px;
  padding: 10px 20px;
}

.widenav ul li:nth-last-of-type(1):hover a {
  background-color: var(--lighter-flash);
}

@media screen and (max-width: 940px) {
  .widenav {
    display: none;
  }
}

/* For small devices less then 940px */
.topnav {
  display: none;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: var(--white);
  width: 100%;
}

.topnav img {
  height: inherit;
  padding-top: 5px;
  padding-bottom: 5px;
}

.topnav .bar {
  content: url(../img/iconmonstr-menu-1.svg);
}

.topnav .mobile-container {
  max-width: 480px;
  margin: auto;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav #myLinks {
  display: none;
  border-bottom: solid 0.5px --main-flash;
  border-top: solid 0.5px --main-flash;
}

.topnav a {
  text-decoration: none;
  font-size: 17px;
  display: block;
  color: var(--black);
  text-transform: capitalize;
  padding-left: 20px;
}

.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 4.5px;
  padding: 14px 14px 3px 14px;
}

.topnav #myLinks a {
  padding: 14px 20px;
}

.topnav #myLinks a:hover {
  background-color: var(--main-flash);
  color: var(--white);
}

.topnav .active {
  color: var(--black);
  height: 60px;
}

@media screen and (max-width: 940px) {
  .topnav {
    display: block;
  }
}

/* STAGE ON TOP OF THE MAIN PAGE */
.stage {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 240px;
  padding-bottom: 120px;
  min-height: 800px;
  height: 100vh;
}

.stage.index {
  background-image: url(../img/clouds.jpg);
  background-attachment: fixed;
}

.stage.impressum {
  background-image: url(../img/tuktuk.jpg);
  background-attachment: fixed;
}

.stage h2 {
  text-align: center;
  color: var(--white);
  font-family: "AmaticSC", cursive;
  font-size: 3rem;
  font-weight: lighter;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stage h2 span {
  font-size: 1rem;
  font-family: "Karma", serif;
}

.stage article {
  width: 60%;
}

.stage ol {
  margin-left: 20px;
}

@media screen and (max-width: 800px) {
  .stage.index,
  .stage.impressum {
    background-attachment: scroll;
  }
}

@media screen and (max-width: 600px) {
  .stage article {
    width: 100%;
  }
}

/* ABOUT ME */
.about-me {
  display: flex;
  justify-content: center;
}

.about-me article {
  text-align: center;
  width: 60%;
}

.about-me figure img {
  border-radius: 50%;
}

.about-me figure figcaption,
.kosten span {
  font-family: "AmaticSC", cursive;
  font-size: 1.5rem;
}

@media screen and (max-width: 600px) {
  .about-me article {
    width: 100%;
  }
}

/* MASSAGEN & ATEMARBEIT SECTION */
.atemarbeit {
  background-color: var(--main-flash);
  padding: 0;
}

.massagen {
  flex-direction: row-reverse;
  padding: 0;
}

.massagen,
.atemarbeit {
  display: flex;
}

.atemarbeit article:nth-of-type(2) {
  background-image: url(../img/mindefullness.jpg);
}

.massagen article:nth-of-type(2) {
  background-image: url(../img/massage.jpg);
}

.atemarbeit article:nth-of-type(2),
.massagen article:nth-of-type(2) {
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px;
}

.atemarbeit article:nth-of-type(2) h3,
.massagen article:nth-of-type(2) h3 {
  color: var(--white);
  font-family: "AmaticSC", cursive;
  font-size: 3rem;
  font-weight: lighter;
}

.atemarbeit article:nth-of-type(1),
.massagen article:nth-of-type(1) {
  padding: 120px 60px 60px 60px;
}

.massagen article,
.atemarbeit article {
  width: 50%;
}

@media screen and (max-width: 600px) {
  .massagen,
  .atemarbeit {
    flex-wrap: wrap;
  }
  .massagen article,
  .atemarbeit article {
    width: 100%;
  }
  .atemarbeit article:nth-of-type(1),
  .massagen article:nth-of-type(1) {
    padding: 120px 30px 60px 30px;
  }
}

/* KOSTEN */
.kosten {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--main-flash);
}

.kosten article {
  width: 60%;
}

@media screen and (max-width: 600px) {
  .kosten article {
    width: 100%;
  }
}

/* GALLERY */

/* General styling */
.gallery {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 120px 60px 60px 60px;
}

.gallery .row {
  display: flex;
  flex-wrap: wrap;
}

/* Four equal columns that sits next to each other */
.gallery .column {
  flex: 25%;
  max-width: 25%;
  padding: 0 10px;
}

.gallery .column img {
  margin-top: 18px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .gallery {
    flex-wrap: wrap;
  }
  .gallery .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .gallery .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* Container needed to position the overlay */
.gallery .container {
  position: relative;
}

/* Make the image responsive */
.gallery .image {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.gallery .overlay {
  position: absolute;
  bottom: 0;
  background: var(--black);
  background: var(--main-flash);
  color: var(--white);
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: var(--white);
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.gallery .container:hover .overlay {
  opacity: 1;
}

/* FOOTER */

/* General styling */
footer {
  background-color: var(--main-flash);
  color: var(--white);
}

footer a {
  color: var(--white);
  text-decoration: none;
}

footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Section with columns */
footer .column {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding: 0;
}

footer .column img {
  filter: brightness(0) invert(1);
  width: 140px;
}

footer .column h3 {
  margin-bottom: 1.25rem;
}

footer .column article:nth-of-type(1) {
  width: 40%;
}

footer .column article:nth-of-type(2),
footer .column article:nth-of-type(3) {
  width: 30%;
}

footer .column article:nth-of-type(1) ul,
footer .column article:nth-of-type(3) ul {
  list-style: none;
}

footer .column article:nth-of-type(1) ul li,
footer .column article:nth-of-type(3) ul li {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
}

footer .column article:nth-of-type(1) ul img,
footer .column article:nth-of-type(3) ul img {
  width: 16px;
}

footer .column article:nth-of-type(2) ul,
footer .column article:nth-of-type(3) ul {
  margin-left: 16px;
}

@media screen and (max-width: 800px) {
  footer .column article:nth-of-type(1),
  footer .column article:nth-of-type(2),
  footer .column article:nth-of-type(3) {
    width: 100%;
  }
  footer .column {
    flex-wrap: wrap;
  }
}

/* Centered Section */
footer .centered {
  padding-top: 20px;
  text-align: center;
}