/* 
  Talvellan 15 - 2026
  käyttää rgba -arvoja opacityn sijaan.
  @media korjailtu.
*/
* {
    box-sizing: border-box; /*padding ei kasvata leveyttä */
}


:root {
	 --orange1: #fcb96c;    /* vaaleampi oranssi */
	 --orange2: #e79e56;    /* tummempi oranssi */ 
	 --blue0: #d4e2e5;		/* lähes valkea */
	 --blue1: #6fd4ff;		/* kirkas sininen */
	 --blue2: #5eb4e1;		/* vaalea sininen */
	 --blue3: #0b5687;      /* sininen    */
	 --blue4: #094069;      /* navy blue */	 
	 --blue5: #003155;		/* tumma sininen */
	 --blue6: #041d34;		/* lähes musta */
	 --blue2rgb: 37, 71, 88;  /* sininen, taustan rgba tarvitsee r,g,b */
	 
	 --tausta: var(--blue5);	/* Nettisivun tausta, pohjaväri */
	 --kehysviiva: var(--blue2);/* taulujen kehykset    */
	 --erotin: var(--blue2) ; 	 	/* Otsikon erotinmerkit */
	 --kirkas: var(--blue0); 	 /* kirkas sininen, otsikot */
	 --teksti: black;
	 
}

body {	
	background-color: var(--tausta);
	background-image: 
	  url("talvellan.png"), 
	  linear-gradient(to bottom, var(--blue5), var(--blue4), var(--blue3));
    background-repeat: no-repeat;
    background-position: center top;
    border-style: none;
    background-size: auto auto;
}

.snow {
	/* Place snow at the center of the *screen*, then offset flakes around that center.*/
    pointer-events: none;
    position: fixed;
	inset: 0;
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);	
    z-index: 0;

    width: 10px;
    height: 10px;
    background: #fff;
	opacity: 0.5;

    box-shadow:
    -300px  -450px #fff,
     100px  -400px #fff,
    -150px  -350px #fff,
     250px  -300px #fff,
    -400px  -250px  #fff,

    -300px -200px #fff,
     100px -150px #fff,
    -150px  100px #fff,
     250px  200px #fff,
    -400px  50px  #fff,

    -300px  100px #fff,
     100px  150px #fff,
    -150px  200px #fff,
     300px  250px #fff,
    -400px  300px  #fff;

    animation: snow-fall 30s linear infinite;
}

@keyframes snow-fall {
    from { transform: translate(-50%, -50%) translate(-10px, -50vh); }
    to   { transform: translate(-50%, -50%) translate(10px, 50vh); }
}

/* Pixelated font */
@font-face {
    font-family: "PressStart2P";
    src: url('press-start-2p.woff') format('woff');
    /* font-weight: normal; */
    /* font-style: normal; */
    font-display: swap;
}


h1 {
	font-family: "PressStart2P", VT323, monospace;
	font-size: 220%;
	color: var(--kirkas);
    text-shadow: 5px 5px 3px black; 
	letter-spacing:5px;
}

h2 { 
	color: var(--erotin);
	font-family: 'PressStart2P', VT323, monospace;	
	text-shadow: 4px 4px 1px black;
	font-size: 120%;
	letter-spacing:3px;
}

.hero {
	padding: 10px;
	margin-bottom: 30px;	
	text-align: center;
	z-index: 1; /* in front of snow fall */

}
/*
.hero b {
	color: var(--erotin);
	font-size: 80%;
} */



/* Tab-frame pages */
/* Hide radio buttons */
div.tab-frame input{ display:none;} 

/* Base tab button style */
div.tab-frame label{ display:block; float:left; padding:5px 5px; cursor:pointer;
					 margin: 7px; outline: 4px outset var(--blue1); }

div.tab-frame label:hover{float:left; padding:5px 5px;
                color: var(--teksti); background-color: var(--blue2);
		     	margin: 7px; outline: 4px inset var(--blue1);}


/* Kyyla.org link, looks like tab */
div.tab-frame a{ float:left; padding:5px 5px; 
                 margin: 7px; outline: 4px outset var(--blue1);} 
				 
div.tab-frame a:hover{ float:left; padding:5px 5px; 
		color: var(--teksti); background-color: var(--blue2); 
		margin: 7px; outline: 4px inset var(--blue1); } 

/* Show the selected tab content */
div.tab-frame input:checked + label{ background: var(--blue1); color:var(--teksti); cursor:default;}

/* Hide tab content */
div.tab-frame div.tab{ display:none; padding:5px 5px; clear:left;}

/* Selector */
div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked ~ .tab:nth-of-type(4),
div.tab-frame input:nth-of-type(5):checked ~ .tab:nth-of-type(5) 
{ display:block;}


/* Sisältää headerin, navigaation, sisällön ja footerin */
.laatikko {
	/* Tässä transparent, ei ääriviivaa */
	/* border-radius: 15px; */
	width:680px;	
	margin: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* border: 1px solid black; */
	border-style: none; 
	padding: 4px;
	z-index: 1; /* in front of snow fall */
}

