/* a collection of images (gallery) with automatic resizing and highlighting. */
.gallery-reel {
  padding: 40px 4px;
  padding-top: 0px;
}
.gallery-reel img {
  max-width: calc(320px * 1.2);
  max-height: calc(220px * 1.0);
}

.gallery-reel p {
  max-width: 320px;
}

/* a singular, showcase image. max size is set manually... */
.gallery-solo {
  display: flex;
  
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.gallery-solo img {
  padding: 8px;
  background-image: none;
}

/* mathew is bi btw. */
.gallery-solo img:hover, .gallery-reel img:hover{
  background-image: linear-gradient(to bottom, #d34798, #9752c2, #515299);
}

/* collapsable headers... */
h3 { 
    font-size: 1.5em; 
    text-align: center; 
}
hr {
    margin: 40px auto; 
    width: 80%; 
    
    border: #2a2b29 solid 2px
}

details summary::marker { content: none; }


details summary h3 {color: #686867;}  
details summary h3::before {content: "(skipped) "; color: #686867;}

details summary h3:hover, details[open] summary h3:hover {
    animation: bibow-colors 4.5s linear infinite;
}


details[open] summary h3 {color: #2a2b29;}
details[open] summary h3::before {content: "(*) "; font-size: 1.25em;
animation: bibow-colors 3.5s linear infinite; }


@keyframes bibow-colors{
  0%{  color: #d34798;}
  32%{  color: #9752c2;}
  50%{  color: #515299;}
  82%{  color: #9752c2;}
  100%{ color: #d34798;}
}
a, a:hover, a:visited {
    animation: bibow-colors 1.7s linear infinite;
}

#back-hover:hover{background-image: url("back-bi.png");}


/* mobile phone compatibility...*/
@media (width <= 621px) {
  .gallery-reel img {max-width: calc(340px * 0.84); max-height: calc(220px * 0.84);}
  hr {margin: 10px auto;}
}