@charset "UTF-8";

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

/* 
Colours
Primary: #277dd9
Secondary: #1bd170
Black: #000000
White: #ffffff
Grey: #f0f0f0
*/

/* ------------------------- Classes ------------------------- */
.bold-text {
  font-weight: bold;
}

.types-gray-background {
  background-color: #f0f0f0;
}

.vcard p {
  display: inline;
}

/* Skip Link */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  color: #ff0000;
  font-size: 1.2em;
}

main p {
  margin: 1em;
}

p {
  font-size: 1.2em;
}

#wrapper {
  display: grid;
  grid-template-rows: auto auto minmax(750px, auto) auto;
  grid-template-areas: 
  "header"
  "navigation"
  "main"
  "footer";
}

/* ------------------------- Header ------------------------- */
header {
  grid-area: header;
  background-color: #277dd9;

  display: grid;
  grid-template-columns: 150px auto 200px;
  grid-template-areas: 
  "logo title login";
}

header #header-logo {
  grid-area: logo;
}

header #header-logo:hover {
  opacity: 70%;
}

header h1 {
  grid-area: title;
  align-self: center;
  font-size: 3em;
  margin-left: 1em;
}

header h1 a {
  text-decoration: none;
  color: #000000;
}

#login-button {
  grid-area: login;
  align-self: center;

  background-color: #1bd170;
  border: 3px solid #000000;
  color: #000000;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5em;
  padding: 0.5em;
  cursor: pointer;
  margin-right: 30px;
  border-radius: 8px;
}

/* ------------------------- Navigation ------------------------- */
nav {
  display: block;
}

nav ul {
  grid-area: navigation;
  list-style-type: none;
  background-color: #1bd170;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

nav a {
  text-decoration: none;
  display: block;
  padding: 1em;
  
  color: #000000;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2em;
}

nav a:hover {
  background-color: #277dd9;
}

/* Guitar brands dropdown menu */
.brands-dropdown {
  width: 222.53px;
  
  position: fixed;
  left: -400px;
}

.brands-dropdown-list:hover .brands-dropdown {
  display: block;
  position: absolute;
  left: auto;
}

.brands-dropdown li a {
  text-align: center;
}

/* ------------------------- Main Weekly Guitars Page ------------------------- */
#weekly-guitars-main #weekly-guitar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
  "guitar-image guitar-title"
  "guitar-image guitar-information";
  max-width: 80vw;
  justify-self: center;
  gap: 2em;
  margin: 2em;
}

#weekly-guitars-main #weekly-guitar p {
  margin-left: 0px;
  font-size: 1.1em;
}

#weekly-guitars-main #weekly-guitar .guitar-image {
  grid-area: guitar-image;
}

#weekly-guitars-main #weekly-guitar .guitar-image img {
  height: 600px;
  width: auto;
  justify-self: center;
}

#weekly-guitars-main #weekly-guitar .guitar-title {
  grid-area: guitar-title;
  font-size: 1.2em;
}

#weekly-guitars-main #weekly-guitar .guitar-information {
  grid-area: guitar-information;
  font-size: 1.2em;
}

/* ------------------------- Main Sitemap Page ------------------------- */
#sitemap-page-main {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-rows: 0.1fr auto auto;
  grid-template-areas:
  ". . . ."
  ". sitemap-policies sitemap-social-media ."
  ". sitemap-main-pages sitemap-blog-pages .";
  gap: 1em;
}

#sitemap-main-pages {
  grid-area: sitemap-main-pages;
  justify-items: center;
}

#sitemap-main-pages-guitar-brands-heading {
  font-size: 1.2em;
}

#sitemap-main-pages-guitar-brands-list {
  margin-left: 1.5em;
}

#sitemap-blog-pages {
  grid-area: sitemap-blog-pages;
  justify-items: center;
}

#sitemap-policies {
  grid-area: sitemap-policies;
  justify-items: center;
}

#sitemap-social-media {
  grid-area: sitemap-social-media;
  justify-items: center;
}

#sitemap-page-main a {
  color: #000000;
  font-size: 1.2em;
  font-weight: 400;
}

#sitemap-page-main a:hover {
  color: #0000ee;
}

