* {
	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 700px 80px 1200px 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 300px 150px 150px 50px 150px 150px 50px 350px 250px 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: 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 700px 80px 1250px 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 450px 150px 150px 50px 150px 150px 50px 150px 350px 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 500px 80px 1300px;
		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 150px 850px 50px 150px 150px 150px 150px;
			grid-template-areas: ". . . . . . . ."
								"part1 part1 part1 part1 . skarpnäck skarpnäck skarpnäck"
								"part1 part1 part1 part1 . skarpnäck skarpnäck skarpnäck"
								"part1 part1 part1 part1 . . . ."
								". . . . . . . ."


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

			#everything {
				display: grid;
				width: 100%;
				height: 110vh;
				grid-template-columns: repeat(8, 12.5%); 
				grid-template-rows: 40px 80px 500px 80px 1000px;
				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 150px 500px 50px 150px 150px 150px 150px;
					grid-template-areas: ". . . . . . . ."
										"part1 part1 part1 part1 . skarpnäck skarpnäck skarpnäck"
										"part1 part1 part1 part1 . skarpnäck skarpnäck skarpnäck"
										"part1 part1 part1 part1 . . . ."
										". . . . . . . ."
		
		
				}
			}
	#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;
		}




	#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;
	}
}