/*font options:

    headers: 
        - Hachi Maru Pop
    Body: 
        - Montserrat 
        - Lato

*/
body {
    background-color: #FFF6CA;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    line-height: 1.6;
}
.gaming {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
    grid-template-rows: 1fr 2fr 2fr 2fr;
    gap: 1rem;
}
.title, .about, .howToPlay, .caseStudy, footer {
    background-color: #FFD6E0;
}
.title {
    grid-column: 2/5;
    grid-row: 1/2;
    text-align: center;
    font-size: x-large;
    margin: auto 0.5rem ;
}
.title h1 {
    margin: 0rem;
}
h1, h2, h3, h4 {
    color: #9B2340;
    font-family: "Hachi Maru Pop", cursive;
}
section {
    padding: 1rem;
}
.about {
    grid-column: 1/2;
    grid-row: 1/5;

}
.howToPlay {
    grid-column: 5/6;
    grid-row: 1/5;
}
.miniPlayer {
    grid-column: 2/5;
    grid-row: 2/5;
    background-color: black;
}
.caseStudy {
    grid-column: 1/5;
    grid-row: 2/5;
}
/*for mobile phones*/
@media (max-width: 425px) {
  .gaming {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .title {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .miniPlayer {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .howToPlay {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .about {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  .caseStudy {
    grid-column: 1/2;
    grid-row: 5/6;
  }
}