#sitemap-page-main h2 {
  font-size: 2em;
  margin-bottom: 0.3em;
}

/* ------------------------- Main Error404 Page ------------------------- */
#error404-page-main {
	display: grid;
	grid-template-columns: 0.2fr 1fr 0.2fr;
	grid-template-rows: 0.5fr 2fr 2fr 2fr 0.5fr;
	grid-template-areas:
	". . ."
	". error-404 ."
	". missing-player ."
	". check-out ."
	". . .";
}

#error404-page-main h2 {
	text-align: center;
	grid-area: error-404;
	font-size: 3em;
	align-self: center;
}

#error404-page-main #missing-player {
	grid-area: missing-player;
}

#error404-page-main #missing-player p {
	text-align: center;
	font-size: 1.5em;
}

/* ------------------------- Main Code Of Ethics Page ------------------------- */
#code-of-ethics-page-main {
  grid-area: main;
  max-width: 1400px;
  margin: 0 auto;
}

#code-of-ethics-page-main h2 {
  text-align: center;
  margin: 1em;
}

#code-of-ethics-page-main p:nth-child(2) {
  text-align: center;
}

/* ------------------------- Main Privacy Policy Page ------------------------- */
#privacy-policy-page-main {
  grid-area: main;
  max-width: 1400px;
  margin: 0 auto;
}

#privacy-policy-page-main h2 {
  text-align: center;
  margin: 1em;
}

#privacy-policy-page-main p:nth-child(2) {
  text-align: center;
}

/* ------------------------- Main Terms And Conditions Page ------------------------- */
#terms-and-conditions-page-main {
  grid-area: main;
  max-width: 1400px;
  margin: 0 auto;
}

#terms-and-conditions-page-main h2 {
  text-align: center;
  margin: 1em;
}

#terms-and-conditions-page-main p:nth-child(2) {
  text-align: center;
}

/* ------------------------- Main Home Page ------------------------- */
#home-page-main {
  grid-area: main;
  background-color: #ffffff;

  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: 
  "home-page-hero-image home-page-hero-image home-page-hero-image"
  ". home-page-about-us .";
}

#home-page-main h2 {
  justify-self: center;
  font-size: 2em;
}

#home-page-main p {
  line-height: 1.7;
  font-size: 1.3em;
}

#home-page-hero-image {
  grid-area: home-page-hero-image;
  place-self: center;
  border-bottom: 5px solid #000000;
}

#home-page-hero-image img {
  width: 100%;
  height: 100%;
}

#home-page-about-us {
  grid-area: home-page-about-us;
  padding-top: 1em;
}

/* ------------------------- Main Guitar Brands Page ------------------------- */
#guitar-brands-main {
  grid-area: main;

  display: grid;
  grid-template-columns: 0.3fr 1fr 0.3fr;
  grid-template-rows: repeat(7, auto);
  grid-template-areas: 
  ". guitar-brands-heading ."
  ". guitar-brands-fender ."
  ". guitar-brands-gibson ."
  ". guitar-brands-ibanez ."
  ". guitar-brands-jackson ."
  ". guitar-brands-prs ."
  ". guitar-brands-esp .";
}

#guitar-brands-main h2,
#guitar-brands-main h3 {
  text-align: center;
}

#guitar-brands-heading {
  grid-area: guitar-brands-heading;
  padding: 1em;
}

#guitar-brands-fender {
  grid-area: guitar-brands-fender;
}

#guitar-brands-gibson {
  grid-area: guitar-brands-gibson;
}

#guitar-brands-ibanez {
  grid-area: guitar-brands-ibanez;
}

#guitar-brands-jackson {
  grid-area: guitar-brands-jackson;
}

#guitar-brands-prs {
  grid-area: guitar-brands-prs;
}

#guitar-brands-esp {
  grid-area: guitar-brands-esp;
}

/* ------------------------- Main Guitar Brands Individual Pages ------------------------- */
/* Fender */
#guitar-brands-fender-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-fender-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-fender-individual p {
  font-size: 1.3em;
}

#brands-fender-logo img {
  margin: 0 auto;
}

/* Gibson */
#guitar-brands-gibson-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-gibson-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-gibson-individual p {
  font-size: 1.3em;
}

#brands-gibson-logo img {
  margin: 0 auto;
}

