@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');

/* LINKIT */
a {
	color:#993300; /* LINKKIEN VÄRI */
}
a:hover  {
	color:#aaa;
	text-decoration:none;
	transition: color 0.5s ease;
}
body,html {height:100%;}
body {
	margin: 0 30px;
	font-size:11pt;
	font-family:"arial narrow",sans-serif;
	text-align:justify;
	background: url(vintage-concrete.png) #BEC3AC repeat;

	line-height:1.5;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

/* YLÄOSA, NAVI JA ALAOSA */
header {
	text-align:center;
	font-size:100px;
	font-family:'Fleur De Leah', cursive;
	color:#993300;
	padding-top:120px;
	padding-bottom:0px;
}
nav, footer {
	max-width:1000px;
	min-width:700px;
	margin: 0 auto;
	text-transform:uppercase;
	text-align:center;
	font-family:oswald,sans-serif;
	letter-spacing:10px;
	padding-top:30px;
	padding-bottom:30px;
	color:#fff;
}
footer {
	margin-bottom:30px;
}
nav a {
	color:#fff;
	text-decoration:none;
	padding: 20px 40px;
}
nav a:hover {
	background-color:rgba(255,255,255,0.05);
	transition: background-color 0.5s ease;
	color:#fff;
}

/* TEKSTIOSIO JA VÄLIOTSIKOT */
main {
	max-width:1000px;
	margin: 0 auto;
	color:#000;
	letter-spacing:1px;
	padding:30px 30px;
	line-height:1.6;
	display:block;
	background-color: rgba(248, 247, 238, 0.6);
	border-radius:2%;
	box-shadow: 1px 1px 5px 5px #a38072;
}

h1,h2 {
	font-family:'Oswald';
	font-size:20pt;
	color:#993300;
	font-weight: normal;
}
h2 {
	font-size:18pt;
}


h1::first-letter {
  font-weight:normal;
  font-size: 80px;
  font-family: 'Fleur De Leah', cursive;
  padding-right: 0.2em;
    }
h2::first-letter {
  font-weight:normal;
  font-size: 55px;
  font-family: 'Fleur De Leah', cursive;
  padding-right: 0.2em;
    }
    
.sig {
    	font-size:30px;
	font-family:'Zeyada', cursive;
	color:#993300;
}
.heppalinkki {
    font-size:30px;
	font-family:'Zeyada', cursive;
	color:#993300;
	text-decoration: none;
}
.kuva {
    height:200px;
    border-radius:5%;
}



.heppa {
position: relative;
  height: 150px;
  width:auto;
  margin: 10px 10px 10px 0;
	display: inline-block;
}

.hepo{
     display: block;
    height:100%;
    border: 1px solid #FFF;
    margin-right:20px;
}

.overlay {
position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  font-size: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.heppa:hover .overlay {
  opacity: 1;
}