@font-face {font-family: RajdhaniBody; src: url(/Fonts/Rajdhani-SemiBold.ttf);}
@font-face {font-family: RajdhaniHead; src: url(/Fonts/Rajdhani-SemiBold.ttf);}
@font-face {font-family: Kissy; src: url(/Fonts/LoveRomance-YoXa.ttf);}
@font-face {font-family: Wings2; src: url(/Fonts/Wingdings_2.ttf);}

body {background-color: black; background-image: url('/Images/CRED - Background.png'); background-attachment: fixed; background-position: top center; text-align: justify; color: #CCC; margin: 0; padding: 0; font-size: 1.1em; font-family: 'RajdhaniBody';}
.list {padding-left: 0.6em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}
.list2 {padding-left: 1.2em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}
.list3 {padding-left: 1.8em; text-indent: -0.6em; color: #B8F0FB; margin: 0 0 0 0;}

em {color: #27D1F4;}
strong {color: #FFA199; text-shadow: 0 0 0.2em #FFA199; text-transform: uppercase;}
highlight {color: #F8EF00;}
kissy {font-family: 'Kissy';}
kissy:before {content: 'a';}
touch:before {content: 'L'; font-family: 'Wings2';}
convoTarget {color: #B52820; background-color: #00000066; border: solid 2px #B52820; padding: 5px 8px 2px 8px; text-transform: uppercase;}

a.primary:link {color: #F8EF00; text-decoration: none; border-left: solid 1px; padding: 4px 10px 4px 8px; position: relative;}
a.primary:visited {color: #F8EF00;}
a.primary:hover {color: #000; text-decoration: none; border-color: #F8EF00; background-color: #F8EF00;}
a.primary:active {color: #000; text-decoration: none; border-color: #F8EF00; background-color: #F8EF00;}
a.secondary:link {color: #43DAFE; text-decoration: none; border-left: solid 1px; padding: 4px 10px 4px 8px; position: relative;}
a.secondary:visited {color: #43DAFE;}
a.secondary:hover {color: #000; text-decoration: none; border-color: #43DAFE; background-color: #43DAFE;}
a.secondary:active {color: #000; text-decoration: none; border-color: #43DAFE; background-color: #43DAFE;}

ul {padding: 0 0 0 0.5em; counter-reset: item; color: #B8F0FB;}
ul li {padding: 0 0 0 0; list-style-type: none;}
ul li:before {display: inline-block; width: 1.0em; font-size: 1.0em; content: "-"; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}
ul ul {padding: 0 0 0 1.5em; counter-reset: item; color: #B8F0FB;}
ul ul li:before {display: inline-block; width: 1.0em; font-size: 1.0em; content: "-"; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}

ol {padding: 0 0 0 0.7em; counter-reset: item; color: #43DAFE; list-style-type: none;}
ol li {padding: 0 0 0 0; counter-increment: item;}
ol li:before {font-family: 'RajdhaniBody'; display: inline-block; width: 1.5em; font-size: 0.8em; font-weight: bold; content: counter(item) "."; color: #43DAFE; text-shadow: 0 0 0.2em #43DAFE;}

.page {justify-self: center; margin: 0 0.5em 0 0.5em; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(1, minmax(10em, 1fr));}
.element {justify-self: center; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(auto-fit, minmax(19em, 1fr)); grid-gap: 0.5em 2em;}

.mainbody {border-collapse: collapse; max-width: 40em; margin-left: auto; margin-right: auto; margin-bottom: 4em;}
.mainbody tr td {padding: 8px;}
.dialogue {border-collapse: collapse; width: 100%;}
.dialogue tr {vertical-align: top;}
.dialogue .talker {text-align: right; width: 120px;}

.pebRules {border-collapse: collapse; font-size: 0.9em; width: 100%; background: #70181011; margin-bottom: 1em;}
.pebRules thead tr {color: #000; text-shadow: 0 0 0.1em #00000085; text-align: left; vertical-align: bottom; font-weight: bold; background: #701810CC;}
.pebRules th, .pebRules td {padding: 2px 5px;}
.pebRules tbody tr {vertical-align: top; color: #B52820; text-shadow: 0 0 0.1em #B5282080;}
.pebRules tbody tr:nth-of-type(odd) {background-color: #70181033;}
.pebRules tbody tr:nth-of-type(even) {background-color: #70181011;}
.pebRules .right {text-align: right; width: 51px;}

.gigBoard {--background: linear-gradient(to right, #20080066, #16060E66); --border-color: linear-gradient(to right, #C72A1C22, #FF372322); --border-width: 0.5em; --edge-size: 0.75em; position: relative; isolation: isolate; width: 92%; display: inline-grid; padding: 0 1em 0 1em; margin-bottom: 0; margin-top: 0.8em; border: 0; background: var(--background); clip-path: polygon(2em 0, 2.2em 0.1em, 100% 0.1em, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0 0); font-size: 1em; color: #B52820; text-shadow: 0 0 0.1em #B5282080;}
.gigBoard::before, .gigBoard::after {content: ''; position: absolute; inset: 0;}
.gigBoard::before {background: var(--border-color); z-index: -2;}
.gigBoard::after{background: var(--background); z-index: -1; clip-path: polygon(calc(2em - 1px) 1px, calc(2.2em - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(100% - var(--edge-size) - 1px), calc(100% - var(--edge-size)) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);}

.quickHack {--background: linear-gradient(to right, #004455BB, #003344BB); --border-color: linear-gradient(to right, #55DDEE66, #66EEFF66); --border-width: 0.5em; --edge-size: 0.75em; --cut-size: 0.25em; position: relative; isolation: isolate; width: 85%; display: inline-grid; padding: 0 1em 0 1em; margin-bottom: 0; margin-top: 0.8em; border: 0; background: var(--background); clip-path: polygon(0 0, calc(100% - var(--edge-size)) 0%, 100% var(--edge-size), 100% 100%, var(--cut-size) 100%, var(--cut-size) 50%, 0 40%); font-size: 1em; color: #66EEFF; text-shadow: 0 0 0.1em #66EEFF80;}
.quickHack::before, .quickHack::after {content: ''; position: absolute; inset: 0;}
.quickHack::before {background: var(--border-color); z-index: -2;}
.quickHack::after{background: var(--background); z-index: -1; clip-path: polygon(calc(0% + 2px) calc(0% + 2px), calc(100% - calc(var(--edge-size) + 1px)) calc(0% + 2px), calc(100% - 2px) calc(var(--edge-size) + 1px), calc(100% - 2px) calc(100% - 2px), calc(var(--cut-size) + 2px) calc(100% - 2px), calc(var(--cut-size) + 2px) calc(50% - 2px), calc(0% + 2px) calc(40% - 1px));}
.ramCost {display: inline-block; float: right; margin-right: 1em;}

h1, h2, h3, h4 {font-family: 'RajdhaniHead'; text-align: left; text-transform: uppercase; color: #43DAFE; text-shadow: 0 0 0.15em #43DAFE;}
h1 {--background: linear-gradient(to right, #701810, #66160E); --border-color: linear-gradient(to right, #C72A1C, #FF3723); --border-width: 0.5em; --edge-size: 0.75em; position: relative; isolation: isolate; width: 94%; display: inline-grid; padding: 0.55em 1em 0.45em 1em; margin-bottom: 0; margin-left: -1em; border: 0; background: var(--background); clip-path: polygon(2em 0, 2.2em 0.1em, 100% 0.1em, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0 0); font-size: 1.5em;}
h1::before, h1::after {content: ''; position: absolute; inset: 0;}
h1::before {background: var(--border-color); z-index: -2;}
h1::after{background: var(--background); z-index: -1; clip-path: polygon(calc(2em - 1px) 1px, calc(2.2em - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(100% - var(--edge-size) - 1px), calc(100% - var(--edge-size)) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);}
h2 {--background: linear-gradient(to right, #120402, #080201); --border-color: linear-gradient(to right, #C72A1C, #FF3723); --border-width: 0.5em; --edge-size: 0.75em; position: relative; isolation: isolate; width: 94%; display: inline-grid; padding: 0.35em 1em 0.25em 1em; margin-bottom: 0; margin-left: -1em; border: 0; background: var(--background); clip-path: polygon(2em 0, 2.2em 0.1em, 100% 0.1em, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0 0); font-size: 1.5em;}
h2::before, h2::after {content: ''; position: absolute; inset: 0;}
h2::before {background: var(--border-color); z-index: -2;}
h2::after{background: var(--background); z-index: -1; clip-path: polygon(calc(2em - 1px) 1px, calc(2.2em - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(0.1em + 1px), calc(100% - 1px) calc(100% - var(--edge-size) - 1px), calc(100% - var(--edge-size)) calc(100% - 1px), 1px calc(100% - 1px), 1px 1px);}
h3 {font-size: 1.3em; margin-bottom: -0.5em;}
h4 {font-size: 1.3em; margin-bottom: -0.5em; color: #AAA;}