/* CSS for desktop */
@media only screen and (min-width: 900px) {
.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0px 0px;
  grid-template-areas: "header-left header-center header-right" ". product-details-1 .";
}

.product-details-1 { grid-area: product-details-1; }

.header { 
	grid-area: header-center;
	background-color: #0099CC;
  padding-top: 6px;
  padding-bottom: 6px;
}

.header-left { 
  grid-area: header-left;
  background-color: #0099CC;
}

.header-right { 
  grid-area: header-right;
  background-color: #0099CC;
}

.product-middle-column {
  width: 50%;
}

td {
  padding-bottom: 16px;
  padding-right: 4px;
}
}

/* CSS for mobile */
@media only screen and (max-width: 900px) {
.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 0px 0px;
  grid-template-areas: "header-center" "product-details-1";
}

.product-details-1 { 
  grid-area: product-details-1; 
  padding-left: 12px;
  padding-right: 12px;
}

.header { 
  grid-area: header-center;
  background-color: #0099CC;
  padding: 4px;
}

.store-monologue {
  padding-right: 12px;
  padding-left: 12px;
}
}

/* CSS for all devices */
button {
  color: #000000;
  background: transparent;
  border: 2px solid #000000;
  border-radius: 6px;
  font-size: 16px;
}

button:hover {
  color: white;
  border: 2px solid white;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #343a40;
  color: white;
  text-align: center;
}

body {
   margin: 0px !important;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

a {
  color: #0099CC;
}

table {
  padding-bottom: 32px;
}

#products-header {
  font-size: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.description {
  padding-left: 24px;
}

.product-name {
  font-size: 18px;
}

.product-summary {
  font-style: italic;
}

.add-to-cart {
  width: 130px;
}

.thanks {
  padding-top: 48px;
  padding-left: 24px;
  padding-right: 24px;
}