body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background: black; padding-top: 50px; } p { font: bold 18px sans-serif; } a { color: rgba(255,255,255,.55) !important; text-decoration: none !important; font: bold 18px sans-serif; } a:hover { color: rgb(132,4,217) !important; } video { width: 100%; } .violet { color: rgb(132, 4, 217) !important; } .content-container { background-color: black; } .container-fluid { scroll-margin-top: 60px; } @media only screen and (max-width: 600px) { .gallery { display: grid; grid-gap: 3px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } @media only screen and (min-width: 600px) { .gallery { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } @media only screen and (min-width: 1200px) { .gallery { display: grid; grid-gap: 7px; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); } } .gallery .gallery-item { overflow: hidden; position: relative; cursor: pointer; box-sizing: border-box; border: solid 1px rgb(132, 4, 217); border-radius: 5px; background: linear-gradient(90deg, rgba(131, 58, 180, 0) 0%, rgba(58, 58, 180, 1) 20%, rgba(132, 4, 217, 1) 90%, rgba(252, 176, 69, 0) 100%); } .gallery .gallery-item:hover img { transform: scale(1.02); -webkit-filter: grayscale(1); filter: grayscale(1); } .gallery img { width: 100%; display: block; -webkit-filter: grayscale(0); filter: grayscale(0); transition: all 100ms ease-out; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .gallery .gallery-item:hover .overlay { opacity: 1; } .overlay-content { text-align: center; color: #fff; } .image-link { display: block; text-decoration: none; color: inherit; }