*{margin:0;padding:0;} body{ background: rgb(196, 198, 192); } h1{ margin: 25px 0; text-align: center; } #tags{ display: flex; justify-content: center; width: 75%; margin: auto; } #tags *{ display: flex; align-items: center; justify-content: center; background: #152730; color: #5FECE0; border-radius: 20px; padding: 0 25px; margin: 10px; border: none; font-size: 20px; min-width: 75px; height: 30px; } #tags button{ cursor: pointer; } #tags button:hover{ box-shadow: 0 0 5px black; } #images{ display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; } #images img{ max-height: 250px; margin: 25px; cursor: pointer; box-shadow: 0 0 5px black; } #images img:hover{ box-shadow: 0 0 10px black; } #fullPage{ position: fixed; top: 0; left: 0; justify-content: center; align-items: center; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.85); z-index: 1; } #fullPage img{ max-height: 90%; max-width: 90%; cursor: default; box-shadow: none; } #fullPage svg{ position: absolute; color: white; cursor: pointer; border-radius: 50%; padding: 5px; z-index: 2; } #fullPage svg:hover{ background: white; color: black; } #closeImg{ top: 25px; right: 25px; } #nextImg{ right: 50px; } #previousImg{ left: 50px; } #galleryBody{ display: flex; flex-direction: column; align-items: center; } #container{ display: flex; justify-content: center; flex-wrap: wrap; } .card{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; background: white; width: 300px; height: 300px; cursor: pointer; margin: 10px; padding: 25px; text-decoration: none; color: black; } .card:hover{ box-shadow: 0 0 3px black; } .card img{ max-height: 75%; max-width: 75%; }