/* Ibanez */
#guitar-brands-ibanez-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-ibanez-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-ibanez-individual p {
  font-size: 1.3em;
}

#brands-ibanez-logo img {
  margin: 0 auto;
}

/* Jackson */
#guitar-brands-jackson-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-jackson-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-jackson-individual p {
  font-size: 1.3em;
}

#brands-jackson-logo img {
  margin: 0 auto;
}

/* PRS */
#guitar-brands-prs-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-prs-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-prs-individual p {
  font-size: 1.3em;
}

#brands-prs-logo img {
  margin: 0 auto;
}

/* ESP */
#guitar-brands-esp-main {
  grid-area: main;
  max-width: 1200px;
  margin: 0 auto;
}

#guitar-brands-esp-individual h2 {
  text-align: center;
  margin-top: 1em;
  font-size: 2em;
}

#guitar-brands-esp-individual p {
  font-size: 1.3em;
}

#brands-esp-logo img {
  margin: 0 auto;
}

/* ------------------------- Main Guitar Types Page ------------------------- */
#guitar-types-main {
  grid-area: main;
}

#guitar-types-heading {
  text-align: center;
  padding: 1em;
}

#guitar-types-main table {
  border-collapse: collapse;
  margin: 1.5em;
}

#guitar-types-main table tr th:first-child {
  width: 10%;
}

#guitar-types-main table tr th:nth-child(2) {
  width: 30%;
}

#guitar-types-main table tr th:nth-child(3) {
  width: 30%;
}

#guitar-types-main table tr th:nth-child(4) {
  width: 30%;
}

#guitar-types-main table tr:nth-child(even) {
  background-color: #e8e8e8;
}

#guitar-types-main table tr:hover {
  background-color: #277dd9;
}

#guitar-types-main .guitar-types-attribute {
  background-color: #ffffff;
  border: 1px solid #000;
}

#guitar-types-main #guitar-types-headings {
  border: 1px solid #000;
}

#guitar-types-main table tr td {
  font-size: 1.2em;
  padding: 0.7em;
  border: 1px solid #000;
}

#guitar-types-main table tr th {
  font-size: 1.5em;
  padding: 0.5em;
}

/* Adds scroll bar to table when screen size is to small */
#guitar-types-table {
  overflow-x: auto;
}

#guitar-types-table table caption {
  font-size: 2em;
  padding-bottom: 0.5em;
}

#guitar-types-images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#guitar-types-video {
  display: grid;
}

#guitar-types-video video {
  justify-self: center;
  width: 80vw;
  height: auto;
}

/* ------------------------- Main Famous Guitars Page ------------------------- */
#famous-guitars-main {
  grid-area: main;
  background-color: #ffffff;

  display: grid;
  grid-template-columns: 0.5fr 2fr 0.5fr;
  grid-template-rows: repeat(6, auto);
  grid-template-areas: 
  "famous-background-left-1 famous-guitars-page-double-neck famous-background-right-1"
  "famous-background-left-2 famous-guitars-dimebag-dean-from-hell famous-background-right-2"
  "famous-background-left-3 famous-guitars-eddie-van-halen-frankenstrat famous-background-right-3"
  "famous-background-left-4 famous-guitars-stevie-ray-vaughn-stratocaster famous-background-right-4"
  "famous-background-left-5 famous-guitars-peter-green-greeny famous-background-right-5"
  "famous-background-left-6 famous-guitars-eric-clapton-blackie famous-background-right-6";
}

#famous-guitars-main p {
  margin: 0.5em;
}

#famous-guitars-page-double-neck {
  grid-area: famous-guitars-page-double-neck;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto auto auto auto auto;
  border-bottom: 3px solid #000000;
}

#famous-guitars-dimebag-dean-from-hell {
  grid-area: famous-guitars-dimebag-dean-from-hell;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto auto auto auto auto auto auto auto;
  border-bottom: 3px solid #000000;
}

#famous-guitars-eddie-van-halen-frankenstrat {
  grid-area: famous-guitars-eddie-van-halen-frankenstrat;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto auto;
  border-bottom: 3px solid #000000;
}

#famous-guitars-stevie-ray-vaughn-stratocaster {
  grid-area: famous-guitars-stevie-ray-vaughn-stratocaster;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto;
  border-bottom: 3px solid #000000;
}

