body {
  margin: 0.5vh 0 0 0;
  background-color: #61c5dc;
  background-image: url("../img/hg_sq-640.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: .8em;
  font-weight: bold;
  opacity: 0.8;
}


/* FONTS
---------------------------------------------------------------------- */

h1 {
  padding-top: 0.6em;
  padding-bottom: 0.4em;
  color: #61c5dc;
}
h2, h3 {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  color: #61c5dc;
}
h4, h5, h6 {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
p {
  font-weight: normal;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}
a, a:visited {
  color: white;
  text-decoration: none;
}
a:hover {
  color: #61c5dc;
}


/* HEADER
---------------------------------------------------------------------- */

header {
  position: relative;
  height: 22vh;
  text-align: center;
  overflow: hidden;
}

header img {
  height: 22vh;
  width: auto;
  filter: 
     drop-shadow(0 0 3px white)
     drop-shadow(0 0 5px white);
}

#oben { 
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 3;
  transition: all 2s cubic-bezier(0.5, 1.8, 0.3, 0.3);
}

#oben:hover { 
  transform: rotate(-810deg);
}


#unten {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0; 
  z-index: 1;
  transition: all 2s cubic-bezier(0.5, 1.8, 0.3, 0.3);

}


#unten:hover { 
  transform: rotate(-13deg);
}



/* MAIN
---------------------------------------------------------------------- */

main {
  position: relative;
  height: calc(100vh - 1vh - 22vh - 1.55em);
}


/* ARTICLE
---------------------------------------------------------------------- */

article {
  position: absolute;
  height: auto;	
  max-height: calc(100vh - 1vh - 22vh - 2.7em);
  width: calc(100% - 5% - 20px);
  max-width: 960px;
  top: 0;
  right: 0;
  overflow: auto;
  background-color: #2e2e2e;
  border: .15em solid white;
  border-radius: .4em;
  text-align: left;
  padding-left: 1.2em;
  padding-right: 1.2em;
  font-size: inherit;
  font-style: inherit;
}

article * a:link {
  text-decoration: dotted underline;
}


/* FOOTER
---------------------------------------------------------------------- */

footer {
  position: absolute;
  margin-bottom: 0;
  height: 1.4em;
  left: 0;
  right: 0;
}

footer > * {
  position: absolute;
  text-align: center;
  padding: .2em;
  font-size: inherit;
  font-style: inherit;
  border-top: .15em solid white;
  width: 45vw;
  max-width: 160px;
}

footer > *:first-child {
  border-left: .15em solid white;
  border-top-left-radius: .4em;
  right: 50%;
}

footer > *:last-child {
  border-left: .075em solid white;
  border-right: .15em solid white;
  border-top-right-radius: .4em;
  left: 50%;
}


/* BACKGROUND-IMAGE 
---------------------------------------------------------------------- */

/*
@media only screen and (max-width:640px) {
  body {background-image: url("../img/hg_sq-640.jpg")}
}*/

@media only screen and (min-width:641px) {
  body {background-image: url("../img/hg_sq-1280.jpg")}
}
@media only screen and (min-height:641px) {
  body {background-image: url("../img/hg_sq-1280.jpg")}
}

@media only screen and (min-width:1281px) {
  body {background-image: url("../img/hg_sq-2560.jpg")}
}
@media only screen and (min-height:1281px) {
  body {background-image: url("../img/hg_sq-2560.jpg")}
}

@media only screen and (min-width:2561px) {
  body {background-image: url("../img/hg_sq-3840.jpg")}
}
@media only screen and (min-height:2561px) {
  body {background-image: url("../img/hg_sq-3840.jpg")}
}

@media only screen and (min-width:3841px) {
  body {background-image: url("../img/hg_ls-5760.jpg")}
}


/* FONT-SIZE
---------------------------------------------------------------------- */

@media only screen and (max-width:320px) {
  body {opacity: 0.9;
    font-size: 0.7em;}
}
@media only screen and (max-width:280px) {
  footer {font-size: 0.8em;}
}
@media only screen and (max-width:240px) {
  body {opacity: 1.0;
    font-size: 0.6em;}
  footer {font-size: 0.8em;}
}
@media only screen and (max-width:200px) {
  footer {font-size: 0.7em;}
}
@media only screen and (max-width:170px) {
  body {font-size: 0.5em;}
}