/* # Image Overlay # */
main img:not(a img):not(#img_overlay img){transition: filter 0.2s;}
main img:not(a img):not(#img_overlay img):hover{cursor: zoom-in; filter: brightness(0.5);}

/* Overlay */
#img_overlay{position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,50%); display: none; cursor: zoom-out; z-index: 3;}
#img_overlay > div:nth-child(1){height: 90vh; display: grid; place-items: center;}
#img_overlay > div:nth-child(1) img{max-width: 90vw; max-height: 90vh; object-fit: scale-down; padding: 32px 0; animation: reset;}

/* Overlay: Active/Deactive */
#img_overlay.active{display: grid; animation: blurBg 0.5s forwards;}
#img_overlay.active > *{animation: fadeIn 0.5s forwards 0.75s; opacity: 0%;}
#img_overlay.deactive{display: grid; background: rgba(0,0,0,50%); backdrop-filter: blur(5px); animation: unblurBg 0.5s forwards 0.75s;}
#img_overlay.deactive > *{animation: fadeOut 0.5s forwards 0.25s; opacity: 100%;}

/* Overlay: Buttons */
#img_overlay > div:nth-child(2){position: fixed; bottom: 0; width: 100%; background: rgb(50,50,50); display: grid; grid-template-columns: auto auto auto auto; gap: 8px; justify-content: center; cursor: default;}

#img_overlay > div:nth-child(2) button,
#img_overlay > div:nth-child(2) a{padding: 0; width: 64px; height: 64px; background: rgb(80,80,80); color: rgb(255,255,255); transition: filter 0.2s;}

#img_overlay > div:nth-child(2) .fa,
#img_overlay > div:nth-child(2) .far{width: 64px; height: 64px; display: grid; place-items: center;}

#img_overlay > div:nth-child(2) button:hover,
#img_overlay > div:nth-child(2) a:hover{filter: brightness(1.5);}

#img_overlay > div:nth-child(2) button:active,
#img_overlay > div:nth-child(2) a:active{filter: brightness(1.25);}

/* Keyframe Animations */
@keyframes blurBg {
  0%{background-color: rgba(0,0,0,0%); backdrop-filter: blur(0px);}
100%{background-color: rgba(0,0,0,50%); backdrop-filter: blur(5px);}
}

@keyframes fadeIn {
  0%{opacity: 0%;}
100%{opacity: 100%;}
}

@keyframes unblurBg {
  0%{background-color: rgba(0,0,0,50%); backdrop-filter: blur(5px);}
 99%{background-color: rgba(0,0,0,0%); backdrop-filter: blur(0px);}
100%{background-color: rgba(0,0,0,0%); backdrop-filter: blur(0px); display: none;}
}

@keyframes fadeOut {
  0%{opacity: 100%;}
100%{opacity: 0%;}
}