/* 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; 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: block; width: 80%; margin: 1em auto; } .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%; /* width: 64mm; height: 87mm; font-size: 9pt;*/ margin: auto; 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.4em; line-height: 1.6em; height: 5.5%; font-size: 0.85em; font-weight: bold; left: 11.5%; right: 11.5%; top: 3.5%; box-sizing: border-box; text-shadow: 0 0 0.5em black; } .card .type { color: black; letter-spacing: 0.05em; font-weight: bold; text-shadow: -0.0707em -0.0707em rgba(255, 255, 255, 0.7), 0.0707em -0.0707em rgba(255, 255, 255, 0.7), -0.0707em 0.0707em rgba(255, 255, 255, 0.7), 0.0707em 0.0707em rgba(255, 255, 255, 0.7), 0.1em 0 rgba(255, 255, 255, 0.7), -0.1em 0 rgba(255, 255, 255, 0.7), 0 0.1em rgba(255, 255, 255, 0.7), 0 -0.1em rgba(255, 255, 255, 0.7); 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; border: solid black 0.75em; display: inline-block; box-sizing: border-box; margin: 0.5em 0.05em; box-shadow: 0 0 0.05em 0.05em black; } .card .cost span:before { position: absolute; text-align: center; left: -0.75em; top: -0.75em; color: black; line-height: 1.333em; opacity: 0.5; width: 1.5em; height: 1.5em; } .card .cost .r:before { content: 'r'; } .card .cost .g:before { content: 'g'; } .card .cost .r { background-color: #e4573c; border-color: #e4573c; } .card .cost .g { background-color: #abbc45; border-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 { 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; } #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; } td:target { font-weight: bold; } @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; } } @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { text-shadow: none; -webkit-text-stroke: 1px black; latter-spacing: -1px; } .broken-on-webkit { display: none !important; } }