@charset "UTF-8";
@font-face { font-family: "Quivira"; src: url("/assets/font/Quivira.subset.woff2") format("woff2"), url("/assets/font/Quivira.otf") format("opentype"); unicode-range: U+16A0-16FF; font-display: block; }

nav { filter: drop-shadow(0 0 4px black); display: flex; flex-flow: row wrap; justify-content: center; gap: 3ch; backdrop-filter: blur(30px); background-color: rgba(30, 31, 32, 0.8); border-radius: 4px; width: 90%; padding: 1ch 12px; margin-top: 1ch; text-shadow: 0 0 4px black; /* Medium devices (landscape tablets, 768px and up) */ /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 768px) { nav { width: 80%; } }

@media only screen and (min-width: 992px) { nav { min-width: 720px; width: 45%; } }

nav a { color: white; text-decoration: none; font-size: 1.5rem; }

nav a:visited { color: white; }

nav a:focus, nav a:hover, nav a:active { text-decoration: underline; }

.aspect-ratio-16-9 { aspect-ratio: 16 / 9; }

.aspect-ratio-16-10 { aspect-ratio: 16 / 10; }

.aspect-ratio-3-2 { aspect-ratio: 3 / 2; }

.aspect-ratio-21-9 { aspect-ratio: 21 / 9; }

.aspect-ratio-5-4 { aspect-ratio: 5 / 4; }

.aspect-ratio-32-9 { aspect-ratio: 32 / 9; }

.aspect-ratio-4-3 { aspect-ratio: 4 / 3; }

.aspect-ratio-1-1 { aspect-ratio: 1 / 1; }

.aspect-ratio-1-2 { aspect-ratio: 1 / 2; }

.aspect-ratio-2-1 { aspect-ratio: 2 / 1; }

.aspect-ratio-4-1 { aspect-ratio: 4 / 1; }

.aspect-ratio-1-4 { aspect-ratio: 1 / 4; }

