/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
 h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.font {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
  }

  header {
    background-color: #d16767;
    color: #e7b3b3;
    padding: 1rem;
    text-align: center;
}
  
.item4 {
    object-fit: cover;
    width:100%; 
    height:50%;
  }

.item4 {
    width: 100%;
    height: 90%;
}
.item7 img {
    width: 100%;
    height: 100%;
}

.item1 {grid-area: header;}
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-area: image; }
.item7 {grid-area: rite;}
.item8 {grid-area: left;}
.item9 {grid-area: Yellowroom;}
.item10 {grid-area: place;}
.item11 {grid-area: peach;}
.item12 {grid-area: let;}
.item13 {grid-area: Greenroom;}
.item14 {grid-area: val;}
.item15 {grid-area: Mike;}
.item16 {grid-area: Low;}
.item17 {grid-area: Miller;}
.item18 {grid-area: Richard;}
.item19 {grid-area: girl;}
.item20 {grid-area: boy;}
.item21 {grid-area: Look;}
.item22 {grid-area: Carissa;}
.item23 {grid-area: David;}
.item24 {grid-area: Smith;}
 
.grid-container {
    display: grid;
    grid-template-areas:
      'header header header header header header'
      'main main main main right right'
      'left left left left rite rite'
      'place place place place Yellowroom Yellowroom'
      'let let let let peach peach'
      'val val val val Greenroom Greenroom'
      'Mike Mike Mike Mike Low Low'
      'Miller Miller Miller Miller Richard Richard'
      'girl girl girl girl boy boy'
      'Look Look Look Look Carissa Carissa'
      'David David David David Smith Smith'
      'image image image image image image'
      'menu menu menu menu menu menu'
      'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #611c1c;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

h1 {
    text-align: center;
}
.hamburger {
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
}

.menu {
    display: none;
    flex-direction: column;
    align-items: center;
}

.menu.active {
    display: flex;
}

.menu a {
    text-decoration: none;
    color: #fff;
    padding: 1rem;
    background-color: #ce7171;
    width: 100%;
    text-align: center;
}

.menu a:hover {
    background-color: #611c1c;
}