body { margin: 0; font-family: 'Arial', sans-serif; background-color: #f4f4f9; color: #333; } .nav-bar { background-color: #E91E63; height: 65px; display: flex; align-items: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .nav-bar i { font-size: 24px; color: white; margin: 0 10px; cursor: pointer; } .nav-bar h2 { color: white; margin: 0; font-size: 18px; } #space { padding-top: 75px; } .album-info { text-align: center; margin-bottom: 20px; } .album-info img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .album-info h1 { margin: 10px 0; font-size: 24px; color: #E91E63; } .album-info p { margin: 5px 0; color: #666; font-size: 16px; } .container-photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; } .container-photos div { position: relative; overflow: hidden; width: calc(100% / 3 - 20px); padding-top: calc(100% / 3 - 20px); border-radius: 10px; background: #111; cursor: pointer; } .container-photos div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; } .container-photos div:hover img { transform: scale(1.1); } .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 2000; } .fullscreen img { max-width: 90%; max-height: 90%; border-radius: 10px; } .fullscreen button { position: absolute; top: 20px; right: 20px; font-size: 24px; color: white; background: transparent; border: none; cursor: pointer; } @media (max-width: 768px) { .container-photos div { width: calc(50% - 10px); padding-top: calc(50% - 10px); } } @media (max-width: 480px) { .container-photos div { width: 100%; padding-top: 100%; } }