* { font-family: "MS UI Gothic", sans-serif; }

html { background-color: #222; }
body { margin: 0px; display: flex; flex-direction: column; height: 100vh; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

#login { display: block; margin: auto; background-color: #888; padding: 40px; box-shadow: 4px 4px black;}
#login label { font-weight: bolder; }

#header { background-color: #888; padding: 8px; }
#header form { display: flex; flex-wrap: wrap; }
#header form label { align-content: center; }
#header input+input { margin-left: 10px; }

#filter { display: flex; padding: 4px; }
#filter a { flex: 1; text-align: center; font-weight: bolder; background-color: #bbb; }
#filter a+a { margin-left: 20px; }

#gallery { flex: 1; display: grid; gap: 5px; grid-template-columns: 1fr 1fr; overflow-y: scroll; scrollbar-width: thin; }

#gallery .image { position: relative; }
#gallery .image img { width: 100%; height: 100%; object-fit: cover; }
#gallery .image .overlay { opacity: 0; position: absolute; width: 100%; height: 100%; background-color: black; overflow: hidden; }
#gallery .image .overlay:hover { opacity: 0.75; }
#gallery .image .overlay .source { font-size: 32pt; color: white; overflow-wrap: break-word; }