:root{--bgc-d: rgb(17, 21, 27);--bgc-l: rgb(204, 204, 204);--text-d: rgb(204, 204, 170);--text-l: #6b12d2}*{margin:0;padding:0;box-sizing:border-box}body{font-family:sans-serif;font-weight:800;background-color:var(--bgc-l);background-image:linear-gradient(#aaa, transparent 1px),linear-gradient(90deg, #aaa, transparent 1px);background-size:5vw 5vw;color:var(--text-l)}body[dark]{font-weight:200;background-color:var(--bgc-d);color:var(--text-d);background-image:linear-gradient(#333, transparent 1px),linear-gradient(90deg, #333, transparent 1px)}.nav{position:fixed;width:100%;display:flex;justify-content:space-between;padding:25px;align-items:center;background-color:var(--bgc-d);z-index:10}.nav-link{text-decoration:none;text-transform:uppercase;color:inherit;font-size:24px;transition:.5s}.nav-link .f-letter{color:color-mix(in srgb, #f4a 15%, #fff 85%);text-shadow:0 0 10px #fff,0 0 21px #fff,0 0 42px #f4a}.nav-link .s-letter{color:color-mix(in srgb, #0fd 15%, #fff 85%);text-shadow:0 0 10px #fff,0 0 21px #fff,0 0 42px #0fd}.nav>div{display:flex;gap:15px;align-items:center}.nav>div details{cursor:pointer;font-size:24px}.nav>div details>summary{position:relative}.nav>div details[open] summary~*{z-index:2;animation:sweep .1s ease-in-out;position:absolute;top:75px;left:0%;width:100%;padding:15px 50px;height:-moz-fit-content;height:fit-content;background-color:var(--bgc-d)}.nav>div details>div{display:flex;flex-direction:column}.ornament{min-width:120px;min-height:50px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 120 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 25L30 50L60 50L0 0L0 25ZM15 0L75 50L105 50L45 0L15 0ZM60 0L90 0L120 25L120 50L60 0ZM105 0L120  0ZM0 37.5L15 50L0 50L0 37.5Z' fill='%23AAAAAA' /%3e%3c/svg%3e ");transform:scaleY(0.7) translateX(25px)}.ornament-reversed{min-width:120px;min-height:50px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 120 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 25L30 50L60 50L0 0L0 25ZM15 0L75 50L105 50L45 0L15 0ZM60 0L90 0L120 25L120 50L60 0ZM105 0L120  0ZM0 37.5L15 50L0 50L0 37.5Z' fill='%23AAAAAA' /%3e%3c/svg%3e ");transform:scale(-1) scaleY(0.7) translateX(25px)}.container{display:flex;flex-direction:column;max-width:85%;margin:auto auto;align-items:center}grid-container{display:grid;grid-auto-flow:dense;grid-gap:20px;width:100%;justify-content:center;grid-auto-rows:20px;grid-template-columns:repeat(auto-fit, 180px);align-items:start;counter-reset:items;margin-top:100px}grid-container grid-item{position:relative;border-radius:10px}grid-container grid-item[short]{grid-row:span 5}grid-container grid-item[short] a img{height:180px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[tall]{grid-row:span 6}grid-container grid-item[tall] a img{height:220px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[taller]{grid-row:span 7}grid-container grid-item[taller] a img{height:260px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[tallest]{grid-row:span 9}grid-container grid-item[tallest] a img{height:340px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[h-short]{grid-row:span 4;grid-column:span 2}grid-container grid-item[h-short] a img{height:140px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[h-tall]{grid-row:span 6;grid-column:span 2}grid-container grid-item[h-tall] a img{height:220px}grid-container grid-item[h-taller]{grid-row:span 12;grid-column:span 4}grid-container grid-item[h-taller] a img{height:460px;-o-object-fit:cover;object-fit:cover}grid-container grid-item[h-tallest]{grid-row:span 14;grid-column:span 4}grid-container grid-item[h-tallest] a img{height:540px;-o-object-fit:cover;object-fit:cover}grid-container grid-item a img{position:relative;width:100%}grid-container .img-fill{z-index:1;position:relative;border-radius:10px 10px;transition:.5s;border:1px solid #000;cursor:pointer}grid-container .img-fill:hover+.img-shadow{opacity:1;filter:blur(20px)}grid-container .img-shadow{border-radius:10px 10px;transition:.5s;opacity:0;position:absolute;top:0;left:0;z-index:0}dialog{width:76.9230769231vw;height:83.3333333333vh;margin:auto auto;border:1px solid rgba(255,255,255,.3333333333);box-shadow:0 0 10px rgba(255,255,255,.5);padding:35px;border-radius:10px;background-color:rgba(0,0,0,0);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-image:linear-gradient(120deg, rgba(36, 10, 25, 0.4), rgba(0, 41, 36, 0.3))}dialog #modal-close{position:absolute;top:2%;right:2%;color:#f08080;transition:.2s;cursor:pointer;filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 21px lightcoral)}dialog #modal-close:hover{transform:scale(1.2)}dialog>div{display:flex;height:100%;flex-direction:row;width:100%;align-content:center;align-items:center;flex-wrap:wrap;justify-content:space-around}dialog>div #modal-img{max-height:100%;max-width:50%;border-radius:10px;border:1px solid rgba(204,204,170,.5)}dialog>div #modal-areas{display:flex;flex-direction:column;flex-basis:100%;flex:1;max-width:50%;width:50%}dialog>div #modal-areas #modal-text{display:flex;flex-direction:column;justify-content:space-around;max-width:100%;padding-left:2rem}dialog>div #modal-areas #modal-text p{padding:10px;font-size:1.3vw}dialog>div #modal-areas #modal-text #modal-copy{padding:1vw;font-size:1.3vw;margin:1rem}dialog::backdrop{background:var(--bgc-d);opacity:.7}dialog:focus{outline:none}body[dark] .img-fill{border:1px solid #222;box-shadow:0 0 5px rgba(255,255,255,.1)}body[dark] .img-fill:hover{border:1px solid #cca}body[dark] .nav{background-color:var(--bgc-d);box-shadow:0 0 5px rgba(255,255,255,.1)}body[dark] .nav-link:hover .f-letter{animation:FL-flicker 1.5s infinite alternate}body[dark] .nav-link:hover .s-letter{animation:SL-flicker 1.5s infinite alternate}body[dark] .nav-link .f-letter{color:color-mix(in srgb, #f4a 15%, #fff 85%)}body[dark] .nav-link .s-letter{color:color-mix(in srgb, #0fd 15%, #fff 85%)}body[dark] .nav details>summary{color:color-mix(in srgb, #0fd 15%, #fff 85%);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 21px #fff) drop-shadow(0 0 42px #0fd)}body[dark] .nav details[open]>summary{color:color-mix(in srgb, #f4a 15%, #fff 85%);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 21px #fff) drop-shadow(0 0 42px #f4a)}body[dark] .nav details[open] summary~*{background-color:var(--bgc-d);color:var(--text-d);font-weight:200}body[dark] .nav details[open] a{color:var(--text-d)}body[dark] dialog{background-image:linear-gradient(120deg, rgba(36, 10, 25, 0.4), rgba(0, 41, 36, 0.3))}body[dark] dialog p{color:var(--text-d);font-weight:200}body[dark] dialog #modal-copy{background-color:var(--text-d);color:var(--bgc-d);border:none;font-weight:200;font-family:sans-serif;border-radius:30px;font-size:16px;border:1px solid #fff;display:inline-block;cursor:pointer;text-decoration:none;text-shadow:0px 1px 0px #fff}body[dark] dialog #modal-copy:hover{background-color:color-mix(in srgb, var(--text-d) 80%, white 20%)}body .nav{box-shadow:0 0 5px rgba(0,0,0,.1);background-color:var(--bgc-l)}body .nav-link:hover .f-letter,body .nav-link:hover .s-letter{animation:none}body .nav-link .f-letter{color:#f4a}body .nav-link .s-letter{color:#0fd}body .nav details>summary{transition:.5s;color:#0fd;filter:drop-shadow(0 0 1px #000)}body .nav details[open]>summary{color:#f4a;filter:drop-shadow(0 0 1px #000)}body .nav details[open] summary~*{background-color:var(--bgc-l);color:var(--text-l);font-weight:800}body .nav details[open] a{color:--text-l;text-decoration:none}body .nav details[open] a:hover{text-decoration:underline}body .img-fill{border:1px solid #cca;box-shadow:0 0 5px rgba(0,0,0,.1)}body .img-fill:hover{border:1px solid #222}body dialog{background-image:linear-gradient(120deg, rgba(255, 207, 235, 0.5), rgba(206, 255, 249, 0.5))}body dialog p{color:var(--text-l);font-weight:800;text-shadow:0 0 5px rgba(255,255,255,.3333333333)}body dialog #modal-copy{background-color:var(--text-l);color:var(--bgc-l);border:none;font-weight:800;font-family:sans-serif;border-radius:30px;font-size:16px;border:1px solid #000;display:inline-block;cursor:pointer;text-decoration:none;text-shadow:0px 1px 0px #000}body dialog #modal-copy:hover{background-color:color-mix(in srgb, var(--text-l) 80%, white 20%)}body dialog #modal-copy:active{position:relative;top:1px}@keyframes sweep{from{opacity:0;margin-top:-10px}to{opacity:1;margin-top:0}}@keyframes FL-flicker{0%,18%,22%,25%,53%,57%,100%{text-shadow:0 0 10px #fff,0 0 21px #fff,0 0 42px #f4a}20%,24%,55%{text-shadow:none}}@keyframes SL-flicker{0%,18%,22%,25%,53%,57%,100%{text-shadow:0 0 10px #fff,0 0 21px #fff,0 0 42px #0fd}20%,24%,55%{text-shadow:none}}