/* smartphone */
@media (max-width: 600px) {
  html {
    background: url("pic/background_small.jpg") no-repeat center center fixed;
  }
  body {
    max-width:95%;
  }
  h1 {
    font-size: 9vw;
  }
  h2 {
    font-size: 8vw;
  }
  h3 {
    font-size: 10vw;
  }
  .text-box {
    width:95%;
  }
  .title-box {
    background: url("pic/logo_small.png");
  }
  .reading-box {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .portrait-img {
    width: 60%;
    height: auto;
  }
  .portrait-img > img {
    width: 90%;
    height: auto;
  }
  .landscape-img {
    width: 85%;
    height: auto;
  }
  #curly-font {
    font-size: 8vw;
  }
  #flower-power-font {
    font-size: 7vw;
  }
  .form {
    font-size: 6vw;
  }
}

/* desktop */
@media (min-width: 601px) {
  html {
    background: url("pic/background_small.jpg") no-repeat center center fixed;
  }
  body {
    max-width: 90%;
    margin: 1em auto;
  }
  .portrait-img {
    width: 35%;
    height: auto;
  }
  .portrait-img > img {
    width: 90%;
    height: auto;
  }
  .landscape-img {
    width: 90%;
    height: auto;
  }
  .title-box {
    background: url("pic/logo.png");
  }
  .reading-box {
    flex-wrap: wrap;
    flex-direction: row;
  }
  h1 {
    font-size: 8vw;
  }
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 6vw;
  }
  .text-box {
    width:49%;
  }
  #curly-font {
    font-size: 5vw;
  }
  #flower-power-font {
    font-size: 5vw;
  }
  .form {
    font-size: 3vw;
  }
}

/* desktop */
@media (min-width: 800px) {
  html {
    background: url("pic/background_large.jpg") no-repeat center center fixed;
  }
  body {
    max-width: 90%;
    margin: 1em auto;
  }
  .portrait-img {
    width: 45%;
    height: auto;
  }
  .portrait-img > img {
    width: 90%;
    height: auto;
  }
  .landscape-img {
    width: 90%;
    height: auto;
  }
  .title-box {
    background: url("pic/logo.png");
  }
  .reading-box {
    flex-wrap: wrap;
    flex-direction: row;
  }
  h1 {
    font-size: 8vw;
  }
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 6vw;
  }
  .text-box {
    width:45%;
  }
  #curly-font {
    font-size: 5vw;
  }
  #flower-power-font {
    font-size: 5vw;
  }
  .form {
    font-size: 3vw;
  }
}

/* 4k oder so */
@media (min-width: 1111px) {
  html {
    background: url("pic/background_large.jpg") no-repeat center center fixed;
  }
  body {
    justify-content:center;
  }
  .portrait-img {
    max-width: 600px;
    height: auto;
  }
  .portrait-img > img {
    width: auto;
    max-height: 450px;
  }
  .landscape-img {
    max-width: 800px;
    height: auto;
  }
  .title-box {
    background: url("pic/logo.png");
    max-width: 70em;
    margin: 2em auto;
  }
  .reading-box {
    flex-wrap: wrap;
    max-width: 90em;
    margin: 2em auto;
  }
  h1 {
    font-size: 5em;
  }
  h2 {
    font-size: 4vw;
  }
  h3 {
    font-size: 6vw;
  }
  .text-box {
    width:85%;
  }
  #curly-font {
    font-size: 3vw;
  }
  #flower-power-font {
    font-size: 3vw;
  }
  .form {
    font-size: 2vw;
  }
}

/* schriftarten
font-family: 'Rock Salt', cursive;
font-family: 'Beth Ellen', cursive;
font-family: 'Ruge Boogie', cursive;
font-family: 'Sedgwick Ave Display', cursive;
font-family: 'Special Elite', cursive;
*/

html {
  background-size: cover;
}

body {
  text-align:center;
}

h1 {
  font-family: 'Rock Salt', sans-serif;
  text-shadow: 2px 2px white;
}

h2 {
  font-family: 'Beth Ellen', sans-serif;
}

h3 {
  font-family: 'Sedgwick Ave Display', sans-serif;
}

#curly-font {
  font-family: 'Ruge Boogie', cursive;
}

#flower-power-font {
  font-family: 'Bonbon', cursive;
}

p {
  justify-content:center;
}

.form {
  font-family: 'Special Elite', sans-serif;
}

.title-box {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.reading-box {
  background: url("pic/background_readable.png") repeat;
  display: flex;
  padding: 0.7em;
  justify-content:center;
}

.reading-box > div {
  margin: 0.4em;
  justify-content:center;
  /*border: 1px solid #888;*/
}

div {
  justify-content:center;
  text-align:center;
}

.portrait-img {
  justify-content:center;
}

.g-recaptcha {
  display:flex;
  justify-content:center;
}

.center {
  justify-content:center;
}

input[type=submit] {
  padding: 0.8em;
  background-color:black;
  color:white;
  font-size:1em;
  font-weight:bold;
}

.impressum {
  font-family:sans-serif;
}