:root { --accent-color: #fdd870; --secondary-accent: #dfa25d; --link-color: #fdd870; --title-decoration: url('https://lithiumfluorine.eu/files/u/img/dnd-gold/ff16-site-assets/arrow.svg'); }

style { display: none; margin: 0; }

html { position: relative; font-size: 0.5cm; color-scheme: dark; scrollbar-width: thin; scroll-behavior: smooth; }

body { background-color: #1e1f20; background: no-repeat center center fixed; background-size: cover; background-image: url("/assets/img/background.avif"); background-image: -webkit-image-set("/assets/img/background.avif" type("image/avif"), "/assets/img/background.jpeg" type("image/jpeg")); background-image: image-set("/assets/img/background.avif" type("image/avif"), "/assets/img/background.jpeg" type("image/jpeg")); color: white; padding: 0; padding-bottom: 3em; margin: 0; font-family: "Cormorant"; font-variant-numeric: lining-nums; }

#extra-wide-background-1 { height: 0; }

@media only screen and (min-width: 992px) { #extra-wide-background-1 { position: fixed; left: -180px; top: 0; width: calc(45% - 180px); min-width: 280px; height: auto; content: url("https://lithiumfluorine.eu/files/u/img/dnd-gold/ff16-site-assets/kv_left.avif"); } }

#extra-wide-background-2 { height: 0; }

@media only screen and (min-width: 992px) { #extra-wide-background-2 { position: fixed; right: 0; bottom: -200px; width: calc(max(22%, 280px)); height: auto; content: url("https://lithiumfluorine.eu/files/u/img/dnd-gold/ff16-site-assets/kv_right.avif"); } }

div.main-content { display: flex; flex-flow: column; align-items: center; }

main { position: relative; margin-top: 16px; background-color: rgba(30, 31, 32, 0.8); border-radius: 4px; padding: 12px 12px 12px 12px; backdrop-filter: blur(24px); line-height: 1.3; width: 90%; text-shadow: 0 2px 2px black; /* Medium devices (landscape tablets, 768px and up) */ /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 768px) { main { width: 80%; } }

@media only screen and (min-width: 992px) { main { min-width: 720px; width: 45%; } }

main p { margin-top: 8px; margin-bottom: 8px; text-align: justify; hyphens: auto; }

main p + p { margin-top: 12px; }

main dl { margin-top: 8px; margin-bottom: 8px; }

main dt { font-weight: bold; font-style: italic; color: var(--secondary-accent); }

main dd { text-align: justify; hyphens: auto; margin-left: 2ch; }

main h1, main h2, main h3, main h4, main h5, main h6 { margin-top: 16px; margin-bottom: 8px; overflow: hidden; }

main h1 { display: flex; flex-flow: row wrap; margin-top: 0; margin-left: -6px; margin-right: -6px; padding-bottom: 4px; border-bottom: 1px solid var(--accent-color); text-indent: 10px; text-shadow: none; filter: drop-shadow(0 4px 4px black); font-weight: 200; align-items: baseline; justify-content: left; font-size: 30px; /* Medium devices (landscape tablets, 768px and up) */ }

@media only screen and (min-width: 768px) { main h1 { font-size: 32px; } }

main h1:first-of-type::before { content: var(--title-decoration); }

main h2 { border-bottom: 1px solid var(--accent-color); margin-top: 16px; font-weight: 500; }

main h3 { font-weight: 500; }

.full-width { position: relative; left: -12px; right: -12px; margin-bottom: -12px; width: calc(100% + 24px); overflow: hidden; border-radius: 0 0 6px 6px; /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 992px) { .full-width { left: -128px; right: -128px; width: calc(100% + 256px); border-radius: 6px; } }

.full-width img, .full-width video, .full-width iframe { width: 100%; height: 100%; object-fit: cover; }

.full-width:not(:first-child) { margin-top: 3ch; }

.full-width:not(:last-child) { margin-bottom: 3ch; }

.full-width-caption { position: absolute; left: 8px; bottom: 4px; font-size: 1.2rem; text-shadow: 0 0 2px black, 0 0 4px black, 0 0 4px black, 0 0 8px black; font-style: italic; }

#page-title-runes { font-family: "Quivira"; font-weight: 300; font-size: 1.5rem; margin-left: auto; }

#page-title-runes-subtle { font-family: "Quivira"; font-weight: 300; position: absolute; left: 0; color: rgba(255, 255, 255, 0.25); font-size: smaller; bottom: 4px; z-index: -1; }

a { color: var(--link-color); text-decoration: none; }

a:active, a:focus, a:hover { text-decoration: underline; }

.item-type-text { font-style: italic; font-weight: 600; }

.item-title-runes, .spell-title-runes { border-bottom: 0; font-weight: 400; font-size: x-large; font-family: 'Quivira'; text-align: center; margin-top: 0; line-height: 1; margin-bottom: 0; text-shadow: 0 2px 2px black; /* Medium devices (landscape tablets, 768px and up) */ /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 768px) { .item-title-runes, .spell-title-runes { width: 40%; float: right; } }

div.spell-info-container div .spell-info-classes { display: block; font-style: italic; font-size: larger; /* Medium devices (landscape tablets, 768px and up) */ }

@media only screen and (min-width: 768px) { div.spell-info-container div .spell-info-classes { position: absolute; top: 8px; right: 12px; } }

table.spell-info tbody { font-size: 1.1rem; }

table.spell-info tbody tr td.spell-info-school { font-weight: bold; font-style: italic; text-align: left !important; }

table.spell-info tbody tr td { padding: 0.5ch 0 0 0; }

table.spell-info tbody tr td:first-child { text-align: right; font-weight: bold; }

table.spell-info tbody tr td:nth-child(2) { padding-left: 0.75ch; }

table { table-layout: fixed; border-collapse: collapse; }

table thead th { border-bottom: 1px solid var(--accent-color); padding-bottom: 0.5ch; }

table td { padding: 0.5ch 1ch; }

.full-width-table > table { width: 100%; }

.float-right-if-big, .float-right-40-width-if-big { /* Medium devices (landscape tablets, 768px and up) */ /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 992px) { .float-right-if-big, .float-right-40-width-if-big { float: right; clear: right; padding-left: 1.5ch; } }

.float-right-40-width-if-big { width: 100%; }

@media only screen and (min-width: 992px) { .float-right-40-width-if-big { width: 40%; } }

.side-float-right-stacked, .side-float-right { position: relative; float: right; /* Medium devices (landscape tablets, 768px and up) */ /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 992px) { .side-float-right-stacked, .side-float-right { right: -128px; } }

.side-float-right-stacked { clear: right; }

.sidebar, .sidebar-right, .sidebar-left { position: relative; backdrop-filter: blur(20px); overflow: hidden; border-radius: 8px; border: 1px solid var(--accent-color); padding: 10px; padding-top: 0; clear: both; background-color: #292723; background-image: url("https://lithiumfluorine.eu/files/u/img/dnd-gw2/pattern5_xlowres2.webp"); background-blend-mode: color-burn; background-size: cover; text-shadow: 0 2px 2px black; width: 80%; margin: auto; hyphens: auto; }

.sidebar h2, .sidebar-right h2, .sidebar-left h2 { font-weight: 300; border-bottom: 1px solid var(--accent-color); margin-top: 4px; }

.sidebar-left { clear: left; float: left; width: 40%; margin-right: 12px; }

.sidebar-right { clear: right; float: right; width: 40%; margin-left: 12px; }

.line-left { position: relative; padding-left: 8px; }

.line-left::before { content: ""; position: absolute; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, rgba(171, 150, 111, 0) 0%, rgba(171, 150, 111, 0.48) 24%, #ab966f 50%, rgba(171, 150, 111, 0.42) 79%, rgba(171, 150, 111, 0) 100%); }

.spell-icon { width: 100%; /* Medium devices (landscape tablets, 768px and up) */ }

@media only screen and (min-width: 768px) { .spell-icon { clear: right; float: right; width: 40%; } }

main > *:first-child { margin-top: 0; }

blockquote.god-lore-block { width: 80%; padding-left: 2ch; padding-top: 1ch; padding-bottom: 1ch; margin: auto; font-family: Cormorant; font-style: italic; font-size: 1.1em; position: relative; line-height: 1.5; border-left: 0; }

blockquote.god-lore-block::before { background: linear-gradient(to bottom, rgba(171, 150, 111, 0) 0%, rgba(171, 150, 111, 0.48) 24%, #f7c56a 50%, rgba(171, 150, 111, 0.42) 79%, rgba(171, 150, 111, 0) 100%); content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; }

div.sidebar2 { position: relative; padding-bottom: 8px; text-align: justify; hyphens: auto; /* Large devices (laptops/desktops, 992px and up) */ }

@media only screen and (min-width: 992px) { div.sidebar2 { margin-left: 24px; margin-right: 12px; clear: right; float: right; width: 45%; } }

div.sidebar2::before { background: linear-gradient(to right, rgba(171, 150, 111, 0) 0%, rgba(171, 150, 111, 0.48) 24%, #f7c56a 50%, rgba(171, 150, 111, 0.42) 79%, rgba(171, 150, 111, 0) 100%); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; }

div.sidebar2::after { background: linear-gradient(to right, rgba(171, 150, 111, 0) 0%, rgba(171, 150, 111, 0.48) 24%, #f7c56a 50%, rgba(171, 150, 111, 0.42) 79%, rgba(171, 150, 111, 0) 100%); content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; }

blockquote { width: 80%; padding-left: 2ch; padding-top: 1ch; padding-bottom: 1ch; margin: auto; font-family: Cormorant; font-style: italic; font-size: 1.1em; position: relative; line-height: 1.5; border-left: 0; }

blockquote::before { background: linear-gradient(to bottom, rgba(171, 150, 111, 0) 0%, rgba(171, 150, 111, 0.48) 24%, #f7c56a 50%, rgba(171, 150, 111, 0.42) 79%, rgba(171, 150, 111, 0) 100%); content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; }

.quote-source { text-align: right; margin-right: 4ch; }

.music-player-button { cursor: pointer; }

.tag-new::after, .tag-updated::after, .tag-note::after { border-radius: 6px; text-shadow: 0 0 4px black; color: white; font-family: "Verdana", "Arial Narrow", "Liberation Sans Narrow", "Liberation Sans", "Gill Sans", "Helvetica", sans-serif; font-size: 0.35cm; padding: 3px 4px; font-weight: 300; }

.tag-new::after { content: "NEW"; background-color: #cc4b2b; }

.tag-updated::after { content: "UPDATED"; background-color: #3b6fdf; }

.tag-note::after { content: "NOTE"; background-color: #67d400; }

.gain-lose { display: flex; flex-flow: row wrap; }

.gain-lose div { display: flex; flex-flow: column nowrap; gap: 0; justify-content: top; align-items: center; width: 100%; }

@media only screen and (min-width: 992px) { .gain-lose div { width: 50%; } }

.gain-lose div ul { margin-top: 4px; margin-bottom: 0; }

.gain-lose div h3 { text-align: center; }

.gain-lose div:first-child li { list-style-type: "＋ "; }

.gain-lose div:last-child li { list-style-type: "–  "; }

.tight-list { column-width: 10rem; }

.tight-list ul { margin-top: 0; hyphens: auto; }

.dev-note { font-style: italic; color: lightgray; }

.link-gallery { display: flex; width: 100%; flex-flow: row wrap; justify-content: space-around; }

.link-gallery a { width: 40%; }

.link-gallery a img { width: 100%; }

.float-icon { clear: left; float: left; max-height: 4em; max-width: 4em; object-fit: contain; }

/*# sourceMappingURL=main.css.map */