#famous-guitars-peter-green-greeny {
  grid-area: famous-guitars-peter-green-greeny;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto auto auto auto auto auto auto auto auto auto auto;
  border-bottom: 3px solid #000000;
}

#famous-guitars-eric-clapton-blackie {
  grid-area: famous-guitars-eric-clapton-blackie;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: 1.5em auto auto auto auto;
}

#famous-background-left-1 {
  grid-area: famous-background-left-1;
  background-color: #f0f0f0;
}

#famous-background-left-1 img {
  width: 100%;
  height: auto;
}

#famous-background-left-2 {
  grid-area: famous-background-left-2;
  background-color: #f0f0f0;
}

#famous-background-left-2 img {
  width: 100%;
  height: auto;
}

#famous-background-left-3 {
  grid-area: famous-background-left-3;
  background-color: #f0f0f0;
}

#famous-background-left-3 img {
  width: 100%;
  height: auto;
}

#famous-background-left-4 {
  grid-area: famous-background-left-4;
  background-color: #f0f0f0;
}

#famous-background-left-4 img {
  width: 100%;
  height: auto;
}

#famous-background-left-5 {
  grid-area: famous-background-left-5;
  background-color: #f0f0f0;
}

#famous-background-left-5 img {
  width: 100%;
  height: auto;
}

#famous-background-left-6 {
  grid-area: famous-background-left-6;
  background-color: #f0f0f0;
}

#famous-background-left-6 img {
  width: 100%;
  height: auto;
}

#famous-background-right-1 {
  grid-area: famous-background-right-1;
  background-color: #f0f0f0;
}

#famous-background-right-1 img {
  width: 100%;
  height: auto;
}

#famous-background-right-2 {
  grid-area: famous-background-right-2;
  background-color: #f0f0f0;
}

#famous-background-right-2 img {
  width: 100%;
  height: auto;
}

#famous-background-right-3 {
  grid-area: famous-background-right-3;
  background-color: #f0f0f0;
}

#famous-background-right-3 img {
  width: 100%;
  height: auto;
}

#famous-background-right-4 {
  grid-area: famous-background-right-4;
  background-color: #f0f0f0;
}

#famous-background-right-4 img {
  width: 100%;
  height: auto;
}

#famous-background-right-5 {
  grid-area: famous-background-right-5;
  background-color: #f0f0f0;
}

#famous-background-right-5 img {
  width: 100%;
  height: auto;
}

#famous-background-right-6 {
  grid-area: famous-background-right-6;
  background-color: #f0f0f0;
}

#famous-background-right-6 img {
  width: 100%;
  height: auto;
}

/* ------------------------- Main Guitar Recommendations Page ------------------------- */
#guitar-recommendations-main {
  grid-area: main;
  background-color: #ffffff;

  display: grid;
  grid-template-columns: 0.5fr 2fr 0.5fr;
  grid-template-rows: repeat(6, auto);
  grid-template-areas: 
  ". guitar-recommendations-rock ."
  "recommendations-gray-background-left-1 guitar-recommendations-blues recommendations-gray-background-right-1"
  ". guitar-recommendations-jazz ."
  "recommendations-gray-background-left-2 guitar-recommendations-metal recommendations-gray-background-right-2"
  ". guitar-recommendations-country ."
  "recommendations-gray-background-left-3 guitar-recommendations-pop recommendations-gray-background-right-3";
}

#guitar-recommendations-main h2 {
  justify-self: center;
}

#guitar-recommendations-rock {
  grid-area: guitar-recommendations-rock;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "rock-heading rock-heading"
  "rock-paragraph rock-paragraph"
  "rock-image-1 rock-image-2";
}

#guitar-recommendations-rock h2 {
  grid-area: rock-heading;
}

#guitar-recommendations-rock p {
  grid-area: rock-paragraph;
}

#guitar-recommendations-rock img:nth-child(3) {
  grid-area: rock-image-1;
  justify-self: center;
}

#guitar-recommendations-rock img:nth-child(4) {
  grid-area: rock-image-2;
  justify-self: center;
}

