h1{
	color: White;
	font-family: Arial;
	text-decoration: underline;
	text-align: center;
	font-size: 40px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	
}

@media screen and (max-width: 600px) {
  h1 {
	color: white;
    font-size:28px;
	margin-left: 5%;
	display: inline-block;
	text-align: center;
  }
}
h2{
	text-align: left;
	font-family: Arial;
	font-size: 20px;
	margin: auto;

}
@media screen and (max-width: 600px) {
  h2 {
    font-size:18px;

  }
}
h3{
	color: White;
	text-align: center;
	font-family: Arial;
	font-size: 20px;
}
body.body{ 
	background-image:url('Images/background.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
}
@media screen and (max-width: 600px) {
	body.body{
		background-color: white;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}
} 
form.submit{
	font-family: Arial;
	font-size: 20px;
	color: black;
	padding: 10px;
	text-align: center;
}
header.header {
  background: rgba(255,255,255,0.5);
  Width: 100%;
  Height: 80px;
  position: relative;
}

/* Table Shuffle */
table.style_shuffle {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  margin: auto;
  width: 75%;
}
@media screen and (max-width: 600px) {
	table.style_shuffle {
		width: 100%;
		font-size: 14px;
		table-layout: auto;
	}
}
td.style_shuffle_name {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  margin: auto;
  width:40%;
}
@media screen and (max-width: 600px) {
	td.style_shuffle_name {
		padding-right: 0px;
	}
}
	
td.style_shuffle_category {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 15%;
}
@media screen and (max-width: 600px) {
	td.style_shuffle_category {
		Width:15%;
	}
}

td.styleadd {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 15%;
  text-align: center;
}
@media screen and (max-width: 600px) {
	td.styleadd {
		Width: 2%;
	}
}

td.style_shuffle_buttons {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  padding-left:10px;
  padding-right: 10px;
  margin: auto;
  width: 20%;
  text-align: center;
}


/*Table Dinners*/
table.style_dinners {
	border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 80%;
  Margin: Auto;
  font-family: Arial;
}
th.style_dinners_name {
	font-size: 20px;
	Font-family: Arial;
	text-align: center;
	font-weight: bold;
	border: 1px solid;
	border-collapse: collapse;
	padding: 10px;
}
td.style_dinners_category {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 20%;
}
td.style_dinners_name {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  margin: auto;
  width:60%;
}
td.style_dinners_buttons {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  padding-left:10px;
  padding-right: 10px;
  margin: auto;
  width: 20px;
  text-align: center;
}

/*Table Add Dinner*/
table.style_Add_Dinner {
	border: 1px solid;
	border-collapse: collapse;
	background: rgba(255,255,255,0.5);
	padding: 5px;
	width: 60%;
	Margin: Auto;
}
td.style_Add_Dinner_Name {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 20%;
}
td.style_Add_Dinner_Insert {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 40%;
}

/*Table Add User*/
table.style_Add_User {
	border: 1px solid;
	border-collapse: collapse;
	background: rgba(255,255,255,0.5);
	padding: 5px;
	width: 60%;
	Margin: Auto;
}
td.style_Add_User_Name {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 20%;
}
td.style_Add_User_Insert {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 40%;
}
th.style_Add_User {
	font-size: 20px;
	Font-family: Arial;
	text-align: center;
	font-weight: bold;
	border: 1px solid;
	border-collapse: collapse;
	padding: 10px;
}
td.style_Add_User_Buttons {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  margin: auto;
  width: 20%;
  text-align: center;
}


/*Table ingredients*/
table.style_ingredients {
	border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 60%;
  Margin: Auto;
  font-family: Arial;
}
th.style_ingredients_name {
	font-size: 20px;
	Font-family: Arial;
	text-align: center;
	font-weight: bold;
	border: 1px solid;
	border-collapse: collapse;
	padding: 10px;
}
td.style_ingredients_category {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  width: 20%;
  text-align: center;
}
td.style_ingredients_name {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  margin: auto;
  width:60%;
}
td.style_ingredients_buttons {
  border: 1px solid;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  padding: 5px;
  padding-left:10px;
  padding-right: 10px;
  margin: auto;
  width: 20%;
  text-align: center;
}

input[type=text] {
	width: 100%;
	padding: 5px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
input[type=search] {
	width: 100%;
	padding: 5px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
input.input-add {
	width: 50%;
	padding: 5px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

input[type=password] {
	width: 100%;
	padding: 5px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
 
input[type=submit] {
  background-color: #f58a42; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  Margin-left: auto;
  Margin-right: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 }
 input[type=submit]:hover {
  background-color: #f7c174; 
  color: white;
  transition-duration: 0.4s;
}
 @media screen and (min-width: 600px) {
  input[type=submit] {
    font-size: 30px;
  }
}
@media screen and (max-width: 600px) {
  input[type=submit] {
    font-size:30px;
  }
}
 
 a.icon-remove{
  content:url('Images/deleteicon.png');
  max-height: 30px;
  color: white;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
 }
 a.icon-remove:hover{
	background-color: #c8b4db;
	color: white;
	transition-duration:0.4s;
 }
 
 a.icon-ingredients{
  content:url('Images/recipe-book.png');
  max-height: 30px;
  color: white;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
 }
 a.icon-ingredients:hover{
	background-color: #c8b4db;
	color: white;
	transition-duration:0.4s;
 }
  a.icon-add{
  content:url('Images/add.png');
  max-height: 30px;
  color: white;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
 }
  a.icon-add:hover{
	background-color: #c8b4db;
	color: white;
	transition-duration:0.4s;
 }
a.link-plain{
	color: White;
	font-size: 20px;
	text-decoration: none;
}

.buttonsearch{
  background-color: #f58a42;
  max-height: 30px;
  Margin: Auto;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
 }
 
 .buttonsearch:hover{
   background-color: #f7c174; 
  color: white;
  transition-duration: 0.4s;
 }
 
 .buttonadd{
  background-color: #f58a42;
  max-height: 50px;
  Margin: Auto;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
 }
 
 .buttonadd:hover{
   background-color: #f7c174; 
  color: white;
  transition-duration: 0.4s;
 }
 


/* Style The Dropdown Button */
.dropbtn {
  background-color: #f58a42;
  Font-family: Arial;
  color: white;
  text-align: center;
  padding: 15px 25px;
  margin-left: 5px;
  margin-right: 15px;
  margin-top: 15px;
  font-size: 16px;
  border: none;
  border-radius: 10%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  .dropbtn {
     padding: 10px 15px;
  }
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: Right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  Font-family: Arial;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #f7c174;
}
/* Inputs: include padding in the width so they stay inside their cells */
input, select, button {
	box-sizing: border-box;
	max-width: 100%;
}

/* ---------- Phones ---------- */
@media screen and (max-width: 600px) {
	html {
		-webkit-text-size-adjust: 100%;
	}
	body.body {
		margin: 8px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
	}

	/* Header: let it grow instead of clipping, keep the title readable on the pale bar */
	header.header {
		height: auto;
		min-height: 64px;
		padding: 8px 0;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
	}
	header.header h1 {
		margin: 0 0 0 12px;
		font-size: 24px;
	}
	.dropdown {
		float: none;
	}
	.dropbtn {
		margin: 0 12px 0 0;
		padding: 10px 16px;
	}
	.dropdown-content {
		right: 0;
	}
	.dropdown-content a {
		padding: 14px 18px;
		font-size: 17px;
	}
	h1, h3 {
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}
	h1 {
		display: block;
		margin: 16px 0 8px;
	}

	/* Tables: full width, sans-serif, and opaque enough to read over the dark trees */
	table.style_shuffle,
	table.style_dinners,
	table.style_ingredients,
	table.style_Add_Dinner,
	table.style_Add_User {
		width: 100%;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		background: rgba(255, 255, 255, 0.85);
	}
	table.style_shuffle td,
	table.style_dinners td,
	table.style_dinners th,
	table.style_ingredients td,
	table.style_ingredients th,
	table.style_Add_Dinner td,
	table.style_Add_User td,
	table.style_Add_User th {
		background: rgba(255, 255, 255, 0.6);
		padding: 8px 6px;
	}
	th.style_dinners_name,
	th.style_ingredients_name,
	th.style_Add_User {
		font-size: 15px;
		padding: 8px 4px;
	}
	/* Each suggestion is its own table, so fix the column widths to keep them lined up */
	table.style_shuffle {
		table-layout: fixed;
	}
	td.style_shuffle_category {
		white-space: nowrap;
		width: 84px;
	}
	table.style_shuffle td.styleadd {
		width: 52px;
	}
	td.styleadd,
	td.style_dinners_buttons,
	td.style_ingredients_buttons {
		width: 1%;
		padding: 4px;
	}
	td.style_Add_User_Name,
	td.style_Add_Dinner_Name {
		width: 1%;
		white-space: nowrap;
	}

	/* Icons: same images, comfortable tap size */
	a.icon-add,
	a.icon-remove,
	a.icon-ingredients {
		display: inline-block;
		max-height: 32px;
		padding: 2px;
	}

	/* Inputs: 16px stops iOS zooming in on focus */
	input[type=text],
	input[type=search],
	input[type=password],
	input.input-add,
	select {
		font-size: 16px;
		padding: 8px;
	}
	input.input-add {
		width: 100%;
		margin-bottom: 6px;
	}

	/* Buttons: still the orange ovals, just not screen-filling */
	input[type=submit] {
		font-size: 20px;
		padding: 12px 28px;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	form.submit {
		padding: 10px 0;
	}
}