@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

body {
  text-align: center;
  padding: 0;
  margin: 0;
  font-family: Instrument Sans, Helvetica;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://i.pinimg.com/1200x/f5/d9/2e/f5d92e3c337fd5c5c2fbd03a677ad6e8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

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

p {
  font-size: 14px;
}


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


header {
 padding: 2px 8px 2px 8px;
  filter: hue-rotate(110deg) brightness(2);
  max-width: 650px;
  align-content: center; 
  margin: 0 auto;
}

.element {
  transition: all 0.3s ease;
}

.element:hover {
  transform: scale(1.1) rotate(0deg) translate(0px, 0px) skewX(0deg);
  opacity: 1;
  filter: brightness(1);
}

@media (orientation: portrait) {
  header {
    width: 340px;
    padding: 0;
  }
  .title {
    width: 350px;
    padding: 0;
  }
  
  header img:not(.title) {
    height: 36px;
  }
  
}

a {
  color: inherit;
}

.container {
  background-color: #1b1d24;
  padding: 14px 8px 14px 8px;
  color: white;
  border: dashed #69bf4a 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: #69bf4a;
  padding: 10px; 
  font-size: 28px;
  margin: 0 10px 0 10px;
  border-radius: 6px;
  border: dashed black 1px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.info {
  background: #69bf4a;
  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 black 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;
}