:root { font-size: 20px;
background-image: url("https://files.catbox.moe/61hjg5.jpg");
margin: 0px;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
}

.container{ display:grid;
  grid-template:
  "header"
  "main"
/ 1300px 1000px
}

header{ grid-area: header;
	height: 100px;
	width: 720px;
	border: 3px blue;
	border-style: solid solid none solid;
	border-radius: 5px;
	background-image: url("https://files.catbox.moe/vrr03x.gif");
	text-align: center;
	margin: auto;
}

main { grid-area: main; 
height: 600px;
width: 700px;
border: 3px blue;
border-style: none solid solid solid;
border-radius: 5px;
overflow-y: auto;
text-align: center;
background-color: #92DCD5CC;
margin: auto;
  padding: 10px;
}

.boxes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
}
    
.summary {
    grid-column: span 3 / span 3;
    grid-row: span 1 / span 1;
  border: 3px;
  border-style: solid;
  border-color: white;
  background-image: url("https://files.catbox.moe/q71smu.pnj");
  background-size: 350px 230px;
  background-color: white;
  border-radius: 2.5px;
overflow-y: auto;
}

.about {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 2;
  border: 2px;
  border-style: solid;
  border-color: white;
  background-color: white;
    background-image: url("https://files.catbox.moe/btsz2r.pnj");
  background-size: 300px 270px;
  border-radius: 2.5px;
overflow-y: auto;
}

.sites {
    grid-column-start: 4;
    grid-row-start: 1;
  background-color: white;
  background-image: url("https://files.catbox.moe/mykbyg.pnj");
  background-size: 110px 110px;
}

.updates {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 1;
  color: white;
  font-size: 14px;
  border-radius: 6px;
  border: 3px;
  border-color: #0000FF;
  border-style: solid;
  background-color: white;
  background-image: url("https://files.catbox.moe/01gp9i.jpg");
  background-size: 225px 210px;
  overflow-y: auto;
}

.nav {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
  color: white;
  background-image: url("https://files.catbox.moe/01gp9i.jpg");
  background-size: 345px 435px;
  border-radius: 6px;
  border: 3px;
  border-color: #0000FF;
  border-style: solid;
}

 ul.a {
      list-style-image: url('https://64.media.tumblr.com/845e1b3fec1b08d6470842f26e0794ab/a53559b838a1040c-68/s75x75_c1/b46f37ab9d59f9707072472eeab6571bb3ef24df.gifv');
    }
    
  ul.b {
    list-style-type: circle;
    }


  

    
    .image-gallery{
       display: flex;
  flex-wrap: wrap;
      }
      .image-gallery div {
width: 32%;
  margin: 2px;
  position: relative;
      }
      
      .image-gallery div span {
  opacity: 0;
  transform: translateY(25px);
  transition: transform 0.4s ease, opacity 0.5s ease;
}

/* Captions on Hover */
.image-gallery div:hover span {
  opacity: 1;
  transform: none;
}

/* Captions */
.image-gallery div span {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 75%;
  box-sizing: border-box;
  background: white;
  color: black;
  text-align: center;
  padding: 5px 10px;
  font-size: 16px;
}