/* better box-sizing */
* {
  box-sizing: border-box;
}

/* default body */
body {
  display        : block;
  align-items    : center;
  justify-content: center;
  font-size      : 100%;
  line-height    : 1.8;
  font-family    : helvetica;
  color          : #004382;
  background     : #000;
  margin-top     : 30px;
}

/* loaded body */
body.loaded {
  opacity   : 1;
  transition: 1s opacity;
}

/* default header: min. 1024px iPad 13" */
.banner {
  position           : relative;
  width              : 100%;
  height             : 38rem;
  overflow           : hidden;
  backface-visibility: hidden;
}

/* default image container */
.banner .background {
  width          : 100%;
  height         : 100%;
  position       : absolute;
  left           : 0;
  top            : 0;
  z-index        : -1;
  transform      : translate3d(0, 0, 0) scale(1.5);
  background     : black url(../img/michael_60th-birthday_2025-09-03_2500px.jpg) no-repeat center center;
  background-size: contain;
}

.loaded .banner .background {
  transform : scale(1);
  transition: 8.5s transform;
}

/* media header: min. 1364px iPad 13" landscape */
@media only screen and (min-width: 1364px) {
  .banner {
    height: 65rem;
  }

  .banner .background {
    transform: translate3d(0, 0, 0) scale(1.6);
  }

  .loaded .banner .background {
    transform : scale(1);
    transition: 8.5s transform;
  }
}

/* media header: min. 2048px Monitor */
@media only screen and (min-width: 2048px) {
  .banner {
    height: 70rem;
  }

  .banner .background {
    transform: translate3d(0, 0, 0) scale(1.6);
  }

  .loaded .banner .background {
    transform : scale(1);
    transition: 8.5s transform;
  }
}

/* media header: min. 3840px 4K Monitor */
@media only screen and (min-width: 3840px) {
  .banner {
    height: 75rem;
  }

  .banner .background {
    transform: translate3d(0, 0, 0) scale(1.8);
  }

  .loaded .banner .background {
    transform : scale(1);
    transition: 8.5s transform;
  }
}

/* default content = 400px */
@media only screen and (max-width: 400px) {
  body {
    font-size  : 75%;
    line-height: 1.8;
    color      : #004382;
  }
}

@media only screen and (max-width: 400px) {
  body .von-thomas {
    font-size  : 200%;
    line-height: 1.65;
    color      : #6e2a00;
  }
}

@media only screen and (max-width: 400px) {
  body .date {
    font-size  : 160%;
    line-height: 1.65;
    color      : #565656;
  }
}

main {
  position: relative;
  width   : 90%;
  margin  : 5rem auto;
}

main p {
  margin: 0 0 3rem 0;
}

.empty-placeholder-40 {
  margin: 40px;
}

.empty-placeholder-60 {
  margin: 60px;
}

.empty-placeholder-80 {
  margin: 80px;
}

.glueckwuensche {
  text-align    : center;
  font-style    : normal;
  text-transform: uppercase;
  font-weight   : lighter;
  font-size     : 2.5em;
  margin-bottom : -30px;
}

.von-thomas {
  text-align    : center;
  color         : #6e2a00;
  font-style    : normal;
  text-transform: uppercase;
  font-weight   : lighter;
  font-size     : 1.8em;
  margin-bottom : -20px;
}

.date {
  text-align   : center;
  color        : #565656;
  font-style   : normal;
  font-weight  : lighter;
  font-size    : 1em;
  margin-top   : 70px;
  margin-bottom: 60px;
}