@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

*
{
	padding: 0px;
	margin: 0px;
	font-family: 'Noto Sans JP', sans-serif;
	box-sizing: border-box;
}

body
{
	background-color: #2d2d30;
}

p
{
	padding: 20px;
	color: white;
	line-height: 30px;
}

img
{
	float: left;
}

header h1
{
	color: white;
	padding-left: 20px;
}

nav ul 
{
	text-align: center;
	background-color: red;
}
nav ul li a, nav ul li {display: inline-block;}

nav ul li a
{
	padding: 10px 20px 10px 20px;
	font-size: 40px;
	background-color: black;
	text-decoration: none;
	color: white;
	margin-bottom: 10px;
	transition: all 500ms;
}

nav ul li a:hover
{
	background-color: white;
	color: black;
	transition: background-color 500ms, color 500ms;
	transform: translateY(10px);
	transition: all 500ms;
}

nav ul li a.active
{
	background-color: white;
	color: black;
	transform: translateY(10px);
}

div.info
{
	margin: 10px;
	border: 2px solid red;
	width: 600px;
	border-radius: 25px;
}

form.contact
{
	margin: 20px;
	padding-right: 20px;
	padding-top: 10px;
	background-color: red;
	width: 500px;
	border-radius: 25px;
}

label
{
	color: white;
	padding-left: 20px;
	
}

input.first, input.last, input.add1, input.add2, input.city, input.state, input.zip, input.phone, input.email-address, textarea, select
{
	width: 200px;
	float: right;
}

div.first-name, div.last-name, div.email-address, div.message, div.address1, div.address2, div.city, div.state, div.zip, div.phone, div.email-address
{
	margin-bottom: 10px;
}

input.submit, input.reset
{
	transition: background-color 500ms, color 500ms;
	cursor: pointer;
	width: 100px;
	height: 50px;
	font-size: 25px;
	border-style: none;
	border-radius: 10px;
	margin: 10px;	
}

input.submit:hover, input.reset:hover
{
	transition: background-color 500ms, color 500ms;
	background-color: black;
	color: white;
}

form.order
{
	margin: 20px;
	padding-right: 20px;
	padding-top: 10px;
	background-color: red;
	width: 500px;
	border-radius: 25px;
}

div.size
{
	margin-left: 10px;
	margin-top: 40px;
	border: 2px solid orange;
	border-radius: 10px;
}


div.crust, div.topping
{
	margin-top: 10px;
	margin-left: 10px;
	border: 2px solid orange;
	border-radius: 10px;
}

#size, #crust, #topping
{
	text-decoration: underline;
	padding-left: 10px;
}

@media (max-width: 720px)
{
	nav ul li a {font-size: 30px;}
}

@media (max-width: 625px)
{
	div.info {width: 500px}
}

@media (max-width: 585px)
{
	nav ul li a {font-size: 20px;}
}

@media (max-width: 560px)
{
	nav ul li a {font-size: 15px;}
	form.contact {width: 350px;}
	form.order {width: 350px;}
}

@media (max-width: 530px)
{
	div.info {width: 400px;}
}