/* Background */
body 
{ background: url(./images/background_texture.png), #333; text-align: center; }


/* Basic font styles */
a, p, span, div, h1, h2 
{ font-family: 'Oregano', sans-serif; font-size: 20px; text-decoration: none; color: #7ae204; margin: 0px; 
  transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s;  }


/* Upper headings */                          
h2 { font-size: 60px; font-weight: normal; text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); }
h1 { margin-top: 50px; font-size: 80px; text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); color: #71d203; }


/* Lower headings */
p  { clear: both; margin-top: 500px; font-size: 40px; text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); }
p#css3  { clear: both; margin-top: 360px; font-size: 20px; text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7);  }
p#other   { font-size: 30px; margin-top: 20px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); display: none; }
p#other a { font-size: 30px; text-decoration: underline;  }
p#copyright { font-size: 20px; margin-top: 20px; text-align: center; }
p#copyright  a { color: #fff; text-decoration: underline; }



h1:hover, h2:hover, p:hover, p#other:hover, p#other:hover a 
{ text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.7); color: #d0ff00; }


/* DIV styles - layout, default skin */
div.wrapper 
{ width: 1200px; height: 800px; margin: auto; }
div.inner 
{ width: 500px; height: 284px; float: left; margin: 50px 45px 0px 45px; border: 5px inset #000; box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.5); overflow: hidden; } 


/* Images hover transformation */
div.inner.one:hover
{ transform: rotate(-3deg) scale(1.05); -ms-transform: rotate(-3deg) scale(1.05); -webkit-transform: rotate(-3deg) scale(1.05);  box-shadow: 35px 35px 40px rgba(0, 0, 0, 0.5); } 
div.inner.two:hover
{ transform: rotate(3deg) scale(1.05); -ms-transform: rotate(3deg) scale(1.05); -webkit-transform: rotate(3deg) scale(1.05); box-shadow: 35px 35px 40px rgba(0, 0, 0, 0.5); } 


/* Images hover text */
span.hover                 
{ display: block; width: 500px, height: 394px; position: relative; top: 0px; font-size: 60px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); text-decoration: none; }
div.inner:hover span.hover 
{ top: -300px; transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); }