/* 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 { text-align: center; margin-bottom: 1rem; } 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; } #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; } }