/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Home Container */

 .container0 {
  display: grid;
  grid-template-areas:
  'empty empty empty empty'
  'label0 label0 label0 label0'
  'product0 product1 product2 product3'
  'label1 label1 label1 label1'
  'sale0 sale1 sale2 sale3'
  'spot spot spot spot';
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-height: 300px;
}

p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Order Container */

 .container1 {
  display: grid;
  grid-template-areas:
  'empty empty empty empty'
  'label2 label2 label2 label2'
  'product4 product4 product4 product4'
  'address address address address'
  'box0 box0 box0 box0'
  'pin pin pin pin'
  'box1 box1 box1 box1'
  'zip zip zip zip'
  'box2 box2 box2 box2'
  'order order order order';
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-height: 300px;
}

p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* About Container */

 .container2 {
  display: grid;
  grid-template-areas:
  'empty empty empty empty'
  'place place place place'
  'map map map map'
  'social social social social'
  'form form form form'
  'name name name name'
  'box3 box3 box3 box3'
  'email email email email'
  'box4 box4 box4 box4'
  'address2 address2 address2 address2'
  'box5 box5 box5 box5'
  'text0 text0 text0 text0'
  'box6 box6 box6 box6'
  'submit submit submit submit'
  'spot spot spot spot';
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-height: 300px;
}

p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Nav Stuff*/

#nav {
	display: flex;
	align-items: center;
	position: fixed;
	background-color: red;
	padding: 10px;
	width: 100%;
}

#logo {
	width: 375px;
	height: 75px;
}

#nav2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	background-color: red;
	padding: 10px;
	width: 500px;
	right: 100px;
}

#nav2 > a {
	text-decoration: none;
	color: white;
	font-size: 32px;
}

#nav2 > a:hover {
	color: rgb(255, 150, 125);
}

/* Labels */

.container0 > .label0 {
	grid-area: label0;
	padding: 10px;
}

.label0 {
	font-size: 32px;
	padding: 10px;
}

.container0 > .label1 {
	grid-area: label1;
}

.label1 {
	font-size: 32px;
	padding: 10px;
}

.container1 > .label2 {
	grid-area: label2;
}

.label2 {
	font-size: 32px;
	padding: 10px;
}

/* Main products */

.container0 > .product0 {
	grid-area: product0;
}

.product0 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .product1 {
	grid-area: product1;
}

.product1 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .product2 {
	grid-area: product2;
}

.product2 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .product3 {
	grid-area: product3;
}

.product3 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container1 > .product4 {
	grid-area: product4;
}

.product4 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

img {
	border: 5px;
	border-color: red;
	border-radius: 15px;
	background-color: red;
}

/* Sale Products */

.container0 > .sale0 {
	grid-area: sale0;
}

.sale0 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .sale1 {
	grid-area: sale1;
}

.sale1 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .sale2 {
	grid-area: sale2;
}

.sale2 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

.container0 > .sale3 {
	grid-area: sale3;
}

.sale3 {
	width: 300px;
	height: 300px;
	padding: 5px;
	text-align: center;
	font-size: 24px;
	margin-left: 35px;
	color:rgb(150, 25, 0);
	text-decoration: none;
}

/* Footer */

#footer {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(50, 50, 50);
	color: white;
	height: 25px;
	padding: 10px;
	bottom: 0;
	position: fixed;
	right: 0;
	left: 0;
}

.container0 > .spot {
	grid-area: spot;
}

.container1 > .spot {
	grid-area: spot;
}

.container2 > .spot {
	grid-area: spot;
}

.spot {
	height: 100px;
}

/* Links? */

.link {
	opacity: 0;
}

/* Order Boxes */

.container1 > .address {
	grid-area: address;
}

.address {
	font-size: 24px;
	padding: 10px;
}

.container1 > .box0 {
	grid-area: box0;
}

.container1 > .pin {
	grid-area: pin;
}

.pin {
	font-size: 24px;
	padding: 10px;
}

.container1 > .box1 {
	grid-area: box1;
}

.container1 > .zip {
	grid-area: zip;
}

.zip {
	font-size: 24px;
	padding: 10px;
}

.container1 > .box2 {
	grid-area: box2;
}

input {
	height: 25px;
	width: 400px;
	border-radius: 5px;
}

.container1 > .order {
	grid-area: order;
}

.order {
	margin-top: 25px;
	width: 406px;
	height: 25px;
	border-radius: 5px;
	color: white;
	background-color: red;
}

/* Final Stretch */

.container2 > .place {
	grid-area: place;
}

.place {
	font-size: 32px;
	padding: 10px;
}

.container2 > .map {
	grid-area: map;
}

.map {
	padding: 10px;
}

.container2 > .social {
	grid-area: social;
}

.social {
	font-size: 16px;
	padding: 10px;
	background-color: rgb(50, 50, 50);
	color: white;
	width: 435px;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
}

.container2 > .form {
	grid-area: form;
}

.form {
	font-size: 24px;
	padding: 10px;
}

.container2 > .name {
	grid-area: name;
}

.name {
	font-size: 16px;
	padding: 10px;
}

.container2 > .box3 {
	grid-area: box3;
}

.box3 {
	font-size: 16px;
	padding: 10px;
	width: 430px;
	height: 16px;
}

.container2 > .email {
	grid-area: email;
}

.email {
	font-size: 16px;
	padding: 10px;
}

.container2 > .box4 {
	grid-area: box4;
}

.box4 {
	font-size: 16px;
	padding: 10px;
	width: 430px;
	height: 16px;
}

.container2 > .address2 {
	grid-area: address2;
}

.address2 {
	font-size: 16px;
	padding: 10px;
}

.container2 > .box5 {
	grid-area: box5;
}

.box5 {
	font-size: 16px;
	padding: 10px;
	width: 430px;
	height: 16px;
}

.container2 > .text0 {
	grid-area: text0;
}

.text0 {
	font-size: 16px;
	padding: 10px;
}

.container2 > .box6 {
	grid-area: box6;
}

.box6 {
	font-size: 16px;
	padding: 10px;
	width: 430px;
	height: 16px;
}

.container2 > .submit {
	grid-area: submit;
}

.submit {
	font-size: 16px;
	padding: 10px;
	width: 454px;
	height: 50px;
	text-align: center;
	margin-top: 36px;
}