/* import fontawesome */

//@import '../fontawesome/css/fontawesome.min.css';
//@import '../fontawesome/css/regular.min.css';
//@import '../fontawesome/css/solid.min.css';
@import url("http://fonts.googleapis.com/css?family=UnifrakturMaguntia|UnifrakturCook");
@import url("http://fonts.googleapis.com/css?family=Garamond");
@import url('http://fonts.cdnfonts.com/css/monotype-corsiva');



/* common styles * /
body {font-size: 100%}*/

//h1 { font-family: UnifrakturMaguntia; font-size: 26px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 27.4px; } 
h1 { font-family: UnifrakturMaguntia; font-size: 26px; font-style: normal; font-variant: normal; font-weight: 700; /*line-height: 27.4px;*/ } 
h2 { font-family: UnifrakturMaguntia; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 700; /*line-height: 23.4px;*/ } 
h3 { font-family: 'Monotype Corsiva'; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 700; /*line-height: 21.4px;*/ } 
p { font-family: Garamond; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; /*line-height: 24px;*/ color: black } 
blockquote { font-family: Garamond; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; /*line-height: 30px;*/ } 
pre { font-family: Garamond; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; /*line-height: 18.5667px;*/ }

/* dynamic */
h3, h2, h1 {font-size: 2.5vw; line-height: auto; clear: both;}
p, blockquote, pre {font-size: 2vw; line-height: auto; clear: both;}

//h3, h2, h1 {font-size: clamp(15px, 2.5vw, 20px);}
//p, blockquote, pre {font-size: clamp(13px, 2vw, 16px);}

a:link, a:visited {
  color: #0000fe;
  background-color: transparent;
  text-decoration: none;
}

a:hover, a:active {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}

img.hoover {
	width:10%;
}
img.hoover:hover {
  width:auto;
  height:auto;
}

img.beispiel1 {
 transition: transform 0.2s;
 float:left;
 //margin-right: 10px;
 margin-right: 1%;
}
img.beispiel1:hover {
 transform: scale(2.0, 2.0);
}
img.beispiel1:click {
 transform: scale(5.0, 5.0);
}

table {
  border-collapse: separate;
  border-spacing: 0.2em;
  width: auto;
  font-size: 1.9vw;
  color: black;
}
  
th, td {
  padding: .2em .5em;
  border-radius: .1em;  
}  

thead th {
  //background-color: #ffebe6;
  //color: #c32e04;
}

td {
  font-style: italic;
  text-align: right;
  box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,.5);
}   

td:empty{
  box-shadow: none;
}

iframe {
    max-width: 100%;
    max-height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: 1px;
  background-color: #ffb27f;
}

/* Header/Blog Title */
.header {
  padding: 1px;
  text-align: center;
  min-height: 150px;
  background: url(/pictures/KorbscheuneSchild2_.png);
  background-size:     contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* Change color on hover */
//.topnav a:hover {
//  background-color: #ffb27f;
//  color: black;
//}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 20%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 80%;
  height:80%;
  min-height: 1000px;
  padding-left: 20px;
  background: url(/pictures/Web_Background_30_2.gif);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: 0% 0%;

}

/* Add a card effect for articles */
.cardright {
  color: #0000fe;
  padding: 1px;
  margin-top: 1px;
}

.cardleft {
  color: #0000fe;
  padding: 1px;
  margin-top: 1px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 1px;
  color: #0000fe;
  text-align: center;
  margin-top: 1px;
}

/*<style media="all">
:root {
color-scheme: light;
supported-color-schemes: light;
}*/

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  img {
    opacity: .5;
  }
  .rightcolumn {
    background: none;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  h3, h2, h1 {font-size: 2.8vw; font-weight: bold;}
  p, blockquote, pre {font-size: 2.5vw; font-weight: bold;}
}

#zoom a {
    float: right;
    margin: 0 20px 10px 10px;
    border: 1px solid #000;
    text-indent: -1000em;
    overflow: hidden;
    display: block;
    width: 200px;
    height: 200px;
    background: url(../images/fashion-q-c-500-500-3.jpg) no-repeat top left;
}

#zoom a:hover {
    width: 400px;
    height: 400px;
    background-position: 0 0px;
}