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

/* 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: 10;}
#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{display: grid; width: 64px; height: 64px; background: rgb(80,80,80); color: rgb(255,255,255); border-left: 4px solid rgb(110,110,110); border-right: 4px solid rgb(110,110,110); border-bottom: 0; text-align: center; filter: 0.1s;}
#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);}
#img_overlay > div:nth-child(2) button img,
#img_overlay > div:nth-child(2) a img{filter: invert(1); width: 24px; height: 24px; place-self: center; animation: reset;}

/* 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%;}
}