/* Playing with fonts, just for the sake of it...*/
@font-face {
    font-family: "myfont";
    src: url("Roboto-Regular-webfont.eot");
    src: url("Roboto-Regular-webfont.woff") format('woff'),
         url("Roboto-Regular-webfont.ttf") format('truetype');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/Roboto-Italic-webfont.eot");
    src: url("fonts/Roboto-Italic-webfont.woff") format('woff');
    font-style: italic;
}

html {
	height: 100%;
	width: 100%;
}

body {
	background: black;
	font-family: myfont;
	color: snow;
	min-height: 100%;
	-webkit-text-shadow: 0 1px 1px rgba(256, 256, 256, 0.5);
	        text-shadow: 0 1px 1px rgba(256, 256, 256, 0.5);

	background-image: url(michelangelo.png);
	background-repeat: no-repeat;
	background-position: 5px 1px;
}	


a {
	text-decoration: none;
	color: snow;
	margin-bottom: 0.1em;
	padding: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	border-radius: 3px;
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}			

a:hover {
	color: hsla(30, 90%, 100%, 0.8);
	background: hsla(30, 20%, 40%,0.7);
}

#header, #gallery {
	margin: 1em;
}

#header {
	text-align: center;
	margin-bottom: 2.5em;
}

h1 { 
	text-align: center;
	font-style: italic;
	font-size: 160%;

}

footer {
	margin-top: auto;
	margin-left: 1em;
	font-size: 80%;
}

footer img {
	-webkit-transform: translate(0px, 2px);
	   -moz-transform: translate(0px, 2px);
	     -o-transform: translate(0px, 2px);
	        transform: translate(0px, 2px);
}

#gallery a:hover img {
  -webkit-transform: scale(1.3);
     -moz-transform: scale(1.3);
       -o-transform: scale(1.3);
          transform: scale(1.3);
}