/*gridiMenuHamp6_liikkuvaPohja_Afr - */

* {
  box-sizing: border-box; /*MITÄ TÄMÄ TARKOITTI?*/
}



body {
	font-family: 'Montserrat', sans-serif;
/*background-image: url(bgimg1.png);  kuviollinen pohja tuli alle SOPII ALLE KUN PÄÄLLÄ OLEVAT LIIKKUU */
}


h1,h2,h3,h4	{
	font-family: 'Indie Flower', cursive;
}




#apu	{
		background-image: url(palmut3.jpg); /*kuviollinen pohja tuli alle - SOPII ALLE KUN PÄÄLLÄ OLEVAT LIIKKUU*

		background-repeat: no-repeat;	/*MITÄ TARKOITTI?*/
		background-size: cover;		/*MITÄ TARKOITTI?*/
		background-attachment: fixed; 	/*MITÄ TARKOITTI? - jos tätä ei, niin päällä ei ole irti-liikkuvaa aluetta*/
}


main {
	width: 800px;
	height: 200px;
}

header {

	/* kiinnitetty yläreunaan */
  	position: sticky;  /*You must specify at least one of top, right, bottom, or left */
top: 0;
 	/*background-color: #FABCAF;  rgba(241,241,241,0.8);*/
  	background-image: url(ylakuvat/MiamiCentrum1.jpg);
  	padding: 30px;
  	text-align: center;
  	font-size: 15px; /*25px;*/
}


nav 	{

	/* kiinnitetty yläreunaan */
  	position: sticky; /* You must specify at least one of top, right, bottom, or left */
	top: 0;

	background-image: url("palloja.jpg");
	padding-top: 10px;

}


.tyhjatila {

	width: 800px;
	height: 800px;

}


/*ei käytössä vaan suoraan css:n navissa*/
.varikasmenupalkki {

	/*linkkinappulapalkille harmaa tai värikäs kapea alue tai pallokuvioinen kuva*/
	/*background-image: linear-gradient(rgb(217, 194, 198),rgb(111, 107, 107)); HARMAA*/

	/*background-image: radial-gradient(red, yellow, green); AFRIKKASÄVYINEN*/
	/*background-image: radial-gradient(brown, yellow, green); AFRIKKASÄVYINEN */

	/*background-image: url("palloja.jpg");*/


	padding-top: 10px;
}







/*--------------LAATIKOT------------------*/

/*Revontulikuva*/
#eka	{
	position: absolute; /*MITÄ TARKOITTAA?*/

	left: 100px;
	top: 10px;
	z-index: 3; /*MITÄ TARKOITTAA?*/

}



#toka	{
	width: 700px;
	height: 200px;
	background-color: rgba(0,0,254,0.2); /* #ddc9e9; vaalean lila, rgba(0,254,0,0.7); läpinäkyvä vihreä*/
	position: absolute; /*MITÄ TARKOITTAA?*/

	left: 40px;
	top: 200px;
	z-index: 1; /*MITÄ TARKOITTAA?*/
	font-size: 20px;
	padding-top: 70px;

}


#kolmas	{
	width: 800px;
	height: 300px;
	background-color: rgba(0,0,254,0.3); /*läpinäkyvä lila*/
	position: fixed; /* relative absolute MITÄ TARKOITTAA?*/
	padding-top: 150px;
	padding-left: 50px;
	left: 200px;
	top: 100px;
	z-index: -1; /*6 MITÄ TARKOITTAA?*/
	font-size: 20px;

}

/* pieni laatikko, p-elementissä tekstiä*/

#kolmas p 	{
	background-color: #eeddf9; /*vaalean lila*/ /* white valkoinen pieni laatikko, p-elementissä tekstiä*/
	display: inline; /*MITÄ TARKOITTAA?*/

	padding: 30px;
	position: fixed; /* absolute; MITÄ TARKOITTAA?*/

	top: 50%;
	/*left: 50%;*/
	margin-left: 50px;
}


/*---------------------LAATIKOT PÄÄTTYY---------------------------------------*/



/* nav label, #hampurilainen, input -html alussa- oranssi hampurilaisvalikko piiloon  
JOS tätä ei ole - ISOLLA NÄYTÖLLÄ näkyy kolme hampurilaisvalikon viivaa allekkain*/

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




/*tällä tuli normi menu isolle näytölle*/

	#menu a {

		display: flex;
		/*display: block;  inline-block vierekkäin tai block; allekkain - samalla lailla display: flex*/
		width: 100%;
		padding: 0.2em;
		margin-bottom: 0.2em;
		background-color:rgb(134, 134, 131); /* VALIKON TAUSTA harmaa*/

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


		width: auto;
  		padding: 10px;
  		color: white;


