:root{
	  --color-1: #F6F6F6;
	  --color-2: #82B6C3;
	  --color-3: #7B7E84;
	  --color-4: #FFFFFF;
	  
	  /*--color-2: #82B6C3;
	  --color-3: #7B7E84;*/
	  
      --color-background-1: #FFFFFF;
	  --color-background-2: #FBFCFC ;
	  --color-background-3: #FFFFFF;
	  --color-background-4: #FFFFFF;
	  
	  --color-menu-1: #333333;
	  
	  --color-text-1: #333333;
	  --color-text-2: #333333;
	  --color-text-3: #333333;
	  --color-text-4: #333333;
	  
	  --color-text-1-link: #333333;
	  --color-text-2-link: #333333;
	  --color-text-3-link: #333333;
	  --color-text-4-link: #333333;
	  --color-hover: #82B6C3;
	  

	  
	  --color-highliht: #2F3E46;
	  --color-hover: #82B6C3;
	  --color-elementhasfocus: #2F3E46;

	  
	  --font-1: Verdana, sans-serif;
	  --font-2: 'Days One', Verdana, sans-serif;
	  
	  --font-size-xsmall: 0.6em;
	  --font-size-small: 0.9em;
	  --font-size-normal: 1em;
	  --font-size-large: 1.1em;
	  --font-size-xlarge: 1.2em;
     

	 }
	  
/*==========================*/
@keyframes animate{ 
   0%{ 
     opacity: 0; 
   } 
   50%{ 
     opacity: 0.7; 
   } 
   100%{ 
     opacity: 0; 
   } 
 } 
 

/*==========================*/
 
div {
  font-family: var(--font-1);
  font-size: var(--font-size-normal);
  color:var(--color-text-1); 
}

p {
  font-family: var(--font-1);
  font-size: var(--font-size-normal);
  margin:3px 3px 3px 3px;
  color:var(--color-text-1);
  font-weight:normal;  
}

h1 {
  font-family:  var(--font-2);
  color:var(--color-text-1);
  text-align: center;
  font-size: var(--font-size-xlarge);
  margin-top:5px;
  margin-bottom:5px;

}

h2 {
  font-family: var(--font-1);
  text-align: center;
  font-size: var(--font-size-normal);
  color:var(--color-text-1); 
  margin-top:10px;
  margin-bottom:5px;
}

h3 {
  font-family: var(--font-1);
  text-align: center;
  font-size: var(--font-size-xsmall);
  color:var(--color-text-1); 
  margin-top:5px;
  margin-bottom:5px;
}

form {
	margin-top:10px;
	margin-bottom:5px;
}

select {
	text-align: center;
}

input, select, checkbox, radiobutton, textarea, date, submit, file {
	border: 1px solid var(--color-2);
	border-radius:5px;
	font-family:  var(--font-1);
	color:var(--color-text-1);
	background-color: var(--color-background-1);
}


/*==========================*/
.alert-text {
  font-family: var(--font-1);
  font-size: var(--font-size-normal);
  margin:3px 3px 3px 3px;
  color: red;
  animation: animate 1.0s linear infinite; 
} 

.lure-text {
  font-family: var(--font-1);
  font-size: var(--font-size-normal);
  margin:3px 3px 3px 3px;
  color: green;
  animation: animate 1.0s linear infinite; 
} 

.pikkuteksti {
  width:80%;
  font-family: var(--font-1);
  font-size: 0.8em;
  margin:3px 3px 3px 3px;
  color:var(--color-text-1); 
}

a:visited, a:link {
  color:var(--color-text-1-link);
  text-decoration: none;
  font-family: var(--font-1);
  font-size: var(--font-size-normal);
  
}



.xsmall-text{
  font-family: var(--font-1);
  font-size: var(--font-size-xsmall);
  margin:3px 3px 3px 3px;
  color:var(--color-text-1); 	
}








/* koontisivu */
.wrapper {
  font-family: var(--font-1);
  font-size: 0.8em;
  background-color: var(--color-background-1);
  
 
} 
 

/* Style the header */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;

  background-color: var(--color-background-1);
  color: var(--color-menu-1);
  min-height: 60px;
  z-index:1;
}


.mainmenu {
  background-color: var(--color-background-1);
  color: var(--color-menu-1);
  font-size: var(--font-size-normal);
  border-bottom: solid var(--color-2);
  border-width:1px;

}


/* Style the middle column */
.middle {
 
  margin-top: 5px;
  font-size: var(--font-size-normal);
  background-color: var(--color-background-1);

}

/* Style the footer */
.footer {
  margin-top: 20px;
  background-color: var(--color-background-1);

}