.photos_folder { width: 100%; display: flex; border: 1px solid #212121; border-radius: 10px; } .photos_folder a:hover, .photos_path a:hover { box-shadow: 0 0 10px #000; background-color: white; color: black; } .photos_folder a { font-size: 25px; text-decoration: none; border-radius: 10px; min-width: 100px; height: 100px; padding: 10px; margin: 5px; display: flex; align-items: center; justify-content: center; background-color: #212121; box-shadow: 0 0 2px #212121; transition: 0.3s; color: white; } .photos img { display: inline-flex; width: 25%; opacity: 1; cursor: pointer; transition: 0.3s; } .photos img:hover { opacity: 0.5; } .photos img:active { opacity: 0.1; } .no_photo { font-size: 25px; text-decoration: none; border-radius: 10px; width: 100%; display: flex; align-items: center; justify-content: center; } .photos_path { margin: 5px; width: 100%; display: flex; list-style: none; } .photos_path a { font-size: 15px; text-decoration: none; border-radius: 5px; padding: 5px; margin: 5px; display: flex; align-items: center; justify-content: center; background-color: #212121; box-shadow: 0 0 2px #212121; transition: 0.3s; color: white; } #img_big { position: fixed; max-width: 100%; max-height: 70%; left: 50%; top: 50%; transform: translate(-50%, -50%); } #close, #right, #left { color: white; position: fixed; width: 50px; height: 50px; transition: 0.3s; cursor: pointer; } #right { right: 0; bottom: 0; } #left { left: 0; bottom: 0; } #close { top: 50px; right: 0; } #close_back { position: fixed; width: 100%; height: 100%; } #close:hover, #right:hover, #left:hover { width: 70px; } #close:active, #right:active, #left:active { width: 55px; } @media screen and (max-width: 480px) { .photos_folder a { font-size: 15px; min-width: 50px; height: 50px; } }