@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

* {box-sizing: border-box}

body {
  margin: 30px 0 30px 0;
background:url(https://jodochus.net/iy/stardust5.png) repeat fixed;
  font-family: Arial, Helvetica, sans-serif;
}

#main{
  width: 75%;
  margin: auto;
  box-shadow: 0 0 0px #;
  font-family: "Source Serif 4", serif;
  text-shadow: 1px 1px #ffffff;
  font-weight: 400;
  color: #333333;

}

.otsikkoalue {
  background: url(iy_trakp.png) center top no-repeat;
  padding: 60px 0px 60px 0px;
  line-height:40pt;

}
A:link{color:#2f3a4a;text-decoration:underline;cursor:hand;font-weight:bold;}
A:visited{color:#2f3a4a;text-decoration:underline;cursor:hand;font-weight:bold;}
A:active{color:#2f3a4a;text-decoration:none;cursor:hand;font-weight:bold;}
A:hover{color:#2f3a4a;text-decoration:none;cursor:hand;font-weight:bold;transition: all .3s linear;
}


.content {
  padding: 10px;

}

.column1 {
  float: left;
  width: 40%;
  font-family: Garamond;
  padding: 15px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.column2 {
  float: left;
  width: 60%;
  padding: 15px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.column0 {
  float: left;
  width: 50%;
  padding: 15px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}


.otsikko{
font-family: "Source Serif 4", serif;
 font-size: 38pt;
 text-transform:uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-style: bold;
  text-shadow: 1px 1px #ffffff;
  color: #333333;
  text-align: center;


}
.alaotsikko{
font-family: "Source Serif 4", serif;
  font-size: 25pt;
  font-weight: 600;
 text-transform:lowercase;
 text-shadow: 1px 1px #ffffff;
  letter-spacing: 4px;
  color: #555555;	
  text-align: center;

}
hr.yla {
  border: 1px solid #B6B7BA;
  margin: 30px 0px 30px 0px;
}


.teksti, .txt{
font-family: "Source Serif 4", serif;
  font-weight: 400;
  font-size: 13pt;
  color: #333333;
  line-height:16pt;
  text-shadow: 1px 1px #ffffff;
}

.suku{
font-family: "Source Serif 4", serif;
  font-weight: 400;
  letter-spacing:0.5px;
  font-size: 12pt;
  color: #333333;
  text-shadow: 1px 1px #ffffff;
  line-height:16pt;
}

.copy{
font-family: "Source Serif 4", serif;
  font-weight: 400;
  text-shadow: 1px 1px #ffffff;
  letter-spacing:0.5px;
  font-size: 10pt;
  color: #333333;
  line-height:16pt;
}

.h2{
font-family: "Source Serif 4", serif;
  font-weight: 800;
  color: #141813;
  font-style: bold;
  text-shadow: 1px 1px #ffffff;
  font-size: 33pt;
}

.h1{
font-family: "Source Serif 4", serif;
  font-weight: 800;
  color: #141813;
  font-style: bold;
  text-shadow: 1px 1px #ffffff;
  font-size: 19pt;
}

.palk{
font-family: "Source Serif 4", serif;
  font-weight: 800;
  color: #141813;
  text-shadow: 1px 1px #ffffff;
  font-size: 13pt;
}
.img2 {
  max-width: 70%;
  padding: 0px; 

}
.img1 {
  max-width: 60%;
  padding: 0px; 

}



@media screen and (max-width: 1024px) {
  #main{
    width: 95%;
    }
  
  .column0, .column1, .column2 {
    width: 100%;
    display: block;
    
}


@media screen and (max-width: 768px) {
  #main{
    width: 95%;
}

.suku{
  font-size: 10.5pt;
}
.img2 {
  max-width: 100%;

}


@media screen and (max-width: 600px) {
  #main{
    width: 95%;
    }

.otsikko{
 font-size: 32pt;

}
.alaotsikko{
  font-size: 20pt;
}


.teksti, .txt{
  font-size: 11pt;
}