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;
  }


.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;}


.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'
      'image image image image image image'
      'menu menu menu menu menu menu'
      'footer footer footer footer footer footer';
  gap: 10px;
  
  padding: 10px;
}




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


h1 {
    text-align: center;
}

ul li a img {
  width: 70px; 
  height: 70px; 
}


.item4 {
  width: 700px; 
  height: 400px; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background-color: rgba(0, 0, 0, 0.5); 
}

.image-box {
  max-width: 100%; 
  max-height: 100%;
  object-fit: contain; 
}

.item7 {
  width: 500px; 
  height: 300px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background-color: rgba(0, 0, 0, 0.5); 
}

.item11 {
  width: 400px; 
  height: 200px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background-color: rgba(0, 0, 0, 0.5); 
}

.item9 {
  width: 700px; 
  height: 400px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background-color: rgba(0, 0, 0, 0.5); 
}

.item13 {
  width: 400px; 
  height: 300px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background-color: rgba(0, 0, 0, 0.5); 
}


.bottom-right-logo {
  position: fixed; 
  bottom: 10px; 
  right: 10px; 
  cursor: pointer; 
  transition: transform 0.3s ease;
}

.bottom-right-logo:hover {
  transform: scale(1.1); 
}

.moogle-link {
  cursor: pointer; 
  transition: transform 0.3s ease; 
}

.moogle-link:hover {
  transform: scale(1.1); 
}