body{font-family:Arial,sans-serif;margin:0;padding:0;height:100vh;background-color:#111}.login-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:100vw;height:100vh}.login{display:flex;flex-direction:column;align-items:center;justify-content:center;width:20rem;height:20rem;background-color:#f2f2f2;border:1px solid #ccc;border-radius:.5rem;margin:1rem;padding:1rem}.login input[type=text],.login input[type=password]{width:100%;padding:.5rem;margin-bottom:.5rem;border:1px solid #ccc;border-radius:.25rem}.login input[type=checkbox]{margin-bottom:1.5rem}.login h2{color:#111}button{padding:.5rem;background-color:#007bff;color:#fff;border:none;border-radius:.25rem;cursor:pointer;margin:0 .5rem}button.delete{background-color:#e02a2a}button:hover{background-color:#0056b3}.folder-view{padding:1rem}.folder-view h1,h2,h5{text-align:center;color:#dedede}.image,.folder{display:inline-block;width:15rem;height:15rem;background-size:contain;background-repeat:no-repeat;background-position:center;border:1px solid #555;vertical-align:top;margin:1rem 1rem 0 0;overflow:hidden;border-radius:.5rem;position:relative}.folder{background-size:7rem}.folder span{position:absolute;bottom:0;width:100%;text-align:center}.popup-overlay{position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000000b3}.popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#111;border:1px solid #ccc;border-radius:.5rem;padding:1rem;width:20rem;height:20rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}input[type=file]{padding:1rem 2rem;border:1px solid #ccc;margin-bottom:1rem}a,a:visited,a:hover,a:active{text-decoration:none;color:#fff}.image-view{text-align:center;position:relative}.image-view img{height:calc(100vh - 10px);pointer-events:none}.image-view img.clicked{height:auto}.image-view .overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000}