body{ 
 font-family: Avenir,Helvetica,Arial,sans-serif; 
 color: #000000;
 background-color: #ffffff;
 line-height: 1.2; 
 margin: 0px; 
 padding: 0px; 
} 
 
 
@viewport{ 
    zoom: 1.0; 
    width: device-width; 
} 
 
#hint{ 
 float:right; 
 padding: 0px 0px 0px 0px; 
 margin: 0px; 
 display: block; 
 width: 40%; 
} 
 
code{ 
 color: #527d88;
 font-size: 1.1rem; 
} 
 
a:link { 
 color: #777777;
 text-decoration: none; 
 font-weight: normal; 
 font-style: italic; 
} 
a:hover { 
 color: #999999;
 text-decoration: underline; 
} 
a:visited { 
 color: #777777;
 text-decoration: none; 
} 
 
#meka a{ 
color: #7b8e7b;
} 
#termo a{ 
color: #7a2817;
} 
#sahko a{ 
color: #527d88;
} 
#aalto a{ 
color: #a15e22;
} 
 
h1, h2, h3, h4, h5, h6 { 
 font-family: Century Gothic,Futura,Helvetica,sans-serif; 
 margin: 0px 0px 0px 0px; 
 padding: 5px 0px 5px 10%; 
} 
 
h1{ 
 font-size: clamp(1.5rem,8vw,4rem); 
 color: #333333;
 padding: 15px 0px 15px 10%; 
 clear: both; 
} 
 
h2{ 
 display: block; 
 background-color: #333333;
 border-bottom-right-radius: 5px; 
 border-top-right-radius: 5px; 
 -webkit-border-bottom-right-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius-bottomright: 5px; 
 -moz-border-radius-topright: 5px; 
 font-size: 1.5rem; 
 color: #ffffff;
 margin: 30px 0px 10px 0px; 
 clear: both; 
} 
 
#meka h2{ 
 background-color: #7b8e7b;
} 
#termo h2{ 
 background-color: #7a2817;
} 
#sahko h2{ 
 background-color: #527d88;
} 
#aalto h2{ 
 background-color: #a15e22 
} 
 
h3{ 
 font-size: 1.2rem; 
 color: #000000;
 margin: 10px 0px 10px 0px; 
} 
 
#meka h3{ 
 color: #7b8e7b;
} 
#termo h3{ 
 color: #7a2817;
} 
#sahko h3{ 
 color: #527d88;
} 
#aalto h3{ 
 color: #a15e22;
} 
 
h4{ 
 color: #000000;
} 
 
#meka h4{ 
 color: #7b8e7b;
} 
#termo h4{ 
 color: #7a2817;
} 
#sahko h4{ 
 color: #527d88;
} 
#aalto h4{ 
 color: #a15e22;
} 
 
h5{ 
 color: #000000;
} 
 
#meka h5{ 
 color: #7b8e7b;
} 
#termo h5{ 
 color: #7a2817;
} 
#sahko h5{ 
 color: #527d88;
} 
#aalto h5{ 
 color: #a15e22;
} 
 
ul{ 
 list-style-type: square; 
 text-align: justify; 
 padding-right:10px; 
} 
 
ul ul{ 
 list-style-type: disc; 
} 
 
ul ul ul{ 
 list-style-type: none; 
} 
 
em{ 
 font-style:italic; 
 color: #446655;
} 
 
img{ 
  margin: 5px; 
  padding: 5px; 
}  
 
table{ 
  padding: 5px; 
} 
 
table img{ 
 margin: 0px; 
 padding: 0px; 
} 
 
table p{ 
 padding: 0px; 
 margin: 0px; 
 color: #000000; 
} 
 
table i{ 
 color: #000000;
} 
 
table em{  
 font-style:normal; 
 font-weight:bold; 
 color: #445566; 
} 
 
p{ 
 text-align: justify; 
} 
 
ul{ 
 
} 
 
/***********************************************/ 
/* Layout Divs                                 */ 
/***********************************************/ 
 
 
#main{ 
 padding: 0 10% 0 0; 
} 
 
