:root {
  --textcolor: #353849;
  font-size: 62.5%;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Literata", Times, "Times New Roman", serif; }

html, body { background: #EEE; font-size: 2.2rem; line-height: 1.5; }
h2 { margin-bottom: 2rem; font-size: 3rem; }
p, ul, ol { margin-bottom: 1rem; }
ul { margin-left: 4rem; }
p.extra { font-style: italic; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

header { position: relative; background: #dfe0e2; width: 100%; height: 600px; }
header div { position: absolute; bottom: 4rem; left: 50%; padding: 2rem; }
header img { display: block; position: relative; left: calc(50vw - 1100px); width: auto; max-width: none; height: 600px; }
header h1 { margin: 0; padding: 0; font-size: 6rem; }
header p { margin: 0; padding: 0; font-size: 3rem; }

.section { padding: 8rem 3rem; }
.color1 { background: #ddd9d5; }
.inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 4rem; margin: 0 auto; max-width: 1200px; }
.reverse .content { order: 1; }
.reverse .image-wrapper { order: 2; }

.inner.multicol { display: block; column-gap: 40px; column-count: 2; margin: 0 auto; max-width: 1200px; }
.inner.multicol p { margin-bottom: 3.3rem; }

/* Images */
.image-wrapper {
  border: 1px solid #333;
  padding: 3px;
  height: 100%;
  overflow: hidden;
}

.image1 {
  background-image: url(../media/africa_create.jpg);
  background-position: bottom;
  background-size: cover;
  height: 100%;
  min-height: 500px;
}

.image2 {
  background-image: url(../media/africa.jpg);
  background-position: center;
  background-size: cover;
  height: 100%;
}

.image3 {
  background-image: url(../media/andreas_kahler.jpg);
  background-position: 85% 50%;
  background-size: cover;
  height: 100%;
}

/* Footer */
footer { margin-top: 0rem; background: #666; padding: 2rem 3rem; color: white; }
footer ul { display: flex; gap: 4rem; margin: 0 auto; width: 100%; max-width: 1200px; list-style: none; }
footer button { cursor: pointer; border: none; background: none; color: white; text-decoration: underline; }
footer button:hover,
footer button:focus { text-decoration: none; }
footer .gap { margin-right: 6rem; }
footer .icon { display: inline-block; position: relative; top: 4px; width: 24px; height: 24px;  }
footer .last { margin-left: auto; }

/* Dialog */
dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid black; background: white; padding: 30px; max-width: 600px; }
dialog::backdrop,
[popover]::backdrop {
  display: block;
  backdrop-filter: blur(4px); /* Optional: adds a nice blur effect */
  background-color: rgba(0, 0, 0, 0.5); /* 50% opacity black */
}
dialog button { margin-top: 20px; padding: 4px 8px; }

html:has([popover]:popover-open) main,
html:has([popover]:popover-open) footer {
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1280px) {
  header { height: 500px; }
  header img { left: -350px; height: 500px; }
  header h1 { margin: 0; padding: 0; font-size: 5rem; }
  header p { margin: 0; padding: 0; font-size: 2.6rem; }
}

@media (max-width: 920px) {
  header { background: #ddd9d5; height: auto; }
  header div { position: relative; top: 0; left: 0; padding: 3rem; }
  .inner { display: grid;  grid-template-columns: 1fr; gap: 4rem; }
  .inner.multicol { column-count: 1; }
  .image1 { aspect-ratio: 1831/2385; min-height: 660px; }
  .image2 { aspect-ratio: 16/9; width: 100%; min-width: 100%; height: auto; }
  .image3 { aspect-ratio: 16/9; }
  .reverse .content { order: 2; }
  .reverse .image-wrapper { order: 1; }
  dialog { position: absolute; top: 10vw; left: 5vw; transform: none; width: 90vw; max-width: 90vw; }
}

@media (max-width: 670px) {
  header img { left: -300px; height: 400px; }
  header h1 { margin: 0; padding: 0; font-size: 4rem; }
  footer ul { flex-direction: column; gap: 2rem; text-align: center;  }
  footer .gap { margin-right: 0; }
  footer .last { margin-left: 0; }
}

@media (max-width: 400px) {
  header img { left: -200px; height: 300px; }
}