/*indeksigrid-sivuni indeksigrid2.css = tyyligrid1 */
* {
  box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;

background-color: #d9d9f2; /*rgb(146, 136, 155);*/


}


h1,h2	{
	font-family: 'Indie Flower', cursive;
font-size: 20px;
}


h3,h4	{
	font-family: 'Indie Flower', cursive;
font-size: 30px;
}


/* header */
header {


 /* background-color: rgba(241,241,241,0.8); */
background-color: #e0e0db; /*rgb(146, 136, 155);*/

  /*background-image: url(Kissa/Merenneito.jpg);*/
  padding: 30px;
  text-align: center;
  font-size: 25px;
}


/* nav label, #purilainen, input -aivan alussa-

mutta löytyy hampurilaissäätöjä

JOS TÄMÄ ON POISSA KÄYTÖSTÄ - ISOLLA NÄYTÖLLÄ NÄKYY PURILAISEN
3 VIIVAA ALLEKKAIN

oranssi HAMPURILAISVALIKKO eli PURILAINEN piiloon 

JES PURILAINEN TULI NÄKYVIIN JA KLIKKAAMALLA TULI MENUVALIKKO ESIIN kapeat ALEKKAIN */

	  	nav label, #purilainen, input { 
		  display: none; 
	  	}



#laatikko	{
	/*width: 800px; */

	width: 100%;
	height: 800px; /*400*/

	border: dotted 5px rgb(62, 62, 63);
	padding: 40px;
	margin-left: 10px; /*0.5em;*/
	margin-right: 10px; /*0.5em;*/


	/*background-color: rgb(146, 136, 155);*/

	background-image: url(taustakuviksi/laatikkotausta.jpg); 

	/*background-image: url(indeksitaustat/MiamiBeach3.jpg); OLI KÄYTÖSSÄ nyt on palmut vain Asidessa*/

	background-repeat: no-repeat;

	/* border-box, padding-box tai content-box */
	background-origin: content-box;
/*color: white;*/
}



/*LINKIT 4 TILAA
NÄMÄ TEKEVÄT LINKISTÄ LAATIKKOMAISEN*/
/*text-decoration: none; TEKSTIN? ALLEVIIVAUS POIS 

nav a	{
	text-decoration: none; 
	background-color: navy;
	color: white;
	padding: 0.2em;
	border-bottom: 0.3em groove purple;
	margin-right: 0.5em;
}
*/

/*LEIJUMISTA TEHDÄÄN UUSI MUOTOILU KUN OLLAAN LINKIN PÄÄLLÄ

nav a:hover	{
	background-color: white;
	color: navy;
}
*/

/*VIERAILTU 
nav a:visited	{
	background-color: rgb(135, 135, 139);
	color: black;
}
*/

/*a:active*/








  /* VALIKKOKOHTEET pystysuoraan kun klik. HAMP.KUVAA ja perusmuotoilu - TÄSSÄ SIIS PIENELLE NÄYTÖLLE*/

	#menukohteet a {
		display: block; /* inline-block vierekkäin tai block; allekkain*/
		width: 100%;
		padding: 0.2em;
		margin-bottom: 0.2em;
		/* background-color:rgb(134, 134, 131); linkkivalikon TAUSTA harmaa*/
		background-image: url("Kissa/hiiri.jpg"); /*linkkivalikon tausta hiiri*/

		/* seuraava muotoilu poistaa alleviivaukset linkeistä */
		text-decoration: none;
		text-align: left; /* center;*/
	  	

	  	}
	  
	  #menukohteet a:hover {
	  	background: #f1f680;
	  	color: brown; /*linkin teksti keltainen kun kursori menee päälle*/
font-weight: bolder;
		}
	

 	/* VALIKKOKOHTEET VAAKAAN OLETUKSENA */
 	#menukohteet { 
		display: flex; 
		}

	#menukohteet a {
  		width: auto;
  		padding: 10px;
  		color: brown; /*linkin teksti Homepage ruskea */
