* {
	margin:0;
	box-sizing: border-box;
	font-family:'Courgette';
}

header{

    background-color: rgb(0, 0, 0);
    color: white;
	position: fixed;
    top: 0;
	width: 100%;
}
/*-------------------------------dropdown----------------------------------*/
					.dropbtn {
						background-color: #fffd7c;
						color: white;
						padding: 16px;
						font-size: 16px;
						border: none;
					}
					
					.dropdown {
						position: relative;
						display: inline-block;
					}
					
					.dropdown-content {
						display: none;
						position: absolute;
						bottom: 0;
						left: 70px;
						background-color: #f1f1f1;
						min-width: 160px;
						box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
						z-index: 1;
						
					}

							

					.dropdown-content a {
						color: black;
						padding: 12px 16px;
						text-decoration: none;
						display: block;
					}
					.dropdown-content a:hover {background-color: #ddd;}

					.dropdown:hover .dropdown-content {display: block;}

					.dropdown:hover .dropbtn {background-color: #f1f1f1;}

			



    /* Här skriver du design för phone */
	body {
		background-image: url(../images/Backgroundconcept.png);
		background-size: cover;
	}

	img{
		width: 100%;
    	height: 100%;
	}

	#everything {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: 5% 15% 15% 15% 15% 15% 15% 5%; 
		grid-template-rows: 120px 800px 80px 3250px 300px;
		grid-template-areas: ". . . . . . . ."
							". introduction introduction introduction introduction introduction introduction ."
							". . . . . . . ."
							". main main main main main main ."
							". . . . . . . .";
		}

		#secondlayer {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 50px 1100px 150px 150px 50px 200px 150px 50px 150px 1100px 150px 150px;
			grid-template-areas: ". . . . . . . ."
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								". . . . . . . ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". . . . . . . ."
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								". . . . . . . ."

		}
		@media only screen and (min-width: 470px) {
			#secondlayer {
				display: grid;
				width: 100%;
				height: 110vh;
				grid-template-columns: repeat(8, 12.5%); 
				grid-template-rows: 50px 1100px 150px 150px 50px 200px 150px 50px 150px 900px 150px 150px;
				grid-template-areas: ". . . . . . . ."
									"part1 part1 part1 part1 part1 part1 part1 part1"
									"part1 part1 part1 part1 part1 part1 part1 part1"
									"part1 part1 part1 part1 part1 part1 part1 part1"
									". . . . . . . ."
									". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
									". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
									". . . . . . . ."
									"part2 part2 part2 part2 part2 part2 part2 part2"
									"part2 part2 part2 part2 part2 part2 part2 part2"
									"part2 part2 part2 part2 part2 part2 part2 part2"
									". . . . . . . ."
	
			}
			@media only screen and (min-width: 600px) {
			}
		}
	#Introduktion{	
		grid-area: introduction;
		background-color: white;
		border: 1px solid;
		text-align: center;
		font-size: 1.5em;
		padding: 10px;

	}

	#secondlayer1{	
		grid-area: part1;
		background-color: rgb(207, 207, 207);
		border: 1px solid;
		text-align: center;
		font-size: 1em;
		padding: 10px;


	}

		#img1_section{
			grid-area: skarpnäck;
		}

	#secondlayer2{	
		grid-area: part2;
		background-color: rgb(207, 207, 207);
		border: 1px solid;
		text-align: center;
		font-size: 1em;
		padding: 10px;


	}




	#textrutan {
		padding-top: 40px;
		grid-area: main;
		background-color: white;
		border: 1px solid;
		text-align: center;
		font-size: 1.5em;
	}

	#menu {

		position: fixed;
    	bottom: 0;
    	left: 0;
		width: 70px;
		height: 70px;
		padding-top: 5px;
	}



