/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');

/* Global styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Schoolbell', serif
}

p, a {
  font-family: 'Roboto', sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* GRID DESIGN CONTAINER */
#grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
  'header header header header'
  'main main main side'
  'footer footer footer footer';
}

/* AREA DEFINITIONS */
.cell {
  padding: 20px;
/* HEADER AREA */
}
.head {
  grid-area: header;
  background: url('../img/backgroundfaces.jpg') center;
  background-size: cover;
  padding: 4rem 2rem;
  
}  
.head > h1 {
  font-size: 4.8rem;
  color: white;
}

/* MAIN and SIDE AREAA */

.main {
  grid-area: main;  
}

.main > p {
  font-size: .9rem;
}

.main > h2 {
  font-size: 2rem;
  color: #0008cc;
}

.side {
  grid-area: side;
}

.side > p {
  font-size: .9rem;
}

.side > h2 {
  font-size: 2rem;
  color: #0008cc;
}

/* footer */
.foot {
  grid-area: footer;
  background: #333;
  padding: .7rem;
}

.foot > p {
  font-size: .8rem;
  color: white;
  text-align: center;
}

/* RESPONSIVE SUPPORT */
/* 1 COL LAYOUT ON MOBILE */
@media screen and (max-width: 1000px) {
  #grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
  'header header header header'
  'main main main main'
  'side side side side'
  'footer footer footer footer';
}