/* for desktop */
@media only screen and (min-width: 601px) {
  body {
    background-color: var(--page-bg-color);
	font-family: arial, sans-serif;
    font: 100% arial, sans-serif;
    line-height: 1.8;
  }

  .page-wrapper {
    background-color: var(--page-bg-color);
    /* background: transparent; */
    margin-left: 0px;
    margin-right: 0px;
  }

  .intro {
    /* background-color: var(--intro-bg-color); */
    background: transparent;
  }

  .summary {
    /* background-color: var(--sum-bg-color); */
    background: transparent;
    color: var(--sum-color);
    text-align: left;
    margin-left: 25px;
    margin-right: 25px;
  }
  .summary h3 {
    /* background-color: var(--sum-bg-color); */
    background: transparent;
    color: var(--sum-color);
    text-align: left;
  }
  .summary p {
    /* background-color: var(--sum-bg-color); */
    background: transparent;
    color: var(--sum-color);
  }

  .preamble {
    /* background-color: var(--pre-bg-color); */
    background: transparent;
    color: var(--pre-color);
    margin-left: 25px;
    margin-right: 25px;
  }
  .preamble h3 {
    /* background-color: var(--pre-bg-color); */
    background: transparent;
    color: var(--pre-color);
  }
  .preamble p {
    /* background-color: var(--pre-bg-color); */
    background: transparent;
    color: var(--pre-color);
  }

  .main-supporting {
    background-color: var(--main-bg-color);
    color: var(--main-color);
    margin-left: 25px;
    margin-right: 25px;
  }

  .background-info {
    background-color: var(--bgnd-bg-color);
    color: var(--bgnd-color);
  }
  .background-info h3 {
    background-color: var(--bgnd-bg-color);
    color: var(--bgnd-color);
  }
  .background-info p {
    background-color: var(--bgnd-bg-color);
    color: var(--bgnd-color);
  }

  .disclaimer {
    background-color: var(--disc-bg-color);
    color: var(--disc-color);
  }
  .disclaimer h3 {
    background-color: var(--disc-bg-color);
    color: var(--disc-color);
  }
  .disclaimer p {
    background-color: var(--disc-bg-color);
    color: var(--disc-color);
  }

  .final {
    background-color: var(--final-bg-color);
    color: var(--final-color);
	padding-left: 20px;
	left: -20px;
  }
  .final > p {background-color: var(--final-bg-color); color: var(--final-color);}
  .final > h3 {background-color: var(--final-bg-color); color: var(--final-color);}

  header {
    height: 200px;
    background: transparent url(../pictures/Schlossblick_599_200.jpg) no-repeat center left;
    background-color: var(--willow-70);
    background-blend-mode: luminosity;
    color: var(--willow-25);

    text-align: left;
  }

  header > h1::before {
    display: block;
    margin-top: 20px;
    content: url(../pictures/Kamera_240.png);
    position: absolute;
    top: 20px;
    left: 10px;
  }

  header h1 {
    display: block;
    min-width: 50%;
    margin: 0px;
    font-weight: bold;
    font-size: 30px;
    padding-top: 30px;
    padding-left: 240px;
    white-space: nowrap;
  	overflow: hidden;
    color: var(--h1-color);
  }

  header h2 {
    color: var(--h2-color);
    margin-top: 0px;
  	margin-bottom: 0px;
  	white-space: nowrap;
  	overflow: hidden;
    position: absolute;
    top: 100px;
    left: 240px;
  }

  h3 {color: var(--h3-color); background-color: var(--h3-bg-color);}

  p {color: var(--p-color); background-color: var(--p-bg-color);}

  article {color:#fff;background-color: var(--desert-mist-71)}

  footer {
    color: var(--foot-color);
    background-color: var(--foot-bg-color);
    margin-left: 10px;
    margin-bottom: 60px;
    font-size: small;
  }
  /* footer p {color: var(--foot-color); background-color: var(--foot-bg-color);} */
  footer a {
    color: var(--willow-15);
    /* background-color: var(--li-bg-color); */
  }
    
  nav {background-color: var(--li-bg-color);
    left: 10px;
  }
  
  nav li {
	  color: var(--li-color); 
	  background-color: var(--li-bg-color);
	  list-style-type: none;
	  padding-left: 28px;
	  background-image: url(../pictures/Camera_27_20.png);
	  background-repeat: no-repeat;
	  background-position: left center;
  }
  
  nav li a {color: var(--li-color);}

  li a:hover {color: var(--desert-mist-80); background-color: var(--desert-mist-40);}

  li a:hover:not(.active) {color: var(--desert-mist-80); background-color: var(--desert-mist-40);}

  .active {color: var(--desert-mist-80); background-color: var(--desert-mist-40);}
}