@media only screen and (min-width: 600px) {
    /* Här skriver du design för tablet */
	body {
		background-image: url(../images/Backgroundconcept.png);
		background-size: cover;
	}

	img{
		width: 100%;
    	height: 100%;
	}
	
		#everything {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: repeat(8, 12.5%); 
		grid-template-rows: 40px 80px 750px 80px 3850px 300px;
		grid-template-areas: ". . . . . . . ."
							". . . . . . . ."
							". introduction introduction introduction introduction introduction introduction ."
							". . . . . . . ."
							". main main main main main main ."
							". . . . . . . .";
		}

		#secondlayer {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 50px 1500px 150px 150px 50px 150px 150px 50px 1200px 150px 150px 150px;
			grid-template-areas: ". . . . . . . ."
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								". . . . . . . ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". . . . . . . ."
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								". . . . . . . ."

		}

		@media only screen and (min-width: 670px) {
		
		#secondlayer {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 50px 1250px 150px 150px 50px 150px 150px 50px 1000px 150px 150px 150px;
			grid-template-areas: ". . . . . . . ."
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								"part1 part1 part1 part1 part1 part1 part1 part1"
								". . . . . . . ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck skarpnäck ."
								". . . . . . . ."
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								"part2 part2 part2 part2 part2 part2 part2 part2"
								". . . . . . . ."

		}
	}

	#Introduktion{	
		grid-area: introduction;
		background-color: white;
		border: 2px solid;
		text-align: center;
		font-size: 1.5em;
		padding: 20px;

	}

	#secondlayer1{	
		grid-area: part1;
		background-color: rgb(207, 207, 207);
		border: 2px solid;
		text-align: center;
		font-size: 1em;
		padding: 20px;


	}

		#img1_section{
			grid-area: skarpnäck;
		}

	#secondlayer2{	
		grid-area: part2;
		background-color: rgb(207, 207, 207);
		border: 2px solid;
		text-align: center;
		font-size: 1em;
		padding: 20px;


	}




	#textrutan {
		padding: 50px;
		padding-top: 20px;
		grid-area: main;
		background-color: white;
		border: 2px solid;
		text-align: center;
		font-size: 1.5em;
	}

	#menu {

		position: fixed;
    	bottom: 0;
    	left: 0;
		width: 70px;
		height: 70px;
		padding-top: 5px;
	}
}

@media only screen and (min-width: 800px) {
    /* Här skriver du design för desktop */
	body {
		background-image: url(../images/Backgroundconcept.png);
		background-size: cover;
	}

	img{
		width: 100%;
    	height: 100%;
	}

		#everything {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: repeat(8, 12.5%); 
		grid-template-rows: 40px 80px 850px 80px 4650px;
		grid-template-areas: ". . . . . . . ."
							". . . . . . . ."
							". . introduction introduction introduction introduction. ."
							". . . . . . . ."
							". main main main main main main .";
		}

		#secondlayer {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 50px 150px 250px 2500px 50px 150px 150px 1200px 150px;
			grid-template-areas: ". . . . . . . ."
								"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
								"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
								". . . . part1 part1 part1 part1"
                                ". . . . . . . ."
								". part2 part2 part2 part2 part2 part2 ."
								". part2 part2 part2 part2 part2 part2 ."
								". part2 part2 part2 part2 part2 part2 ."
								". . . . . . . ."

		}
		@media only screen and (min-width: 860px) {

			#everything {
				display: grid;
				width: 100%;
				height: 110vh;
				grid-template-columns: repeat(8, 12.5%); 
				grid-template-rows: 40px 80px 850px 80px 4250px;
				grid-template-areas: ". . . . . . . ."
									". . . . . . . ."
									". . introduction introduction introduction introduction. ."
									". . . . . . . ."
									". main main main main main main .";
				}

		#secondlayer {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 50px 150px 250px 2200px 50px 150px 150px 1050px 150px;
			grid-template-areas: ". . . . . . . ."
								"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
								"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
								". . . . part1 part1 part1 part1"
                                ". . . . . . . ."
								". part2 part2 part2 part2 part2 part2 ."
								". part2 part2 part2 part2 part2 part2 ."
								". part2 part2 part2 part2 part2 part2 ."
								". . . . . . . ."

		}
	}

	@media only screen and (min-width: 930px) {

		#everything {
			display: grid;
			width: 100%;
			height: 110vh;
			grid-template-columns: repeat(8, 12.5%); 
			grid-template-rows: 40px 80px 850px 80px 3700px;
			grid-template-areas: ". . . . . . . ."
								". . . . . . . ."
								". . introduction introduction introduction introduction. ."
								". . . . . . . ."
								". main main main main main main .";
			}

	#secondlayer {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: repeat(8, 12.5%); 
		grid-template-rows: 50px 150px 250px 1900px 50px 150px 150px 900px 150px;
		grid-template-areas: ". . . . . . . ."
							"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
							"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
							". . . . part1 part1 part1 part1"
							". . . . . . . ."
							". part2 part2 part2 part2 part2 part2 ."
							". part2 part2 part2 part2 part2 part2 ."
							". part2 part2 part2 part2 part2 part2 ."
							". . . . . . . ."

	}
}

