@import url('https://fonts.googleapis.com/css?family=Architects+Daughter');

h1 {
padding-left:5%;
line-height:2em;
height:425px;
text-shadow: 0 5px 5px #FFFFFF, 0 -5px 5px #FFFFFF, 5px 0 5px #FFFFFF, -5px 0 5px #FFFFFF, 7px 7px 7px #4B4B4B;
background:url(h1_background.jpg) center no-repeat;
}


[itemprop="image"]{
box-shadow: 5px 4px 5px silver , -1px -1px 4px silver, inset 0px 0px 0px silver;
}

dd span {
color:orangered;
font-weight:bold;
}
figcaption.code {
text-align:left;
margin-left:0px;
}
ul.polaroid a:hover, figure.polaroid a:hover{
color:orangered;background-color:transparent;
/* Ueberschreibt Eigenschaften aus dem globalen CSS meiner Seite */
}


/* Polaroid fuer Listenelement */

ul.polaroid{
max-width:100%;
margin: 2em auto;
}
ul.polaroid li {
position: relative;
display:inline-block;
background-color:white;
background: linear-gradient(110deg, white, oldlace);
box-shadow:4px 4px 15px gray;
max-width:250px;
vertical-align:top;
list-style:none;
margin:0;
transition: all ease 0.6s;
}
ul.polaroid li:hover {
z-index:998;
transform: scale(1.1) rotate(0deg);
}
ul.polaroid a {
text-decoration:none;
font-family:'Architects Daughter';
color:dimgray;
}
ul.polaroid img {
max-width:90%;
height:auto;
margin:5% 5% 0 5%;
}
ul.polaroid span{
display:inline-block;
width:90%;
min-height:54px;
margin: 0 5% 5% 5%;
text-align:center;
}


/* Vortaeuschung eines zufaelligen Winkels */

.polaroid li:nth-child(2n+1) {
transform: rotate(-2deg);
}
.polaroid li:nth-child(3n+2) {
transform: rotate(1deg);
}
.polaroid li:nth-child(4n+3) {
transform: rotate(4deg);
}
.polaroid li:nth-child(5n+4) {
transform: rotate(-6deg);
}
.polaroid li:nth-child(6n+5) {
transform: rotate(4deg);
}

/* Beispiel fuer Figure und Figcaption */

figure a img:hover {
transform: scale(1); transition: all 0.5s ease-out;
/* Nur fuer diese Seite */
}

figure.polaroid{
background-color:white;background: linear-gradient(110deg, white, oldlace);
box-shadow:4px 4px 15px gray;
max-width:250px;
vertical-align:top;
transform:rotate(0.0deg);
transition:all ease 0.6s;
}
figure.polaroid:hover {
transform: scale(1.1) rotate(0deg);
}
figure.polaroid a {
text-decoration:none;
font-family:'Architects Daughter';
color:dimgray;
}
figure.polaroid img {
max-width:90%;
height:auto;
margin:5% 5% 0 5%;
}
figure.polaroid figcaption{
width:90%;
min-height:52px;
margin: 0 5% 5% 5%;
text-align:center;
font-family:'Architects Daughter';
color:dimgray;
}
.polacenter{
margin-left:auto;
margin-right:auto;
display:block;
}

/* Beispiel fuer Animation und Transition */
ul.beispiel_1{
max-width:70%;
margin-left:auto;
margin-right:auto;
}
ul.beispiel_1 li {
list-style:none;
max-width:80px;
display:inline-block;
background-color:white;
background:linear-gradient(110deg, white, oldlace);
box-shadow: 4px 4px 15px gray;
vertical-align: top;
margin:25px;
position:relative;
}
ul.beispiel_1 img {
max-width: 90%;
height: auto;
margin: 5% 5% 0 5%;
}
ul.beispiel_1 span {
font-family:'Architects Daughter';
display: inline-block;
width: 90%;
min-height: 17px;
margin: 0 5% 5% 5%;
text-align: center;
font-size:0.8em;
line-height:0.8em;
}
ul.beispiel_1 li:first-child {
background-color:goldenrod;
background:linear-gradient(110deg, goldenrod, orange);
color:white;
}
ul.beispiel_1 li.effects{
position: relative;
transform: rotate(4deg);
transition: all ease 0.6s;
}
ul.beispiel_1 li.effects:hover{
transform: scale(1.4) rotate(0deg);
z-index: 999;
}
.beispiel_1 li.effects.soundso:nth-child(1){
transform: rotate(8deg);
background-color:white;
background:linear-gradient(110deg, white, oldlace);
color:dimgray;
}
.beispiel_1 li.effects.soundso:nth-child(2){
transform: rotate(-8deg);
}
.beispiel_1 li.effects.soundso:nth-child(3){
transform: rotate(5deg);
}
.beispiel_1 li.effects.soundso:nth-child(4){
transform: rotate(-1deg);
}
ul.beispiel_1 li.effects.soundso:hover {
transform: scale(1.4) rotate(0deg);
z-index: 999;
}