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

body {background-color: black; background-image: url('/Images/CRED - Background.png'); background-attachment: fixed; background-position: top center; text-align: justify; color: #AAA; margin: 0; padding: 0; font-size: 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;}

a:link {color: #F8EF00; text-decoration: none;}
a:visited {color: #F8EF00; text-decoration: none;}
a:hover {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}
a:hover em {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}
a:active {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}

ul {margin: 0; padding: 0 0 0 1.8em; color: #B8F0FB;}
ul li {text-indent: -0.8em; list-style-type: none;}
ul li:before {display: inline-block; width: 0.8em; font-size: 1.0em; content: "[x]"; color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
ul ul li:before {content: "[o]"; font-size: 1.0em;}

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;}

.pebRules {border-collapse: collapse; font-size: 0.9em; width: 100%; background: #70181011; margin-bottom: 1em; text-align: left;}
.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;}
.pebRules .center {text-align: center;}
.pebRules .mask {background: #70181065;}

.tracker {border-collapse: collapse; width: 100%; margin: 0.5em 0 0 0; padding: 0; border: solid 1px #950000; box-shadow: 0.0em 0.0em 0.1em #950000, 0.0em 0.0em 0.2em #950000, 0.0em 0.0em 0.4em #950000;}
.tracker thead {border-bottom: solid 1px #950000;}
.marker {text-align: center;}
.progressBar {height: 16px; background-color: #FFC9C9; box-shadow: 0 0 0.1em #FF0000, 0 0 0.2em #FF0000, 0 0 0.4em #FF0000, 0 0 0.8em #FF0000, 0 0 1.6em #FF0000; color: #934242; padding: 0 0 4px 0}

.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;}