.artworks-introduction-div, .categories-div, .artworks-divs { padding: 10px 10px 0px 10px; margin-bottom: 12px; } /* Introduction */ .artworks-introduction-div img { height: 110px; margin-right: 10px; margin-bottom: -2px; float: left; } /* Categories List */ .categories-container-div { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px; } /* Links */ .categories-links { display: flex; align-items: center; justify-content: center; flex-direction: column; } .categories-links a { background: linear-gradient(180deg, #3356d4 45%, #2945aa 50%); border: 1px solid #1d2852; border-radius: 20px; color: white; padding: 5px 5px 5px 10px; margin-top: 7px; width: 160px; transition-duration: 0.2s; } .categories-links a:hover { background-color: #3752b6; text-decoration: none; transform: scale(1.05); transition-duration: 0.2s; } .categories-links img { height: 25px; margin-right: 8px; transition-duration: 0.2s; } /* Right Image */ .categories-right-image { width: 210px; } /* Categories */ .artworks-divs h3 { padding: 4px 0px 4px 0px; } .artwork-title-logos { background: none; width: 30px; margin-right: 10px; } /* Sub div containing the images and titles */ .artworks-divs div { display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 89%; padding: 0px 15px 5px 15px; margin: 12px auto; } .artworks { border: 1px solid #4c5fa1; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253); width: 100%; margin: 10px 0px; } /* Div at bottom with link */ .deviantart-div { text-align: center; } /* CSS for Phones */ @media (max-width: 600px) { .artworks-introduction-div img { display: none; } .categories-links a { width: 90%; } .categories-right-image { display: none; } }