pre { 
  display: block; 
  font-family: monospace; 
  white-space: pre; 
  margin: 0.1em 0; 
  padding: 0 0 0 15%; 
} 
 
#stuffing ul table{  
 padding: 2px 5% 2px 5%;  
} 
#stuffing table p{  
 padding: 0px; 
 margin: 0px; 
}  
 
#info{ 
 float: left; 
 width: 95%; 
 margin: 0; 
 margin-top: 10px; 
 padding: 2px 0px 5px 5%; 
 font-size: 0.6rem; 
 text-align: left; 
 background-color: #333333;
 color: #ffffff;
} 
#info a{ 
 color: #ffffff;
} 
 
#stuffing{ 
 font-family: Avenir,Helvetica,Arial,sans-serif; 
 float: left; 
 width: 100%; 
} 
#stuffing h2, h3, h4, h5, h6{ 
 padding: 2px 2px 2px 10%; 
} 
#stuffing p{ 
 padding: 2px 2% 2px 10%; 
 
} 
#stuffing ul, table{ 
 padding: 1px 5% 1px 15%; 
} 
 
.important{ 
 font-family: Century Gothic, Helvetica, sans-serif; 
 padding: 20px 10px 20px 10px; 
 font-weight: bold; 
 color: #333333;
} 
 
.address{ 
 padding: 20px 10px 20px 25px; 
 font-family: Century Gothic, Helvetica, sans-serif; 
 font-weight: bold; 
 color: #333333;
} 
 
 
.leftfigfloat img{ 
 float: left; 
 padding: 0px 0px 0px 10%; 
} 
 
.leftfig img{ 
 padding: 0px 0px 0px 10%; 
} 
 
.rightfigfloat img{ 
 float: right; 
 margin: 5px 5px 5px 10px; 
 padding: 0px; 
} 
 
.rightfig{ 
 padding: 20px 20px 20px 15%; 
 box-sizing: border-box; 
} 
 
.rightfig img{ 
 margin: 0px 0px 0px 10px; 
} 
 
 
.logo img{ 
 float: right; 
 margin: 20px 10% 20px 10%; 
} 
 
@media only screen and (max-width: 1000px) { 
  .logo img{ 
  float:none; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 0px 0px 0px 10%; 
  } 
   
  #hint{ 
  float:none; 
  padding: 0px; 
  display: block; 
  width: 100%; 
  block-size:8rem; 
  } 
   
  h1{ 
   text-align:center; 
  } 
 
   
} 
 
 
#stuffing details > summary { 
  font-family: Century Gothic,Futura,Helvetica,sans-serif; 
  font-size: 1.0rem; 
  font-weight: bold; 
  padding: 5px 0px 5px 10%; 
} 
 
#meka details > summary { 
  color: #677366;
} 
#termo details > summary { 
  color: #7a2817;
} 
#sahko details > summary { 
  color: #42656e;
} 
#aalto details > summary { 
  color: #874e1c;
} 
 
 
#stuffing details > details > summary { 
  font-family: Century Gothic,Futura,Helvetica,sans-serif; 
  font-weight: bold; 
  padding: 2px 0px 2px 12%; 
} 
 
#stuffing details > p { 
 padding: 1px 5% 1px 14%; 
} 
 
#stuffing details > ul { 
  padding: 1px 5% 1px 16%; 
} 
 
#stuffing details > ul ul { 
  padding: 1px 5px 1px 4%; 
} 
 
@media (prefers-color-scheme: dark) { 
  body {  
    color: #ffffff;
    background-color: #000000;
  } 
   
  h1{ 
    color: #ffffff;
  } 
  h2{ 
    color: #ffffff;
  } 
  h3{ 
    color: #ffffff;
  } 
 
#navi h3 { 
 background-color: #000000;
 color: #ffffff;
} 
 
#link h3 { 
 background-color: #000000;
 color: #ffffff;
} 
 
#navi a:hover{ 
 background-color: #000000;
 color: #ffffff;
} 
 
#link a:hover{ 
 background-color: #000000;
 color: #ffffff;
} 
 
}