@media only screen and (min-width: 1030px) {

	#everything {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: repeat(8, 12.5%); 
		grid-template-rows: 40px 80px 650px 80px 3250px;
		grid-template-areas: ". . . . . . . ."
							". . . . . . . ."
							". . introduction introduction introduction introduction. ."
							". . . . . . . ."
							". main main main main main main .";
		}

#secondlayer {
	display: grid;
	width: 100%;
	height: 110vh;
	grid-template-columns: repeat(8, 12.5%); 
	grid-template-rows: 50px 150px 250px 1550px 50px 150px 150px 800px 150px;
	grid-template-areas: ". . . . . . . ."
						"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
						"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
						". . . . part1 part1 part1 part1"
						". . . . . . . ."
						". part2 part2 part2 part2 part2 part2 ."
						". part2 part2 part2 part2 part2 part2 ."
						". part2 part2 part2 part2 part2 part2 ."
						". . . . . . . ."

}
}

@media only screen and (min-width: 1220px) {

	#everything {
		display: grid;
		width: 100%;
		height: 110vh;
		grid-template-columns: repeat(8, 12.5%); 
		grid-template-rows: 40px 80px 650px 80px 2650px;
		grid-template-areas: ". . . . . . . ."
							". . . . . . . ."
							". . introduction introduction introduction introduction. ."
							". . . . . . . ."
							". main main main main main main .";
		}

#secondlayer {
	display: grid;
	width: 100%;
	height: 110vh;
	grid-template-columns: repeat(8, 12.5%); 
	grid-template-rows: 50px 150px 250px 1150px 50px 150px 150px 600px 150px;
	grid-template-areas: ". . . . . . . ."
						"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
						"skarpnäck skarpnäck skarpnäck . part1 part1 part1 part1"
						". . . . part1 part1 part1 part1"
						". . . . . . . ."
						". part2 part2 part2 part2 part2 part2 ."
						". part2 part2 part2 part2 part2 part2 ."
						". part2 part2 part2 part2 part2 part2 ."
						". . . . . . . ."

}
}

	#Introduktion{	
		grid-area: introduction;
		background-color: white;
		border: 2px solid;
		text-align: center;
		font-size: 1.5em;
		padding: 30px;

	}

	#secondlayer1{	
		grid-area: part1;
		background-color: rgb(207, 207, 207);
		border: 2px solid;
		text-align: center;
		font-size: 1em;
		Padding: 30px;

	}

		#img1_section{
			grid-area: skarpnäck;
		}

	#secondlayer2{	
		grid-area: part2;
		background-color: rgb(207, 207, 207);
		border: 2px solid;
		text-align: center;
		font-size: 1em;
		padding: 30px;


	}


	#textrutan {
		padding: 50px;
		padding-top: 20px;
		grid-area: main;
		background-color: white;
		border: 2px solid;
		text-align: center;
		font-size: 1.5em;
	}

	#menu {

		position: fixed;
    	bottom: 0;
    	left: 0;
		width: 70px;
		height: 70px;
		padding-top: 5px;
	}
}