/* Blues */
#guitar-recommendations-blues {
  grid-area: guitar-recommendations-blues;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "blues-heading blues-heading"
  "blues-paragraph blues-paragraph"
  "blues-image-1 blues-image-2";
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
}

#guitar-recommendations-blues h2 {
  grid-area: blues-heading;
}

#guitar-recommendations-blues p {
  grid-area: blues-paragraph;
}

#guitar-recommendations-blues img:nth-child(3) {
  grid-area: blues-image-1;
  justify-self: center;
}

#guitar-recommendations-blues img:nth-child(4) {
  grid-area: blues-image-2;
  justify-self: center;
}

/* Jazz */
#guitar-recommendations-jazz {
  grid-area: guitar-recommendations-jazz;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "jazz-heading jazz-heading"
  "jazz-paragraph jazz-paragraph"
  "jazz-image-1 jazz-image-2";
}

#guitar-recommendations-jazz h2 {
  grid-area: jazz-heading;
}

#guitar-recommendations-jazz p {
  grid-area: jazz-paragraph;
}

#guitar-recommendations-jazz img:nth-child(3) {
  grid-area: jazz-image-1;
  justify-self: center;
}

#guitar-recommendations-jazz img:nth-child(4) {
  grid-area: jazz-image-2;
  justify-self: center;
}

/* Metal */
#guitar-recommendations-metal {
  grid-area: guitar-recommendations-metal;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "metal-heading metal-heading"
  "metal-paragraph metal-paragraph"
  "metal-image-1 metal-image-2";
  border-top: 3px solid #000000;
  border-bottom: 3px solid #000000;
}

#guitar-recommendations-metal h2 {
  grid-area: metal-heading;
}

#guitar-recommendations-metal p {
  grid-area: metal-paragraph;
}

#guitar-recommendations-metal img:nth-child(3) {
  grid-area: metal-image-1;
  justify-self: center;
}

#guitar-recommendations-metal img:nth-child(4) {
  grid-area: metal-image-2;
  justify-self: center;
}

/* Country */
#guitar-recommendations-country {
  grid-area: guitar-recommendations-country;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "country-heading country-heading"
  "country-paragraph country-paragraph"
  "country-image-1 country-image-2";
}

#guitar-recommendations-country h2 {
  grid-area: country-heading;
}

#guitar-recommendations-country p {
  grid-area: country-paragraph;
}

#guitar-recommendations-country img:nth-child(3) {
  grid-area: country-image-1;
  justify-self: center;
}

#guitar-recommendations-country img:nth-child(4) {
  grid-area: country-image-2;
  justify-self: center;
}

/* Pop */
#guitar-recommendations-pop {
  grid-area: guitar-recommendations-pop;
  background-color: #f0f0f0;
  padding: 0.5em;

  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, auto);
  grid-template-areas: 
  "pop-heading pop-heading"
  "pop-paragraph pop-paragraph"
  "pop-image-1 pop-image-2";
  border-top: 3px solid #000000;
}

#guitar-recommendations-pop h2 {
  grid-area: pop-heading;
}

#guitar-recommendations-pop p {
  grid-area: pop-paragraph;
}

#guitar-recommendations-pop img:nth-child(3) {
  grid-area: pop-image-1;
  justify-self: center;
}

#guitar-recommendations-pop img:nth-child(4) {
  grid-area: pop-image-2;
  justify-self: center;
}

/* Side Backgrounds */
.recommendations-gray-background-left-1 {
  grid-area: recommendations-gray-background-left-1;
  background-color: #f0f0f0;
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
}

.recommendations-gray-background-left-2 {
  grid-area: recommendations-gray-background-left-2;
  background-color: #f0f0f0;
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
}

.recommendations-gray-background-left-3 {
  grid-area: recommendations-gray-background-left-3;
  background-color: #f0f0f0;
  border-top: 3px solid #000000;
}

.recommendations-gray-background-right-1 {
  grid-area: recommendations-gray-background-right-1;
  background-color: #f0f0f0;
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
}

.recommendations-gray-background-right-2 {
  grid-area: recommendations-gray-background-right-2;
  background-color: #f0f0f0;
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
}

.recommendations-gray-background-right-3 {
  grid-area: recommendations-gray-background-right-3;
  background-color: #f0f0f0;
  border-top: 3px solid #000000;
}

