*,* *{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%;--font-color: #212121;--font-color-light: #f1f1f1;--golden-color: #c9a050;--dark-transparent: #000000a0;--dark-transparent-light: #00000060;--dark-transparent-lighter: #00000020;--background-color: #ececec;--san-serif: "Roboto", sans-serif;--serif: "Merriweather", serif}body{width:100%;height:100%;font-family:var(--san-serif);background-color:var(--background-color);color:var(--font-color);display:flex;flex-flow:column;justify-content:flex-start;align-items:center;margin:0}.pages button,header{--padding: .75rem;--border: 1px solid #a1a1a1;--border-radius: .5rem}.pages{display:flex;justify-content:flex-end}.pages span{font-weight:700;padding:0 1rem}header{width:100%;display:flex;justify-content:center;align-items:center;flex-flow:column;gap:1.25rem;padding:5rem 3rem 3rem}button{padding:var(--padding);border:var(--border);border-radius:var(--border-radius);background-color:#f1f1f1}.pages button.disabled{background-color:#f1f1f1;color:#a1a1a1;pointer-events:none}header>nav{position:fixed;top:0;padding:16px;width:100%;display:flex;gap:16px;justify-content:flex-end;align-items:center}header>nav button,.pages button{background-color:transparent;color:#0009;font-weight:700;border:1px solid rgba(255,255,255,1);box-shadow:inset 0 10px 20px #0003;padding:16px;font-size:16px;transition:.2s;cursor:pointer}header button:hover{color:#000c;transform:scale(1.05);box-shadow:inset 0 10px 12px #0003}header h3{text-transform:uppercase;color:var(--golden-color)}header h1{font-family:var(--serif)}header #search{width:100%;display:flex;justify-content:center;align-items:center;gap:1rem}header #search input[type=search]{width:min(90%,20rem);padding:var(--padding);border:var(--border);border-radius:var(--border-radius)}main{width:100%;padding:2rem 16rem}main #gallery{--n-columns: 4;width:100%;display:grid;column-gap:2rem;row-gap:1.5rem;grid-template-columns:repeat(var( --n-columns ),1fr)}#gallery .painting{--border-radius: .5rem;position:relative;font-family:var(--serif);height:48rem;gap:.5rem;display:flex;flex-flow:column;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:var(--border-radius)}#gallery .painting .img-options{position:absolute;left:0;display:flex;flex-flow:column;margin:.5rem 0;font-family:var(--serif)}#gallery .painting .img-options .img-opt{width:fit-content;padding:.5rem .75rem;border-radius:0 .5rem .5rem 0;background-color:var(--dark-transparent);color:var(--font-color-light);transform:translate(-100%);transition:.15s}#gallery .painting .img-options .img-opt:hover{cursor:pointer;padding:.5rem 1.5rem}#gallery .painting:hover .img-options .img-opt{transform:translate(0)}#gallery{--n-attributes: 6}#gallery .painting .img-data-fields{position:absolute;bottom:0;width:calc(100% * var(--n-attributes));display:flex}#gallery .painting .img-data{width:calc(100% / var(--n-attributes));display:flex;gap:4px;padding:8px;flex-wrap:wrap;height:fit-content;margin-top:auto;transform:translateY(100%);transition:.15s}#gallery .painting .img-data p{border-radius:32px;font-weight:400}#gallery .painting:has(.img-style-opt:hover) .img-data-fields{transform:translateY(0)}#gallery .painting:has(.img-color-opt:hover) .img-data-fields{transform:translate(calc(-100% / var(--n-attributes) * 1))}#gallery .painting:has(.img-subjct-opt:hover) .img-data-fields{transform:translate(calc(-100% / var(--n-attributes) * 2))}#gallery .painting:has(.img-keyword-opt:hover) .img-data-fields{transform:translate(calc(-100% / var(--n-attributes) * 3))}#gallery .painting:has(.img-description-opt:hover) .img-data-fields{transform:translate(calc(-100% / var(--n-attributes) * 4))}#gallery .painting:has(.img-long-description-opt:hover) .img-data-fields{transform:translate(calc(-100% / var(--n-attributes) * 5))}#gallery .painting:has(.img-opt:hover) .img-data{transform:translateY(0)}#gallery .img-options:has(.img-long-description-opt:hover) .img-opt{opacity:.2}#gallery .img-options:has(.img-opt:hover) .img-opt:not(:hover){color:#f1f1f133}#gallery .painting .img-data p{background-color:var(--dark-transparent);color:var(--font-color-light);padding:8px 16px;font-family:var(--san-serif);text-transform:capitalize;font-size:1rem;height:fit-content}#gallery .painting p:first-letter{font-size:1.15rem;margin-right:.05em}#gallery .painting p{font-weight:700;font-size:1rem;text-transform:uppercase}#gallery .painting .img-container{position:relative;--shadow-size: 0 32px 24px -24px;width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:var( --shadow-size ) transparent;transition:.15s}#gallery .painting:hover .img-container{box-shadow:var( --shadow-size ) var(--dark-transparent-light)}#gallery .painting img{width:100%;height:100%;border-radius:8px;object-fit:cover;transition:.2s}#gallery .painting:hover img{object-fit:contain}.icon{--size: 2.5rem;width:var(--size);height:var(--size);background-color:var(--dark-transparent);border-radius:50%;background-size:55%;background-position:center;background-repeat:no-repeat;cursor:pointer;transition:.2s}.icon.search{background-image:url(/assets/icons/search-image.webp)}.icon.rerun{background-image:url(/assets/icons/rerun.webp)}.icon:hover{background-size:65%}#gallery .painting .icon{position:absolute;top:0;right:0;margin:.5rem;padding:.5rem}@media screen and (max-width: 2500px){main #gallery{--n-columns: 3}#gallery .painting{height:32rem}}@media screen and (max-width: 1700px){main #gallery{--n-columns: 2}}@media screen and (max-width: 1100px){main{padding:2rem 8rem}main #gallery{--n-columns: 1}}@media screen and (max-width: 600px){main{padding:1rem 4rem}}