/* General Styling */
body{
  margin: 0px;
  display: grid;
  grid-template-columns: repeat(4,25%);
  grid-template-areas:
  'header header header header'
  'main main main main'
  'footer footer footer footer';
  grid-template-rows: auto;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Outfit', sans-serif;
}
a,li,p{
  font-family: 'Outfit', sans-serif;
}
header{
  grid-area: header;
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #FF0000;
}
header > div{
  flex-grow: 1;
  height: 90px;
}
header > div > a > img{
  height: 100%;
  width: auto;
}
header > nav > ul{
  display: flex;
  list-style: none;
  align-items: center;
}
header > nav > ul > li{
  padding: 0px 15px;
}
header > nav > ul > li > a{
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}
main{
  grid-area: main;
}
/* Home page styling */
.masthead{
  background-image: url(../img/super-mario-maker.jpg);
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.masthead > div{
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 10px;
}
.masthead > div > div{
  padding: 0px 15px;
  font-size: 30px;
}
.super-mario-world{
  background-color: #b2b4b2;
  display: flex;
  align-items: center;
}
.super-mario-world > div
{
  padding: 0px 20px;
}
.super-mario-world > div > h2,
.donkey-kong > div > h2,
.zelda > div > h2{
  text-align: center;
  font-size: 27px;
}
.super-mario-world > div > h3,
.donkey-kong > div > h3,
.zelda > div > h3{
  text-align: center;
  font-size: 25px;
}
.super-mario-world > div > p,
.donkey-kong > div > p,
.zelda > div > p{
  font-size: 20px;
}
.super-mario-world > div > img{
  padding: 15px 0px;
  width: 300px;
  height: auto;
}
.donkey-kong{
  background-color: #a7a4e0;
  display: flex;
  align-items: center;
}
.donkey-kong > div:first-child{
  padding: 0px 20px;
  order: 2;
}
.donkey-kong > div:nth-child(2){
  padding: 15px 15px;
  order: 1;
}
.donkey-kong > div > img{
  width: 350px;
  height: auto;
}
.zelda{
  background-color: #514689;
  display: flex;
  align-items: center;
}
.zelda > div:first-child{
  padding: 0px 20px;
  color: #fff;
}
.zelda > div:nth-child(2){
  padding: 25px 25px;
}
/* Product page styling */
.masthead-product{
  background-image: url(../img/Masthead.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.masthead-product > div{
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}
.masthead-product > div > img{
  padding: 15px 15px;
  height: auto;
  width: 50vw;
}
.p-r1{
  display: flex;
  align-items: center;
  background-color: #707372;
}
.p-r1 > div:first-child{
  padding: 25px 20px;
}
.p-r1 > div:nth-child(2){
  padding: 0px 20px;
  flex-grow: 1;
  font-size: 25px;
  color: #f1f1f1;
  text-align: center;
}
.p-r1 > div > img{
  height: 100%;
  width: auto;
}
.console{
  display: flex;
  align-items: center;
  background-color: #b2b4b2;
}
.console > div{
  padding: 0px 15px;
}
.console > div > h3{
  text-align: center;
  font-size: 25px;
}
.console > div > p{
  font-size: 20px;
}
.controler{
  display: flex;
  align-items: center;
  background-color: #a7a4e0;
}
.controler > div{
  padding: 0px 15px;
}
.controler > div:first-child{order: 2;}
.controler > div:nth-child(2){order: 1;}
.controler > div > h3{
  text-align: center;
  font-size: 25px;
}
.controler > div > p{
  font-size: 20px;
}
.controler > div > img{
  width: 300px;
  height: auto;
}
.super-power{
  display: flex;
  align-items: center;
  background-color: #000;
}
.super-power > div:first-child{
  padding: 20px 20px;
  order: 2;
}
.super-power > div:nth-child(2){
  padding: 20px 20px;
  flex-grow: 1;
  text-align: center;
  font-size: 30px;
  color: #ff0000;
  order: 1;
}
.specs{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 0px;
  background-color: #514689;
}
.specs > h3{
  font-size: 25px;
  color: #f1f1f1;
}
.specs > table{
  font-family: 'Outfit', sans-serif;
  border: 1px solid #000;
  border-collapse: collapse;
  color: #f1f1f1;
  font-size: 17px;
}
.specs > table > tbody > tr,
.specs > table > tbody > tr > td{
  border: 1px solid #fff;
}
/* Contact page styling */
.contact-masthead{
  background-image: url(../img/headquarters.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.contact-masthead > div{
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  font-size: 30px;
  padding: 0px 20px;
}
.contact-info{
  display: flex;
  align-items: center;
  background-color: #b2b4b2;
}
.contact-info > div:first-child{
  padding: 0px 40px;
}
.contact-info > div > p{
  font-size: 20px;
}
.contact-info > div > h3{
  font-size: 25px;
}
.contact-info > div:nth-child(2){
  padding: 20px 20px;
}
.contact-info > div > img{
  width: 350px;
  height: auto;
}
.form{
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #a7a4e0;
  padding-bottom: 30px;
}
.form > h3{
  font-size: 25px;
}
.form > form{
  font-family: 'Outfit', sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-areas:
  'first-name last-name'
  'email phone'
  'inquiry inquiry'
  'submit submit';
  grid-template-rows: auto;
  align-items: center;
  grid-gap: 20px 20px;
}
.fname > input, .lname > input, .email > input, .phone > input{
  width: 100%;
  height: 30px;
  border-radius: 3px;
  border: solid #707372;
}
.fname{
  grid-area: first-name;
  display: flex;
  flex-direction: column;
}
.lname {
  grid-area: last-name;
  display: flex;
  flex-direction: column;
  }
.email {
  grid-area: email;
  display: flex;
  flex-direction: column;
  }
.phone{
  grid-area: phone;
  display: flex;
  flex-direction: column;
}
.phone > p{
  margin: 0px;
  font-size: 12px;
  font-style: italic;
  text-align: right;
}
.inquiry{
  grid-area: inquiry;
  display: flex;
  flex-direction: column;
}
.inquiry > textarea{
  width: 100%;
  height: 100px;
  resize: none;
  border-radius: 3px;
  border: solid #707372;
}
.submit{
  grid-area: submit;
  display: flex;
  justify-content: center;
}
.submit > input{
  background-color: #514689;
  color: #fff;
  font-size: 14px;
  border: solid #707372;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  cursor: pointer;
}
/* About page styling */
.about-masthead{
  background-image: url(../img/nintendo-switch-family.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.about-masthead > div{
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  font-size: 30px;
  padding: 0px 20px;
}
.about{
  display: flex;
  align-items: center;
}
.about > div{
  font-size: 20px;
  padding: 20px 20px;
}
footer{
  grid-area: footer;
  background-color: #FF0000;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
  height: 110px;
}
footer > nav > ul{
  display: flex;
  align-items: center;
  list-style: none;
}
footer > nav > ul > li > a{
  padding: 0px 10px;
  text-decoration: none;
  color: #fff;
}
/**********************/
/* Responsive Styling */
/**********************/
@media screen and (min-width: 1400px){

}
@media screen and (max-width: 1200px){
  .contact-masthead{
    background-position: 70% 30%;
  }
  .about-masthead{
    background-position: 70% 30%;
  }
}
@media screen and (max-width: 1024px){
  footer{
    height: 150px;
  }
}
@media screen and (max-width: 900px){
  .super-mario-world{
    flex-direction: column;
  }
  .donkey-kong{
    flex-direction: column;
  }
  .donkey-kong > div:first-child{
    order: 1;
  }
  .donkey-kong > div:nth-child(2){
    order: 2;
  }
  .zelda{
    flex-direction: column;
  }
  .console > div > img{
    width: 300px;
  }
  .super-power > div > p{
    font-size: 20px;
  }
  .specs{
    padding: 30px;
  }
}
@media screen and (max-width: 768px){
  .p-r1{
    flex-direction: column;
  }
  .console{
    flex-direction: column;
  }
  .console > div:first-child{
    order: 2;
  }
  .console > div:nth-child(2){
    order: 1;
  }
  .controler{
    flex-direction: column;
  }
  .masthead-product{
    background-position: 25% 75%;
  }
}
@media screen and (max-width: 600px){
  header{
    flex-direction: column;
    height: 200px;
  }
  .masthead > div{
    width: 300px;
  }
  .super-power{
    flex-direction: column;
  }
  .masthead-product{
    height: 60vh;
  }
  .contact-info{
    flex-direction: column;
  }
  .contact-masthead{
    height: 60vh;
  }
  .about-masthead{
    height: 60vh;
  }
}
@media screen and (max-width: 425px){
  header > nav > ul{
    width: 90%;
  }
  header > nav > ul > li{
    padding: 0px 10px;
  }
  .p-r1 > div > img{
    width: 300px;
  }
  .form > form{
    width: 80%;
  }
}
@media screen and (max-width: 375px){

}