/*font-style: bold; MITEN SAATIIN LIHAVOITUA CSS:SSÄ - ja html:ssä - ei näin*/
font-weight: bolder;
		}



	.gridialue {
	/* tämä muotoilu pitää asettaa juurikin gridin containerille */
		display: grid;
		grid-template-columns: 200px auto auto;
		grid-template-rows: auto auto; /*MUUTOS*/
		}
		
/*MUUTOS*/

.columnh { grid-row: 1 / 2; grid-column: 1 / 4; } /*header*/
.columnx { grid-row: 2 / 3; grid-column: 1 / 2; } /*aside x*/
.columny { grid-row: 2 / 3; grid-column: 2 / 3; } /*main*/
.columnz { grid-row: 2 / 3; grid-column: 3 / 4; } /*aside x*/
.columnf { grid-row: 3 / 4; grid-column: 1 / 4; } /*footer*/




/*MUUTOS*/
aside	{
	/*background:  #D4B8B8;  VAIHDOIN pink;    */
	/*background-image: url(indeksitaustat/palmut3Pieni.jpg);*/

background-color: #e0e0db; /*rgb(146, 136, 155);*/

	padding: 20px;
	border: solid 1px black;
}



footer {

	/*background-image: url(Kissa/scratch_cats.jpg);*/
	 background-color: #f1f1f1; /*  #8E8888; */
  	padding: 10px;
  	text-align: center;
}



/* MEDIA max-LEVEYS 600 px
Responsive layout - sarakkeet latoutumaan päällekkäin pienillä näytöillä */



@media (max-width: 600px) {

.gridialue {
	grid-template-columns: auto;
	grid-template-rows: auto auto auto; /*MUUTOS*/
  }
  
.columnh { grid-row: 1 / 2; grid-column: 1 / 2; } /*header*/

.columnx { grid-row: 2 / 3; grid-column: 1 / 2; } /*aside x*/
  
.columny { grid-row: 3 / 4; grid-column: 1 / 2; } /*main*/
 
.columnz { grid-row: 4 / 5; grid-column: 1 / 2; } /*aside x*/

.columnf { grid-row: 5 / 6; grid-column: 1 / 2; } /*footer*/
  

/*pienentyessä tulee RAKENNUS kuva esiin*/
#laatikko	{
	width: 400px;
	height: 800px;
	border: dotted 5px rgb(62, 62, 63);
	padding: 50px;
	/*background-color: rgb(146, 136, 155);*/

	background-image: url(indeksitaustat/building.jpg);
	background-repeat: no-repeat;

	/* border-box, padding-box tai content-box */
	background-origin: content-box;
/*color: black;*/
}




/*ORANSSI HAMPURILAISVALIKON eli PURILAISEN taustaväri*/

/* block allekkain vai inline-block vierekkäin */

nav label { 
    display: inline-block; 
    color: black;
    background: orange; 

    /* font-style: normal; */

    	font-size: 2em;
    	padding: .3em;
	position: fixed;
	top: 10px;
	right: 10px;
	height: 80px;
	z-index: 5000;
  }



 /*ASIDEen*/

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 5px;
  height: 5px;

}




  	/* Valikon kohteiden näyttäminen ja piilottaminen */
	/* kun PIENI NÄYTTÖ, OIK. YLÄKULM. hampurilainen näkyy, mutta valikkokohteet piilotetaan, klikattava hamp.valikkoa */

	  #menukohteet { 
		display: none; 
	}


	/* kun hampurilaista klikataan, muuttuu sen input-kenttä valituksi eli checked ja samalla otetaan alapuolelta menukohteet näkyville */

	  nav input:checked ~ #menukohteet { 
		display: inline-block;
	  }


/*ORANSSI HAMPURILAISVALIKON eli PURILAISEN taustaväri*/

/* block allekkain vai inline-block vierekkäin */

/*

nav label { 
    	display: inline-block; 
    	color: black;
    	background: orange; 

    	/* font-style: normal; */

    	font-size: 2em;
    	padding: .3em;
	position: fixed;
	top: 10px;
	right: 10px;
	height: 80px;
	z-index: 5000;
  }

*/
  
  
}