/*UUSI LISÄYS ks. alta liittyy menun linkkien reunustamiseen tuli pyöristetyt reunat*/
		border: 1px solid #ccc; /* Reunus yksittäisille linkeille */
            	border-radius: 8px; /* Pyöristetyt kulmat linkeille */

	  	}
	  

	 #menu a:hover {
	  	background: #401408;
	  	color: yellow;
		}
	

 	/* menu vaakaan oletuksena  */
 	#menu { 
		display: flex; 

    justify-content: flex-end; /* Sijoittaa valikon oikealle */

		}


/*UUSI LISÄYS ks. alta liittyy menun linkkien reunustamiseen*/

/*.menu {*/






/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

/*olepa sinä gridi*/ /*indeksityyli.css 5 kpl columnh, x, y, z, f*/

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

/*---------------------------------------------------------------*/

.columnx { grid-row: 1 / 3; grid-column: 1 / 2; } /*aside-elementti X: -keskimmäiselle? (X = VASEMM.) #EBB8F5-lilalle boksille kerroin, että se on 2 rivin korkuinen ja ekassa 200 pikselin sarakkeessa*/

.columny { grid-row: 1 / 2; grid-column: 2 / 4; } /*main-elementti Y: -ylemmälle riville, 2 sarakkeen levyisenä*/


.columnz { grid-row: 2 / 3; grid-column: 2 / 4; } /*aside-elementti Z: -eka sarake vas? (Z = OIK.) laitoin HTML:ssä tälle väriksi PUUTERINSININEN style="background-color:powderblue;"*/


/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


aside	{
	background: #F7DFDA;
	padding: 20px;
	border: solid 1px black;
}


footer {
  /*background-color: #f1f1f1;*/
  padding: 10px;
  text-align: center;
}


/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/* Responsive layout - sarakkeet latoutumaan päällekkäin PIENELLÄ näytöllä maksimileveys 600 px tai pienemmäksi
kohdentamisen tapa kaarisulkeiden sisällä.*/ /*indeksityyli.css 5 kpl columnh, -x, -y, -z, -f*/

@media (max-width: 600px) {

.gridialue {
	grid-template-columns: auto;
	grid-template-rows: auto auto auto;
  }

.columnx { grid-row: 2 / 3; grid-column: 1 / 2; } /*aside*/
.columnz { grid-row: 3 / 4; grid-column: 1 / 2; } /*main*/ /*aside*/
.columny { grid-row: 1 / 2; grid-column: 1 / 2; } /*aside*/ /*main-elementti ylimmäksi 1/2 - pienellä näytöllä hampurilaisen kautta saa menun esille*/




/*ORANSSI hampurilaisvalikon 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;
  }



	/* Valikon kohteiden näyttäminen ja piilottaminen */
	/* kun PIENI NÄYTTÖ
	oikeassa yläkulmassa hampurilaisvalikko näkyy, mutta ison näytön menu piilotetaan, klikattava hampurilaisvalikkoa */

	  #menu { 
		display: none; 
	}


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

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





 
} /*media gridialue loppuu */

/*---------------------------------------------------------------------*/



/*ALLA OLEVA ON TÄÄLLÄ #menu*/

/*<title>Menu reunuksilla</title>


    <style>
        /* Yleiset tyylit valikolle */
        .menu {
            list-style: none; /* Poistaa luettelomerkit */
            padding: 0;
            margin: 0;
            display: flex; /* Vaakasuora valikko */
            justify-content: center;
           background-color: #f4f4f4; 
            border: 2px solid #ccc;  Reunus koko valikolle
            border-radius: 8px; /* Pyöristetyt kulmat */
        }

        .menu li {
            margin: 0;
        }

        .menu a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: #333;
            border: 1px solid #ccc; /* Reunus yksittäisille linkeille */
            border-radius: 4px; /* Pyöristetyt kulmat linkeille */
            margin: 5px; /* Väli linkkien välillä */
            background-color: #fff;
            transition: background-color 0.3s, color 0.3s;
        }

        .menu a:hover {
            background-color: #007BFF; /* Hover-efekti */
            color: #fff;
        }

        /* Pystysuora valikko */
        .vertical-menu {
            flex-direction: column; /* Muuttaa valikon pystysuoraksi */
            align-items: flex-start;
        }
    </style>

*/