@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');


* {box-sizing: border-box}


body {
background:url(https://jodochus.net/y/k/stardust4.png) repeat fixed;

}

#main{
  padding: 20px 0px 20px 0px;
  width: 75%;
  margin: auto;
font-family: "Arimo", sans-serif;
  font-weight: 400;
  color: #333333;

}


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


.content {
  padding: 20px;

}

.column1 {
  float: left;
  width: 50%;
  font-family: "Bodoni Moda", serif;
  padding: 15px;
}

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

.column2 {
  float: left;
  width: 50%;
  font-family: "Bodoni Moda", serif;
  padding: 15px;
}

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

.columnkisa {
  float: left;
  width: 50%;
  font-family: "Bodoni Moda", serif;
  padding: 15px;
}

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


.img4 {
	padding:3px;
	border:2px solid #eaeaea;
	background-color: #c3c3c3;
	overflow: hidden; 
	border-radius: 30px; 
	box-shadow: 0 0 12px #818181; 
        height:180px;
        padding: 0px; 

}
.img {
	padding:3px;
	border:1px solid #eaeaea;
	background-color: #ffffff;
	overflow: hidden; 
	border-radius: 30px; 
	box-shadow: 0 0 6px #818181; 
}

.haka
{
	font-family: Times New Roman;
	font-size: 4em; 
	color:#5c5147; 
	text-align:left;
}
.pikkuhaka
{
	font-family: Times New Roman;
	font-size: 2em; 
	color:#5c5147; 
	text-align:center;
}


.txt
{
text-align: justify;
font-size: 12pt;
letter-spacing:0.5pt;
font-family: "Arimo", sans-serif;
line-height: 22px;
color: #251e17;
text-shadow: 1px 1px #fff9f2;
cursor: default;
}
.kisat
{
font-family: "Arimo", sans-serif;
color:#251e17;
}


.hot {
    margin: 40px 0 5px 0;
    font-family: "Instrument Serif", serif;
    text-transform:uppercase;
    font-size:49pt; 
    text-align: center;
    padding: 15px 0px 10px 0px;
    text-shadow: 1px 1px #fffbf7;
    letter-spacing:3px;
    color:#5c5147; 
    border-bottom: #c5b6a7 2px solid; 
    font-weight:200;
}


.ot {
    font-family: "Instrument Serif", serif;
    font-size:20pt; 
    text-align: left;
    padding: 15px 0px 10px 0px;
    text-shadow: 1px 1px #fff9f2;
    letter-spacing:3px;
    color:#5c5147; 
    border-bottom: #c5b6a7 1px solid; 
    font-weight:200;
}


hr{
    margin: 30px 0 30px 0;
    color: #3d3c3f;

}


.tiedot
{
font-size: 16.5pt;
text-align:center;
line-height: 23px;
color:#251e17;
text-shadow: 1px 1px #fff9f2;
font-family: "Instrument Serif", serif;
letter-spacing: 1px;
}
.alat
{
text-align: center;
font-size: 12pt;
color:#251e17;
letter-spacing: 1px;
font-family: "Instrument Serif", serif;

}
.copyt{
font-family: "Instrument Serif", serif;
color:#555555;
text-transform:uppercase;
text-align:center;
font-size: 8pt;

}
.tab {
  overflow: hidden;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}
.paikkyot {
font-family: "Instrument Serif", serif;
    font-size:16pt; 
    letter-spacing:1px;
    font-weight:bold;
    color:#251e17; 
text-shadow: 1px 1px #fff9f2;
  text-decoration:none;

 
}
.paikkyot:hover {
	color:#c5b6a7;
	  cursor:hand;
	    text-decoration:underline;
}
    
.piilodiv {
	display:none;


}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


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

.column2 {
    display: block;
    width: 100%;
    padding: 5px;
}
.hot{
    font-family: "Instrument Serif", serif;
    text-transform:uppercase;
  font-size: 44pt;

}

.columnkisa {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 10pt; 
}




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

.tiedot{
  font-size: 14pt;
}
.hot{
    font-family: "Instrument Serif", serif;
    text-transform:uppercase;
  font-size: 44pt;
}
.kisat
{
font-size: 11pt; 
font-family: "Arimo", sans-serif;
}
.copyt{

font-size: 6pt;

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

.tiedot{
  font-size: 14pt;
}
.hot{
    font-family: "Instrument Serif", serif;
    text-transform:uppercase;
  font-size: 35pt;

}
.kisat
{
font-size: 10pt; 
font-family: "Arimo", sans-serif;
}
.txt
{
text-align: justify;
font-size: 10pt;
letter-spacing:0.5pt;
font-family: "Arimo", sans-serif;
line-height: 22px;
cursor: default;
}


.haka
{
font-family: Times New Roman;
font-size: 3em; 
text-align:left;
}
.pikkuhaka
{
font-family: Times New Roman;
font-size: 1em; 
text-align:center;
}