html { line-height: 1.15; text-size-adjust: 100%; } body { background: rgb(35, 35, 35); color: rgb(255, 255, 255); font-family: 'Open Sans', sans-serif; margin: 0px; display: block; } h1.title { font-size: 2em; margin: 0.67em 1em; color: white; text-align: right; } .root { display: flex; box-sizing: border-box; margin: 0px; min-width: 0px; padding: 5px; flex-direction: column; } .gallery { display: flex; margin: 0px; min-width: 0px; flex-wrap: wrap; } .gallery-list { display: flex; padding: 3rem; overflow-x: scroll; } .gallery-list::-webkit-scrollbar { width: 10px; height: 10px; } .gallery-list::-webkit-scrollbar-thumb { background: #201c29; border-radius: 10px; box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, 0.25), inset -2px -2px -2px rgba(0, 0, 0, 0.25); } .card { border-radius: 16px; background: rgb(103, 103, 103); box-shadow: rgb(0, 0, 0) -1rem 0px 3rem; transition: all 0.2s ease 0s; display: flex; position: relative; flex-direction: column; height: 200px; width: 225px; min-width: 225px; padding: 1.5rem; } .card-header { margin-bottom: auto; display: block; } .card-header h2 { font-size: 26px; text-decoration: none; background: linear-gradient(90deg, #ccc, #66d); text-shadow: none; background-clip: text; margin: 0.25rem 0 auto; cursor: pointer; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } section .card-header h2:hover { background: linear-gradient(90deg, #eee, #55d); background-clip: text; -webkit-background-clip: text; } section .card:hover { transform: translateY(-1rem); } section .card:hover ~ .card { transform: translateX(130px); } section .card:not(:first-child) { margin-left: -130px; } h2 { display: block; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } a { color: rgb(52, 56, 64); } .hovered-div { position: relative; width: 100%; } .hovered-div > span { position: absolute; bottom: 0px; left: 0; background-color: #333; opacity: 0.75; width: 100%; } .hovered-div > span:hover { opacity: 1; } .hovered-div > span > strong { color: white; display: block; padding: 8px 0 8px 0; } /* Images */ .gallery-image { width: 300px; height: 300px; max-height: 310px; margin: 15px; } .gallery-image.active { width: 1200px; height: 1200px; max-height: 1210px; margin: 15px; } .gallery-image > img { text-align: center; display: block; margin: auto; } /* Breadcrumbs */ .breadcrumbs { display: flex; margin-left: 1em; } .sep { margin-right: 8px; } .sep:last-of-type { display: none; } .breadcrumb { color: white; display: inline-block; padding-right: 10px; } /* Lightbox */ .lightbox { /* Default to hidden */ display: none; /* Overlay entire screen */ position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; /* A bit of padding around image */ padding: 1em; /* Translucent background */ background: rgba(0, 0, 0, 0.8); } /* Unhide the lightbox when it's the target */ .lightbox.active { display: block; } .lightbox span { /* Full width and height */ display: block; width: 100%; height: 100%; /* Size and position background image */ background-position: center; background-repeat: no-repeat; background-size: contain; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0px auto; position: relative; text-align: center; padding: 20px 0px; font-size: 0px; z-index: 6; animation: 500ms ease 0s 1 normal both running cdp-in; } .pagination .page_count { font-size: 14px; text-decoration: none; display: inline-block; text-transform: uppercase; margin: 0px 3px 6px; height: 38px; min-width: 50px; line-height: 38px; color: rgb(255, 255, 255); font-weight: 700; letter-spacing: 0.03em; } .pagination .button { font-size: 14px; text-decoration: none; transition: background 250ms ease 0.2s; cursor: pointer; display: inline-block; text-transform: uppercase; margin: 0px 3px 6px; height: 38px; min-width: 55px; border-radius: 38px; border: 2px solid rgb(255, 255, 255); line-height: 38px; padding: 0px; color: rgb(255, 255, 255); font-weight: 700; letter-spacing: 0.03em; } .pagination .button[disabled] { visibility: hidden; }