/* ------------------------- Main Contact Us Page ------------------------- */
#contact-us-main {
  grid-area: main;
  background-color: #ffffff;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: 
  "contactform"
  "contact-us-cards"
  "contact-us-map";
}

#contact-us-main p {
  margin: 0;
}

#contact-us-main form {
  grid-area: contactform;
  justify-self: center;
  width: 100vw;
  max-width: 800px;
  margin-top: 1em;
}

#contact-us-main legend {
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #277dd9;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
}

#contact-us-main fieldset {
  border-radius: 10px;
  border: 4px solid #000000;
  background-color: #f0f0f0;
  padding: 1em;
  position: relative;
}

#contact-us-main label {
  font-weight: bold;
  display: inline;
}

#contact-us-main label,
#contact-us-main input[type=text],
#contact-us-main select {
  width: 100%;
  height: 2.5em;
}

#contact-us-main input[type=submit] {
  background-color: #1bd170;
  padding: 0.7em;
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;
}

#contact-us-main input[type=submit]:hover {
  opacity: 70%;
  cursor: pointer;
}

#contact-us-main textarea {
  width: 100%;
  resize: vertical;
  margin-top: 5px;
  margin-bottom: 20px;
  height: 150px;
  padding: 0.2em;
}

/* Classes for toggling visibility on error messages */
.errorSpanVisible {
  display: inline;
  color: #ff0000;
  position: absolute;
  right: 1em;
}

.errorSpanHidden {
  display: none;
}

/* Classes for toggling visibility on checkmark */
.checkmarkSpanVisible {
  display: inline-block;
  transform: rotate(45deg);
  height: 1em;
  width: 0.5em;
  border-bottom: 3px solid #1bd170;
  border-right: 3px solid #1bd170;
  position: absolute;
  right: 1.3em;
}

.checkmarkSpanHidden {
  display: none;
}

/* Classes for toggling visibility on tooltips */
.tooltipVisible {
  display: block;
  background-color: #1bd170;
  border: 3px solid #000000;
  border-radius: 5px;
  padding: 0.2em;
  text-align: center;
  font-size: 1.3em;
}

.tooltipHidden {
  display: none;
}

#contact-us-cards .org,
#contact-us-cards a,
#contact-us-cards .tel,
#contact-us-cards .street-address {
  font-size: 1.2em;
}

#contact-us-main #contact-us-cards {
  grid-area: contact-us-cards;
  justify-self: center;
  width: 100vw;
  max-width: 800px;

  display: grid;
  gap: 4em;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
  "hcard-calvin-andrew-marley hcard-brendan-charles-huxley"
  "hcard-olivia-dorothy-keller hcard-paul-lorenzo-adams";
  padding: 2em;
  background-color: #f0f0f0;
  border-bottom: 3px solid #000000;
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
}

#contact-us-main #hcard-calvin-andrew-marley {
  grid-area: hcard-calvin-andrew-marley;
}

#contact-us-main #hcard-brendan-charles-huxley {
  grid-area: hcard-brendan-charles-huxley;
}

#contact-us-main #hcard-olivia-dorothy-keller {
  grid-area: hcard-olivia-dorothy-keller;
}

#contact-us-main #hcard-paul-lorenzo-adams {
  grid-area: hcard-paul-lorenzo-adams;
}

#contact-us-main #contact-us-map {
  grid-area: contact-us-map;
  justify-self: center;
}

#contact-us-main #contact-us-map iframe {
  width: 100vw;
  max-width: 800px;
}

/* Set input font size to 16px to prevent zooming on mobile devices */
input, select, textarea {
  font-size: 16px;
}

/* ------------------------- Footer ------------------------- */
footer {
  grid-area: footer;
  background-color: #000000;
  color: #ffffff;
  
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
  ". footer-logo footer-slogan ."
  ". footer-navigation footer-policies ."
  ". footer-navigation footer-contact-information ."
  ". footer-socials . ."
  ". footer-copyright-statement footer-copyright-statement .";
}

footer ul {
  list-style-type: none;
}

footer h3 {
  font-size: 2em;
}

footer p, footer a {
  font-size: 1.3em;
}

footer a:hover {
  opacity: 60%;
}

