html, body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000000;}
body {
	  padding:0px;
	  margin:0px;
      width: 100vw;
      height: 100vh;
      background-repeat:  no-repeat;
      background-position: center center;
      background-size:cover;
      background-attachment:fixed;
	  background-origin:padding-box;
  	  overflow-x:hidden;
}
.layer {background:#FFFFFF; opacity:0.75; width:50%; padding:10px;}
.titel1 {font-size:xx-large; font-weight:bold; }
.titel2 {font-size:x-large; }
.text1 {margin-top:10px; }
.text2 {margin-top:0px; }
.text3 {margin-top:10px; }

	@media (min-width: 650px) {
		.titel1 {font-size:xxx-large; font-weight:bold; }
	}
	@media (aspect-ratio <= 0.65) {
      body {
        background-image: url(markus_r050.jpg);
      }
	  .layer {background:#FFFFFF; opacity: 0.75; width:70%;}
	  .titel1 {font-size:6em; font-weight:bold; }
	  .titel2 {font-size:4em; }
	  .text1 {font-size:2.5em; }
	  .text2 {font-size:2.5em; }
	  .text3 {font-size:2.5em; }
	}
	@media (aspect-ratio > 0.65) {
      body {
        background-image: url(markus_r075.jpg);
      }
	}
	@media (aspect-ratio > 0.9) {
      body {
        background-image: url(markus_r100.jpg);
      }
	}
	@media (aspect-ratio > 1.25) {
      body {
        background-image: url(markus_r125.jpg);
      }
	}
	@media (aspect-ratio > 1.5) {
      body {
        background-image: url(markus_r150.jpg);
      }
	}
	@media (aspect-ratio > 1.75) {
      body {
        background-image: url(markus_r175.jpg);
      }
	}
	@media (aspect-ratio > 2) {
      body {
        background-image: url(markus_r200.jpg);
      }
	}
	@media (aspect-ratio > 2.25) {
      body {
        background-image: url(markus_r225.jpg);
      }
	}
	@media (aspect-ratio > 2.5) {
      body {
        background-image: url(markus_r250.jpg);
      }
	}
	@media (aspect-ratio > 2.75) {
      body {
        background-image: url(markus_r275.jpg);
      }
	}
	@media (aspect-ratio > 3) {
      body {
        background-image: url(markus_r300.jpg);
      }
	}