/* The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. See https://creativecommons.org/publicdomain/zero/1.0/ for details. */ @font-face { font-family: Oranienbaum; font-style: normal; font-weight: 400; src: url('Oranienbaum-Regular.woff') format('woff'); } @font-face { font-family: Cardo; font-style: normal; font-weight: 400; src: url('Cardo-Regular.woff') format('woff'); } @font-face { font-family: Cardo; font-style: normal; font-weight: 700; src: url('Cardo-Bold.woff') format('woff'); } @font-face { font-family: Cardo; font-style: italic; font-weight: 400; src: url('Cardo-Italic.woff') format('woff'); } * { margin: 0; padding: 0; } #change { position: relative; top: 1em; } ul { margin-left: 1em; margin-bottom: 1em; } ul.cards { list-style-type: none; display: inline-block; margin: auto; } html { font-family: Cardo, serif; font-size: 20px; background-color: black; min-height: 100%; height: 100%; } @media (max-width: 639px) { html { font-size: 14px; } } body { background-color: black; min-height: 100%; height: 100%; box-sizing: border-box; } body.standalone { padding-top: 20px; } main { background-color: white; max-width: 25.2em; margin: 0 auto; padding: 1em; display: block; min-height: 100%; box-sizing: border-box; } body.standalone main { padding-top: 0.5em; } table { border-collapse: collapse; margin: auto; max-width: 25em; } table.tall td { padding-top: 0.125em; padding-bottom: 0.125em; } thead { font-size: 0.8em; font-variant: small-caps; vertical-align: bottom; text-align: left; } th { font-weight: bold; } tbody, tfoot { vertical-align: top; text-align: left; } tbody tr:nth-last-child(odd) { background-color: hsl(270, 30%, 85%); } #fate th:first-child, #fate td:first-child { text-align: center; width: 2em; } #abilities td { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #abilities td:first-child { white-space: nowrap; } th, td { padding: 0 0.5rem; } h1:before { content: '\25cf'; color: #dae9bc; text-shadow: -0.08333em -0.08333em 0.25em #aec38b, 0.08333em -0.08333em 0.25em #aec38b, 0.08333em 0.08333em 0 #534f53, -0.08333em 0.08333em 0 #534f53, 0 0.1667em 0 #414045; -webkit-text-stroke: 0; display: inline-block; width: 1em; margin-top: -0.1em; vertical-align: top; margin-left: -1em; } h1 { padding-left: 1em; margin-top: 1em; margin-bottom: 0.5em; font-family: Oranienbaum, Cardo, serif; color: hsl(270, 25%, 75%); font-size: 2em; text-shadow: none; border-bottom: solid hsl(270, 25%, 50%) 0.0625em; line-height: 0.8em; font-weight: normal; letter-spacing: -0.02em; text-shadow: -1px 0 black, 1px 0 black, 0 1px black, 0 -1px black, -0.707px -0.707px black, 0.707px 0.707px black, -0.707px 0.707px black, 0.707px -0.707px black; } h1:first-child { margin-top: 0; } h2:before { content: '\25fc'; color: #00a1eb; font-size: 1.5em; width: 0.55em; display: inline-block; } h2 { height: 1.15em; font-size: 1.25em; font-family: Oranienbaum, Cardo, serif; text-align: left; letter-spacing: -1px; z-index: 1; border-bottom: solid hsl(270, 30%, 85%) 0.25em; padding-right: 1em; white-space: nowrap; margin-bottom: 0.5em; font-weight: bold; } a:link, a:visited, a:active { color: hsl(270, 25%, 50%); font-weight: bold; text-decoration: none; } .fate-name { font-weight: bold; } .fate-effect { font-style: italic; font-size: 0.95em; } .fate-action { font-size: 0.95em; } input[type=checkbox] { margin-right: 0.5em; } .button { font-size: 1.1em; font-weight: bold; color: black !important; background-color: hsl(270, 30%, 85%); margin: 0.0625em 0; padding: 0.375em 0.5em; display: inline-block; border-radius: 0 0.5em 0 0.5em; transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s; -webkit-transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s; box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa; border: solid hsl(270, 30%, 85%) 1px; min-width: 6em; } .button.small { min-width: 1.25em; } .button:hover, .button:focus { box-shadow: 0.125em 0.125em 0.25em 0.0625em #888; border-color: hsl(270, 25%, 50%); } .button:active { box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888; } main > div, main > noscript { text-align: center; margin-bottom: 1rem; display: block; } ul.cards li { padding: 0.25em 0; display: inline-block; width: 8em; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: Cardo, serif; font-size: 1.1em; margin-top: 0.5em; width: 60%; margin-left: 20%; padding: 0 0.5em; border: solid hsl(270, 30%, 85%) 1px; border-radius: 0 0.5em 0 0.5em; background-color: hsl(270, 30%, 85%); box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa; transition: box-shadow 0.167s, border-color 0.167s; -webkit-transition: box-shadow 0.167s, border-color 0.167s; text-align:-webkit-center !important; font-weight: bold; } select:hover, select:focus { box-shadow: 0.125em 0.125em 0.25em 0.0625em #888; border-color: hsl(270, 25%, 50%); outline: none; } select:active { box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888; outline: none; } option { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: Cardo, serif; background-color: white; text-align: center; font-weight: normal; } p, li { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } p { margin-bottom: 0.5em; } blockquote { text-align: justify; font-style: italic; margin-left: 1em; margin-right: 1em; margin-bottom: 0.5em; font-size: 0.95em; } @keyframes row-content-in { 0% { max-height: 0; opacity: 0; } 50% { max-height: 10em; } 100% { opacity: 1; } } @-webkit-keyframes row-content-in { 0% { max-height: 0; opacity: 0; } 50% { max-height: 10em; } 100% { opacity: 1; } } table { width: 100%; } #fate tbody tr div { max-height: 10em; animation: row-content-in 0.6667s; -webkit-animation: row-content-in 0.6667s; } #fate tbody ~ tfoot { transition: opacity 0.3333s, visibility 0s 0.3333s; -webkit-transition: opacity 0.3333s, visibility 0s 0.3333s; opacity: 0; visibility: hidden; } #fate tbody:empty ~ tfoot { opacity: 1; visibility: visible; } .button.big { display: inline-block; width: 35%; padding-top: 1em; padding-bottom: 1em; margin: 0.5em 0.5em; } .card1 { width: 2.5em; background-color: white; display: inline-block; margin: 0.2em 0.375em; border: solid 1px black; } .card2 { width: 2.5em; background-color: black; display: inline-block; margin: 0.2em 0.375em; border: solid 1px black; color: white; } .card { display: block; position: relative; width: 20em; height: 27.1875em; font-size: 88.275%; margin: 0.5em auto; z-index: 1; } .card:after { content: ''; display: block; position:absolute; width:100%; height:100%; left:0; top:0; background-image: url(card.png); background-size: cover; z-index: -1; } .card .art { position: absolute; z-index: -1; left: 9.5%; right: 9.5%; width: 81%; height: auto; top: 7.1%; } .card.adventurer .name, .card.adventurer .type { background-color: #4ba12f; } .card.object .name, .card.object .type { background-color: #cdab4c; } .card .name { position: absolute; color: white; text-align: center; width: 77%; border: solid white 0.1em; border-radius: 0.6em; line-height: 1.6em; height: 5.4%; font-size: 0.85em; left: 11.5%; right: 11.5%; top: 3.5%; box-sizing: border-box; text-shadow: -1px -1px rgba(0, 0, 0, 0.75), 1px -1px rgba(0, 0, 0, 0.75), -1px 1px rgba(0, 0, 0, 0.75), 1px 1px rgba(0, 0, 0, 0.75), 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black; } .card .type { color: black; letter-spacing: 0.05em; font-weight: bold; text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75), 0.707px -0.707px rgba(255, 255, 255, 0.75), -0.707px 0.707px rgba(255, 255, 255, 0.75), 0.707px 0.707px rgba(255, 255, 255, 0.75), 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white; text-align: left; margin: auto; position: absolute; height: 2.55%; width: 84%; left: 8%; top: 52.3333%; box-sizing: border-box; padding-left: 0.6667em; font-size: 0.575em; line-height: 1.25em; box-shadow: inset 0 0 0.25em black; } .card .gender { position: absolute; height: 9%; top: 47.5%; right: 8.5%; } .card .gender img { float: right; height: 100%; } .card .abilities { text-align: left; position: absolute; top: 57%; bottom: 8%; left: 10%; right: 10%; font-size: 0.8em; line-height: 1.05em; padding-left: 1em; } .card .cost span { position: relative; content: ' '; width: 1.5em; height: 1.5em; border-radius: 1.5em; display: inline-block; box-sizing: border-box; margin: 0.5em 0.05em; box-shadow: 0 0 0.05em 0.05em black; background-image: url(sword.png); background-size: 0.2778em 1.3em; background-position: center; background-repeat: no-repeat; text-align: center; } .card .cost span:before, .card .cost span:after { position: absolute; line-height: 1.333em; width: 1.5em; height: 1.5em; display: block; transform-origin: 50% 65%; background-image: url(sword.png); background-size: 0.2778em 1.3em; background-position: center; background-repeat: no-repeat; } .card .cost .r:before { transform: rotate(30deg); -webkit-transform: rotate(30deg); content: ''; } .card .cost .r img { /* :( would prefer with no extra elements... */ transform: rotate(60deg); max-width: 1.3em; position: absolute; max-height: 1.3em; transform-origin: 50% 65%; left: 0.6em; top: 0.1em; } .card .cost .r:after { transform: rotate(-30deg); -webkit-transform: rotate(-30deg); content: ''; } .card .cost .r { transform: rotate(-15deg); background-color: #e4573c; } .card .cost .g { background-color: #abbc45; } .card .abilities .skill:before { content: "Skill: "; font-weight: bold; margin-left: -1em; } .card .abilities .temporary:before { content: "Temporary power: "; font-weight: bold; margin-left: -1em; } .card .abilities .ultimate:before { content: "Ultimate power: "; font-weight: bold; margin-left: -1em; } .card .effect { text-align: center; position: absolute; top: 59%; bottom: 8%; left: 15%; width: 70%; font-size: 0.8em; line-height: 1.05em; } .card .flavor:before { content: "«"; } .card .flavor:after { content: "»"; } .card .flavor { position: absolute; bottom: 9%; width: 80%; left: 10%; font-style: italic; color: black; font-size: 0.6em; } .card .code { position: absolute; color: white; bottom: 3.5%; right: 12%; font-size: 0.65em; text-shadow: -0.0433em -0.0433em black, 0.0433em -0.0433em black, -0.0433em 0.0433em black, 0.0433em 0.0433em black, 0.06667em 0 black, -0.06667em 0 black, 0 0.06667em black, 0 -0.06667em black; } .card.dungeon { height: 17.5841em; width: 25em; } .card.dungeon:after { background-image: url(dungeon.jpg); } .card.final .name, .card.final .type { background-color: #832b22; } .card.dungeon .name { position: absolute; color: #e3f902; top: 2%; height: 7.5%; } .card.dungeon .type { color: #e3f902; left: 2.25%; right: 2.25%; width: 95.5%; height: 4.5%; top: 74%; text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75), 0.707px -0.707px rgba(0, 0, 0, 0.75), -0.707px 0.707px rgba(0, 0, 0, 0.75), 0.707px 0.707px rgba(0, 0, 0, 0.75), 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black; } .card.dungeon .power img { max-height: 1.5em; vertical-align: bottom; } .card.dungeon .power { font-size: 0.85em; position: absolute; top: 67%; height: 1em; color: white; left: 68%; width: 15%; text-align: center; text-shadow: -0.707px -0.707px rgba(0, 0, 0, 0.75), 0.707px -0.707px rgba(0, 0, 0, 0.75), -0.707px 0.707px rgba(0, 0, 0, 0.75), 0.707px 0.707px rgba(0, 0, 0, 0.75), 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black; } .card.dungeon .effect { color: #e30000; text-shadow: -0.707px -0.707px rgba(255, 255, 255, 0.75), 0.707px -0.707px rgba(255, 255, 255, 0.75), -0.707px 0.707px rgba(255, 255, 255, 0.75), 0.707px 0.707px rgba(255, 255, 255, 0.75), 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white; font-size: 0.55em; top: 83%; left: 5%; right: 5%; width: 90%; font-weight: bold; } .card.dungeon .code { right: 4%; bottom: 1.8%; } #statusbar { display: none; position: fixed; left: 0; top: 0; right: 0; height: 20px; background-color: black; } body.standalone #statusbar { display: block; } h1, h2, [onclick], label { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default; } [onclick], select, label { cursor: pointer; } @media print { @page { size: 3.5in 7in; margin: 0.5em; } .no-print { display: none !important; } body, html { background-color: white; font-size: 10pt; } main { max-width: 3.5in; } .card { width: 64mm; height: 87mm; font-size: 9pt; page-break-inside: avoid; } } @media all and (-webkit-min-device-pixel-ratio:0) { h1 { text-shadow: none; -webkit-text-stroke: 0.02em black; } .broken-on-webkit { display: none !important; } }