body{ 
margin:0;
padding:0;
width:100%;
height:100%;
background-color:#000000;
font-family:arial;
font-size:14px;
color:#D0D080;
}



#header{ 
height:100px;
width:100%;
text-align:center;
}


#navi{ 
padding-top:16px;
padding-bottom:16px;
height:auto;
width:100%;
}

#center { 
clear:both;
padding-left:1em;
padding-right:1em;
padding-top:2em;
min-height:380px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:380px; /* for IE5.x and IE6 */

width:92%;
}

#notes { 
overflow:auto;
padding:4px;
margin-right:20px;
background-color:#FFFFFF; 
color:#10F010;
min-height:40px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:40px; /* for IE5.x and IE6 */

}


#footer { 
clear:both;
color:#008000;
margin-top:5em;
height:150px;
text-align:center;
}

#footer a{
  color:#20A020;
  text-decoration:underline;
}

p {
font-size:100%;

}

p.pieni
{
font-size:80%;
}


#navi a {
  margin:0.25em 4px;
  padding: 0.25em 0.5em;
  height: 2em;
  line-height: 2em;
  text-decoration: none;
  font-weight: bold;
  color:#F0F0F0; 
  border-radius:6px;
  border:1px solid #EEEE88;
  background-color:#606010;
}

#navi a:hover {
  color:#606010;
  background-color:#CCCC66;
}

#navi a.aktiivinen {
  color:#606010;
  background-color:#EEEE88;
  border:1px solid #F0F0F0;
}



#header h1{
  font-size:200%;
  font-weight:bold;
}

#header h3{
  font-size:120%;
}


#center h1{
  font-size:120%;
  font-weight:bold;
  text-align:center;
  padding-bottom:2em;
}

#navi h1{
  font-size:140%;
  text-align:left;
  text-decoration: underline;
  font-weight: normal;
  text-indent: 10px;  
  padding-bottom:1em;
}

#esittely{
  font-size:1.25em;
  line-height:1.5em;
}

#esittely img{
  width:90%;
  max-width:640px;
  box-shadow: 0 0 0 1px gray,0 0 0 8px white,0 0 0 10px #D0D080;
}

#esittely video{
  width:90%;
  max-width:640px;
  box-shadow: 0 0 0 1px gray,0 0 0 8px white,0 0 0 10px #D0D080;
}

.english{
	font-style: italic;
}


#cv{
  text-align:justify;
}

#cv h1{
  font-size:175%;
  font-weight:bold;
  text-align:right;
  text-decoration: underline;
}

#cv h2{
  font-size:150%;
  text-align:left;
  text-decoration: underline;
  margin-top:2em;
}



hr{
border:0;
height:1px;
width:95%;
background:#006400;
color:#006400;

}

.vaakarivi{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pystyrivi{
  display:flex;
  flex-direction: column;
  justify-content: center;
	align-items: center;
	gap:1.5em;
}

.tekstiruutu{
  margin-right:2em;
}

#yhteyslaatikko{
	width:100%;
  max-width:640px;
  display:flex;
  flex-direction: column;
  justify-content: center;
	align-items: center;
	border: 2px solid #D0D080;
	background: #0A0A0A;
	gap:0.75em;
	padding:8px;
}


#yhteyslaatikko a{
	color: #E0E0A0;
	font-weight:bold;
	text-decoration:none;
}



.yhteyskuva{
	width:100%;
  max-width:640px;
	box-shadow: 0 0 0 1px gray,0 0 0 8px white,0 0 0 10px #D0D080;
}



.esittelysarakkeet
{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
  grid-column-gap:2em;
  grid-row-gap:1.5em;
  align-items: center;
}

.sarakkeita2{
  display:grid;
  grid-template-columns: auto auto;
  grid-column-gap:2em;
  grid-row-gap:1.5em;
  align-items: center;
}

.vuosisarakkeet{
  display:grid;
  grid-template-columns: minmax(50px,max-content) auto;
  grid-column-gap:2em;
  grid-row-gap:2em;
}

.touringsarakkeet{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(320px, max-content) );
  grid-column-gap:6em;
  grid-row-gap:0.5em;
}


@media only screen and (min-width: 768px) {

.vuosisarakkeet{
  grid-template-columns: minmax(100px,max-content) auto;
}

#navi a {
  margin:0.25em 0.25em;
}

body{ 
  font-size:18px;
}

#center
  {
  max-width:1024px;
  }
}