footer a {
  color: #5699E1;
}

footer a:visited {
  color: #5699E1;
}

#footer-logo {
  grid-area: footer-logo;
  margin-top: 1em;;
}

#footer-slogan {
  grid-area: footer-slogan;
  align-self: center;
}

#footer-socials {
  grid-area: footer-socials;
}

#footer-socials ul {
  display: flex;
  flex-direction: row;
  gap: 2em;
}

#footer-navigation {
  grid-area: footer-navigation;
}

#footer-policies {
  grid-area: footer-policies;
}

#footer-contact-information {
  grid-area: footer-contact-information;
}

#footer-copyright-statement {
  grid-area: footer-copyright-statement;
  justify-self: center;
  margin-bottom: 1em;
}

/* ------------------------- Media Queries ------------------------- */
@media screen and (max-width: 860px) {
  #wrapper {
    display: grid;
    grid-template-rows: auto auto minmax(750px, auto) auto;
    grid-template-areas: 
    "header"
    "navigation"
    "main"
    "footer";
  }

  /* ------------------------- Header ------------------------- */
  header {
    width: 100%;

    display: grid;
    grid-template-columns: 100px auto;
  }

  header img {
    width: 100px;
    height: 100px;
  }

  header h1 {
    font-size: 1.4em;
    margin: 0;
  }

  /* ------------------------- Main Home Page ------------------------- */
  #home-page-main {
    grid-area: main;
    background-color: #ffffff;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas: 
    "home-page-hero-image"
    "home-page-guitar-history"
    "home-page-guitar-manufacture-process"
    "home-page-about-us";
  }

  #home-page-about-us img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }

  /* ------------------------- Main Guitar Recommendations Page ------------------------- */
  #guitar-recommendations-main {
    grid-area: main;
    background-color: #ffffff;
  
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas: 
    "guitar-recommendations-rock"
    "guitar-recommendations-blues"
    "guitar-recommendations-jazz"
    "guitar-recommendations-metal"
    "guitar-recommendations-country"
    "guitar-recommendations-pop";
  }

  /* ------------------------- Main Contact Us Page ------------------------- */
  #contact-us-main #contact-us-cards {
    grid-area: contact-us-cards;
    justify-self: center;
    justify-items: center;
    width: 100vw;
    max-width: 800px;
  
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "hcard-calvin-andrew-marley"
    "hcard-brendan-charles-huxley"
    "hcard-olivia-dorothy-keller"
    "hcard-paul-lorenzo-adams";
    padding: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
  }

  /* ------------------------- Main Sitemap Page ------------------------- */
  #sitemap-page-main {
    display: grid;
    grid-template-columns: 0.1fr 1fr 1fr 0.1fr;
    grid-template-rows: 0.1fr 1fr 1fr;
    grid-template-areas:
    ". . . ."
    ". sitemap-main-pages sitemap-blog-pages ."
    ". sitemap-policies sitemap-social-media .";
    gap: 1.2em;
  }

  /* ------------------------- Footer ------------------------- */
  footer {
    grid-area: footer;
    background-color: #000000;
    color: #ffffff;
    
    display: grid;
    gap: 2em;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "footer-logo"
    "footer-slogan"
    "footer-navigation"
    "footer-policies"
    "footer-contact-information"
    "footer-socials"
    "footer-copyright-statement";
  }

  #footer-logo,
  #footer-slogan,
  #footer-navigation,
  #footer-policies,
  #footer-contact-information,
  #footer-socials,
  #footer-copyright-statement {
    justify-self: center;
  }

  #footer-slogan,
  #footer-navigation ul li,
  #footer-policies ul li,
  #footer-contact-information h3,
  #footer-contact-information p {
    text-align: center;
  }

  #footer-socials ul {
    justify-content: center;
  }

  footer p {
    font-size: 1.1em;
  }
}

