/* CSS - Horizontal Menu */
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Covered+By+Your+Grace&family=Kalam:wght@300;400;700&family=Kaushan+Script&family=Loved+by+the+King&family=Merienda:wght@300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Permanent+Marker&family=Rock+Salt&display=swap');


* {margin: 0; padding: 0; box-sizing: border=box;}
* {user-select: none;}

html
{
	--color-main: slateblue;
	--color-main-hover: #DCD8F3;
	--color-main-hue-30: #2f2475;
	--color-main-hue-15: #17123b;
	--color-main-splt-comp-1: #CCAF5A;
	--color-main-splt-comp-1-hover: #E1D09D;
	--color-main-splt-comp-1-hue-90: #F3ECD8;
	--font-family-stand-out: "Kaushan Script", cursive;

}

body 
{
	background-image: url('../img/background_image_old-wall.png');
}



a
{
	border-radius: 15px 15px 15px 15px;
}

.active
{
	background: e6e6e6;
	background: cccccc;
	background: white;
	color: var(--color-main);
}

ul li a:hover, .about-label:hover
{
	background: var(--color-main-hover);
	color: var(--color-main);
	transition: 500ms;
}

h1
{
	margin: 10px;
	font-family: var(--font-family-stand-out);
	font-size: 30px;
}

p
{
	margin: 10px;
	font-family:"tahoma";
	font-size: 26px;
}

.table-jobs
{
	margin: 10px;
	font-family:"tahoma";
	font-size: 16px;
	border: 2px solid var(--color-main-hue-30);
	border-spacing: 0px;
}

th, tr, td
{
	padding:5px 10px 5px 10px; /* top right bottom left*/
	border: 2px solid var(--color-main-hue-30);
	border-spacing: 0px;
}

tr:nth-child(even){background-color:var(--color-main-hover);}
tr:nth-child(1){background-color: lightgrey;}
.contact-tr:nth-child(even){background-color: none;}
.contact-tr:nth-child(1){background-color: none;}
.contact-tr {background-color: none;}


.contact-label
{
	background-color: none;
}


.jobspizzeria
{
	
}

p::first-letter
{
	font-family: var(--font-family-stand-out);
	font-size: 36px;
	color: var(--color-main-hue-30);
}
/*
p::first-line
{
	font-family:"Rock Salt",                cursive;
	
	font-family:"Annie Use Your Telescope", cursive;
	font-family:"Chakra Petch",             cursive;
	font-family:"Covered By Your Grace",    cursive;
	font-family:"Kalam",                    cursive;
	font-family:"Kaushan Script",           cursive;
	font-family:"Loved by the King",        cursive;
	font-family:"Merienda",                 cursive;
	font-family:"Montserrat",               cursive;
	font-family:"Permanent Marker",         cursive;

	font-size: 25px;
	color: var(--color-main-hue-15);
}

p:nth-child(1)
{
	margin: 10px;
	font-family:"tahoma";
	font-size: 21px;
}
*/

.index-pizzas, .contact-us, .container-topping, .owner-bio, .jobspizzeria
{
	background-color: var(--color-main-splt-comp-1);
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	border: 2px solid grey;
	margin: 10px;
	width: 100%vw;
	box-sizing: border-box;
}

.index-img, .contact-us-img, .owner-bio-img, .jobspizzeria-img
{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 33%;
}

.index-img
{
  display: inline-block;
}

.contact-us-img, .owner-bio-img, .jobspizzeria-img
{
	display: block;
}


.contact-form, .contact-label, .contact-input
{
	margin: 5px;
	margin-left: 10px;
	font-family:"tahoma";
	font-size: 25px;
	border-collapse: collapse;
	border-style: none;
	border: 0px solid white;
}


#div-size
{
	margin-left: 40px;
}

.size
{
	display: block;
}

.toppings
{
	
}

p, .about-label, .send_clear, .contact-form, .send-clear, .table-jobs
{
	margin-left: 12px;
}

.send-clear
{
	margin-top: 10px;
	margin-bottom: 20px;
}

.google_font_annie_use_your_telescope {font-family:"Annie Use Your Telescope", cursive;}
.google_font_chakra_petch             {font-family:"Chakra Petch",             cursive;}
.google_font_covered_by_your_grace    {font-family:"Covered By Your Grace",    cursive;}
.google_font_kalam                    {font-family:"Kalam",                    cursive;}
.google_font_kaushan_script           {font-family:"Kaushan Script",           cursive;}
.google_font_loved_by_the_king        {font-family:"Loved by the King",        cursive;}
.google_font_merienda                 {font-family:"Merienda",                 cursive;}
.google_font_montserrat               {font-family:"Montserrat",               cursive;}
.google_font_permanent_marker         {font-family:"Permanent Marker",         cursive;}
.google_font_rock_salt                {font-family:"Rock Salt",                cursive;}

/*
Google fonts
	Annie Use Your Telescope
	Chakra Petch
	Covered By Your Grace
	Kalam
	Kaushan Script
	Loved by the King
	Merienda
	Montserrat
	Permanent Marker
	Rock Salt
*/

/* Toppings Start */

.container-text-meat, .container-text-veggies
{
	width: 100%vw;
	display: block;
	align-content: center;
	text-align: center;
	justify-content: center;
	margin-left: 5px;
	margin-right: 5px;
}

.container-topping-meat, .container-topping-veggies
{
	display: flex;
	background-color: var(--color-main-splt-comp-1);
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	border: 2px solid var(--color-main-splt-comp-1-hue-90);
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

.container-text-veggies
{
	margin-top: 10px;
}

.container-checkbox
{
	background-color: var(--color-main-splt-comp-1);
	font-size: 10px;
	text-align: center;
}

.container-checkbox:hover
{
	background-color: var(--color-main-splt-comp-1-hover);
	transition: 500ms;
}

/* Toppings End */


/* @media (max-width: 900px)
{
	.index-img, .contact-us-img, .owner-bio-img, .jobspizzeria-img
	{
	  display: inline-block;
	  margin-left: auto;
	  margin-right: auto;
	  margin-top: 5px;
	  margin-bottom: 5px;
	  width: 55%;
	  text-align: center;
	  align-content: center;
	  justify-content: center;
	}
}
 */

@media (max-width: 700px)
{
	.index-img, .contact-us-img, .owner-bio-img, .jobspizzeria-img
	{
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  margin-top: 5px;
	  margin-bottom: 5px;
	  width: 100%;
	}
}


@media (max-width: 768px)
{
p
	{
		margin: 5px;
		font-family:"tahoma";
		font-size: 24px;
	}
}

@media (max-width: 600px)
{
p
	{
		margin: 5px;
		font-family:"tahoma";
		font-size: 22px;
	}
}