body {
  text-align: center;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  background: url(https://i.ibb.co/SwF3RQBN/6b70801d0f622b6fdf4b185c03be3f95.jpg)
}

.cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}


section {
  max-width: 550px;
  margin: auto;
}

p {
  font-size: 14px;
}

header {
  background-color: black;
  background-size: 100% 100%;
 padding: 2px 8px 2px 8px;
 text-align: left;
  box-shadow: #DC0024 0px 1px;
  font-family: Trebuchet MS;
}

a {
  color: inherit;
}

.container {
  background-color: rgba(220, 0, 36, 0.6);
  padding: 14px 8px 14px 8px;
  color: white;
  border: dashed black 1px;
  border-radius: 6px;
  margin: 0 10px 0 10px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.charpage {
  border: solid white 1px;
  height: 100px; 
  width: 100px; 
  border-radius: 50px;
}

.name {
  background: black;
  padding: 10px; 
  font-size: 28px;
  margin: 0 10px 0 10px;
  border-radius: 6px;
  border: dashed rgba(220, 0, 36, 1) 1px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.info {
  background: black;
  padding: 8px; 
  font-size: 18px;
  text-align: left;
  margin: 0 10px 0 10px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  border: dashed rgba(220, 0, 36, 1) 1px;
}



/* IMAGE GALLERY */

ul.gallery {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul.gallery {
  --numcolumns: 3;
  --gap: 0.25em;
  --size: calc(100vw / var(--numcolumns));
  display: grid;
  grid-template-columns: repeat(var(--numcolumns), 1fr);
  
  grid-template-rows: auto;
  gap: var(--gap);
  align-items: stretch;
  
  list-style: none;
}

ul.gallery > li {
  display: block;
  height: 155px;
  font-size: 12px;
  line-height: 2;
  padding-bottom: 30px;
}



ul.gallery > li > a.zoomout {
  display: none;
}

ul.gallery > li > a,
ul.gallery > li > a > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.gallery > li > a.zoomin:hover::after,
ul.gallery > li > a.zoomin:focus::after {
  content: '';
  display: block;
  background: rgba(255, 255, 255, 0.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==) no-repeat 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

ul.gallery > li:focus-within,
ul.gallery > li:target {
  overflow: visible;
  z-index: 1;
}

/* Make sure tile of active image is on top */
ul.gallery > li:target {
  z-index: 2;
}

/* Hide zoom in link when the tile is targetted */
ul.gallery > li:target > a.zoomin {
  display: none;
}

/* Show zoom out (close) link when the tile is targetted */
ul.gallery > li:target > a.zoomout {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 12;
}

/* Stretch out the image */
ul.gallery > li > a.zoomout > img {
  object-fit: contain;
  padding: 1vw;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 11;
  background: rgba(0, 0, 0, 0.8);
}

/* Put close link on top */
ul.gallery > li:target > a.zoomout::after {
  content: 'Click or hit ESC to close';
  position: fixed;
  right: 1vw;
  bottom: 1vw;
  font-size: 1rem;
  color: #fff;
  z-index: 12;
}