/* For famous guitars page to change earlier than others due to the wide images */
@media screen and (max-width: 1100px) {
  /* ------------------------- Main Famous Guitars Page ------------------------- */
  #famous-guitars-main {
    grid-area: main;
    background-color: #ffffff;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(18, auto);
    grid-template-areas: 
    "famous-guitars-page-double-neck"
    "famous-background-left-1"
    "famous-background-right-1"
    "famous-guitars-dimebag-dean-from-hell"
    "famous-background-left-2"
    "famous-background-right-2"
    "famous-guitars-eddie-van-halen-frankenstrat"
    "famous-background-left-3"
    "famous-background-right-3"
    "famous-guitars-stevie-ray-vaughn-stratocaster"
    "famous-background-left-4"
    "famous-background-right-4"
    "famous-guitars-peter-green-greeny"
    "famous-background-left-5"
    "famous-background-right-5"
    "famous-guitars-eric-clapton-blackie"
    "famous-background-left-6"
    "famous-background-right-6";
  }

  #famous-background-left-1,
  #famous-background-right-1,
  #famous-background-left-2,
  #famous-background-right-2,
  #famous-background-left-3,
  #famous-background-right-3,
  #famous-background-left-4,
  #famous-background-right-4,
  #famous-background-left-5,
  #famous-background-right-5,
  #famous-background-left-6,
  #famous-background-right-6 {
    justify-self: center;
  }

  #famous-background-left-1 img,
  #famous-background-right-1 img,
  #famous-background-left-2 img,
  #famous-background-right-2 img,
  #famous-background-left-3 img,
  #famous-background-right-3 img,
  #famous-background-left-4 img,
  #famous-background-right-4 img,
  #famous-background-left-5 img,
  #famous-background-right-5 img,
  #famous-background-left-6 img,
  #famous-background-right-6 img {
    width: 100vw;
    height: auto;
    padding: 0;
    margin: 0;
  }

  #famous-guitars-page-double-neck,
  #famous-guitars-dimebag-dean-from-hell,
  #famous-guitars-eddie-van-halen-frankenstrat,
  #famous-guitars-stevie-ray-vaughn-stratocaster,
  #famous-guitars-peter-green-greeny,
  #famous-guitars-eric-clapton-blackie {
    border: 0;
  }
}

/* For types page to change early */
@media screen and (max-width: 1500px) {
  /* ------------------------- Main Guitar Types Page ------------------------- */
  #guitar-types-main table {
    margin: 0.2em;
  }

  #guitar-types-main table tr td {
    font-size: 1em;
    padding: 0.5em;
  }

  #guitar-types-main table tr th {
    font-size: 1.2em;
    padding: 0.5em;
  }

  /* ------------------------- Main Guitar Brands Page ------------------------- */
  #guitar-brands-main {
    grid-area: main;

    display: grid;
    grid-template-columns: 0.1fr 1fr 0.1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: 
    ". guitar-brands-heading ."
    ". guitar-brands-fender ."
    ". guitar-brands-gibson ."
    ". guitar-brands-ibanez ."
    ". guitar-brands-jackson ."
    ". guitar-brands-prs ."
    ". guitar-brands-esp .";
  }
}

/* Change nav bar to hamburger menu */
@media screen and (max-width: 1460px) {
  /* ------------------------- Navigation ------------------------- */
  nav {
    display: none;
  }

  #login-button {
    display: none;
  }

  header {
    grid-template-areas: 
    "logo title hamburger";
  }

  /* Fade in for nav bar */
  .fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  
  @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* hamburger navigation */
  .hamburgerNav {
    grid-area: navigation;
    display: block;
  
    width: 100%;
    height: auto;
    background-color: #1bd170;
  
    justify-self: end;
  }

  .hamburgerNav ul {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  /* hamburger menu button */
  .hamburger-button {
    height: 50px;
    width: 40px;
    justify-self: end;
    position: relative;
    right: 10px;
  }

  .hamburger-button span {
    height: 5px;
    width: 100%;
    background-color: #1bd170;
    border-radius: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
  }

  .hamburger-button span:nth-child(1) {
    top: 25%;
  }

  .hamburger-button span:nth-child(3) {
    top: 75%;
  }

  /* hamburger menu close button */
  .hamburger-button.active span {
    background-color: #1bd170;
  }

  .hamburger-button.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .hamburger-button.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-button.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Remove Guitar brands dropdown menu */
  .brands-dropdown {
    display: none;
  }

  .brands-dropdown-list:hover .brands-dropdown {
    display: none;
  }

  .brands-dropdown li a {
    display:none;
  }
}