@charset "UTF-8";
body { isolation: isolate; }
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image: url(/assets/img/stone-grain.svg);
background-repeat: repeat; background-size: 440px 440px;
mix-blend-mode: soft-light; opacity: .42;
}
:root[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: .20; }
.bd-edge, .bd-frame { position: relative; isolation: isolate; }
.bd-edge::before, .bd-frame::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-color: var(--bronze);
background-image: var(--bd-img, none);
background-repeat: no-repeat;
background-position: var(--bd-pos, center);
background-size: cover;
background-blend-mode: multiply;
-webkit-mask-image: var(--bd-mask, none);
mask-image: var(--bd-mask, none);
}
.bd-edge::before { opacity: .30; }
:root[data-theme="light"] .bd-edge::before { opacity: .34; }
.bd-frame { border: 1px solid var(--bronze); border-radius: var(--radius); }
.bd-frame::before { opacity: .60; }
:root[data-theme="light"] .bd-frame::before { opacity: .66; }
.bd-frame::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
:root[data-theme="dark"]  .bd-frame::after { background: linear-gradient(180deg, transparent 38%, rgba(21,18,14,.72) 100%); }
:root[data-theme="light"] .bd-frame::after { background: linear-gradient(180deg, transparent 38%, rgba(239,233,220,.80) 100%); }
.bd-parthenon {
--bd-img: url(/assets/img/backdrops/parthenon.webp);
--bd-pos: right center;
--bd-mask: linear-gradient(to left, #000 0%, #000 16%, transparent 70%);
}
.bd-coins {
--bd-img: url(/assets/img/backdrops/coins.webp);
--bd-pos: center bottom;
--bd-mask: linear-gradient(to top, #000 0%, #000 18%, transparent 58%);
}
.bd-cobbles {
--bd-img: url(/assets/img/backdrops/cobbles.webp);
--bd-pos: center 20%;
--bd-mask: linear-gradient(to bottom, #000 0%, #000 26%, transparent 74%);
}
.bd-seacaves {
--bd-img: url(/assets/img/backdrops/seacaves.webp);
--bd-pos: right center;
--bd-mask: linear-gradient(to left, #000 0%, #000 18%, transparent 70%);
}
.bd-kyrenia {
--bd-img: url(/assets/img/backdrops/kyrenia.webp);
--bd-pos: right center;
--bd-mask: linear-gradient(to left, #000 0%, #000 16%, transparent 68%);
}
.bd-parthenon::before, .bd-seacaves::before, .bd-kyrenia::before, .bd-coins::before {
-webkit-mask-image: var(--bd-mask), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: var(--bd-mask), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-composite: intersect;
}
.bd-acropolis {
--bd-img: url(/assets/img/backdrops/acropolis.webp);
--bd-pos: center center;
--bd-mask: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.maxim.bd-frame { max-width: 640px; margin-inline: auto; padding: 30px 26px 22px; }
.bd-inscription {
--bd-img: url(/assets/img/backdrops/inscription.webp);
--bd-pos: center top;
--bd-mask: linear-gradient(to bottom, #000 0%, #000 32%, transparent 74%);
}
.bd-letters {
padding-block: 30px;
--bd-img: url(/assets/img/backdrops/lettering.webp);
--bd-pos: left top;
--bd-mask: linear-gradient(to bottom, #000 0%, #000 38%, transparent 82%);
}
@media (prefers-reduced-motion: reduce) {
}