.sisalto {
	padding: 50px 15px 15px;
	line-height: 1.5;
	position: relative;
	/* Opacity replaced with rgba */
	
	background: url("snowbar.png") no-repeat top center, rgba(94, 180, 225, 0.8);
	background-size: 100% auto, auto;	
	
  box-shadow: 
    -4px 0 0 var(--blue6), /* left */  
	4px 0 0 var(--blue6), /* right */ 
    0 4px 0 var(--blue6), /* bottom */ 

    -8px 0 0 var(--blue4), /* left */  
	8px 0 0 var(--blue4), /* right */ 
    0 8px 0 var(--blue4); /* bottom */		
}

.heippa { 
	/* background-color: var(--tausta);  */
	/* background-color:royalblue; */
	color: var(--teksti);
	border: 5px solid var(--orange1);
    padding: 5px 5px 5px 5px; 
}

/* Ylälogo head.txt*/
header {
	/* background-image: url("pic/log.jpg");
	background-repeat: no-repeat; */
    background-color: white;
	background-position: right top;
	padding: 0px; 
	height: 80px;
	border-style: none;
	text-align: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	max-width:100%; /*skaalaa 1-100*/
}

/* Lopun yhteystiedot bot.txt */
/*
 Can’t use opacity: on the parent, because that affects everything inside:
 background, text, border, shadows
*/ 

footer {
	margin-top: 20px;
	padding: 30px 15px 15px;

	background: url("snowbar.png") no-repeat top center, rgba(94, 180, 225, 0.8); 
	background-size: 100% auto, auto;		
	
	font-size: 80%;
    text-align: right;

  box-shadow: 
    -4px 0 0 var(--blue6), /* left */  
	4px 0 0 var(--blue6), /* right */ 
    0 4px 0 var(--blue6), /* bottom */ 

    -8px 0 0 var(--blue4), /* left */  
	8px 0 0 var(--blue4), /* right */ 
    0 8px 0 var(--blue4); /* bottom */	
}


/* Navigaatiolinkit top.txt */
/* nav { */
    /* overflow: hidden; */
	/* border: 1px solid var(--kehysviiva); */
	/* border-style: solid none solid none; */
/* } */
/* nav a { */
    /* float: left; */
    /* display: block; */
    /* color: var(--kirkas); */
    /* text-align: center; */
    /* padding: 5px 5px; */
    /* text-decoration: none; */
/* } */
/* nav a:hover { */
    /* background-color: var(--blue3); */
    /* color: var(--blue6); */
/* } */

/* Peruslinkit */
a {
    background-color: inherit;
    color: var(--teksti);
	text-decoration: none;
}

a:hover {
    background-color: #ddd;
    color: var(--kirkas);
	text-decoration: none;
}

/* Links inside tab-frame content */
/* div.tab a:link, a:visited { */
	/* padding: 0; */
	/* outline-style: none; */
	/* display: inline; */
	/* float: none; */
    /* color: black; */
	/* text-decoration: underline; */
/* } */

/* div.tab a:hover, a:active { */
	/* padding: 0; */
	/* outline-style: none; */
	/* display: inline; */
	/* float: none; */
    /* background-color: var(--blue1); */
    /* color: black; */
	/* text-decoration: underline; */
	/* /* outline-style: none; */ 
/* } */




/* Taulukko */
/* tr:nth-child(even){background-color: cornsilk;} */

table {
	/* background-color:  --kirkas; */
	border: 15px var(--kehysviiva);
	border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
	padding: 15px;
}

th, tr, td  {
	color: var(--teksti); 
	/* background-color: var(--kirkas); */
	/* border: 1px black; */
}

/* Create two columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    /* height: 300px; Should be removed. Only for demonstration */
}
/* Left and right column */
.column.side {
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the sidebar 
aside {
	float: right;
    background-color: blue;
    padding: 10px;
    text-align: center;
} */

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media (max-width: 660px) {
	body { 
		background-size: 900px auto, auto; /* smaller image. gradient stays full screen  */ 
		background-position: center top;
	}
	hero { 
		padding: 5px;
		margin-bottom: 20px;
	}
    .column.side, .topnav, .laatikko, .header {
        width: 100%;
    }
	.tab-frame, .tab {
		width: 100%;
		padding: 0px;
		border: 0px;
	}
	.laatikko {
		border: 0px;
	}
	.sisalto {
		padding: 25px 5px 10px;
		/* Keep the same transparency on mobile */ 
		background: url("snowbar.png") no-repeat top center, rgba(94, 180, 225, 0.8); 
		background-size: 100% auto, auto;		
	}
	table {
		padding: 5px;
		border: 0px;
	}
	footer { 
		margin-top: 15px; padding: 25px 10px 10px; 
	}	
	/* body {background-image:none;} */
}