html {scroll-behavior:smooth;text-rendering:optimizeLegibility;}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
}

* {margin:0;padding:0;font-size:1em;font-family:Calibri, Sans-serif}
h1 {font-size:2.14em;}
h2 {font-size:1.5em;}
h3 {font-size:1.29em;}
h4 {font-size:1.11em;}
h5 {font-size:1em;}
a {color:white;text-decoration:underline;}
a:hover {text-decoration:none;}

input[type="text"] {color:black;padding:5px;margin:5px;border:inset solid 2px #333;}

.hidden {display:none !important;}

.close {font-size:3em;font-weight:bold;width:32px;height:32px;}
.close:hover {color:#0096FF;cursor:pointer;}

.human {background-color:#1434A4;border-color:#1434A4;}/* blue */
.beast {background-color:#6E260E;border-color:#6E260E;}/* brown */
.demon {background-color:#C41E3A;border-color:#C41E3A;}/* red */
.alien {background-color:#097969;border-color:#097969;}/* green */
.wizard {background-color:#702963;border-color:#702963;}/* purple */
.rogue {background-color:#089BBD;border-color:#089BBD;}/* aqua */
.paladin {background-color:#BDBD1C;border-color:#BDBD1C;}/* yellow */
.ai {background-color:#F28C28;border-color:#F28C28;}/* orange */
.guild {background-color:#555555;border-color:#555555;}/* gray */

body {background-color:#021931;display:flex;align-items:stretch;align-content:stretch;flex-direction:column}
/* body * {border:1px solid whitesmoke;border-style:collapse;} */

#header {background-color:#000d1a;color:#e6f3ff;border-bottom:1px solid #001a33;display:flex;align-items:center;align-content:center;justify-content:center;padding:5px 15px;z-index:99;}
#header > div {flex:1 1 0px;}
#header > div span {cursor:pointer;}
#header > div span:hover {text-decoration:underline;}
#header a {color:whitesmoke;font-weight:bold;display:table;text-decoration:none;}
#header a > * {display:table-cell !important;vertical-align:middle !important}

#header .slogan {
    font-size:2.2em;
    font-weight:bold;
    animation:rainbow-text-simple-animation-rev 0.75s ease forwards;
    background-color:#9481D4;
    background-image:linear-gradient(45deg, #9481D4 15%, #FFF6A3 30%, #C3FFDC 45%, #FDC5C5 60%, #FF95EA 75%);
    background-size:100%;
    background-repeat:repeat;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
#header .slogan:hover{
    text-decoration:none;
    animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}
#menuIcon {display:none;}
@media only screen and (max-width: 600px) {
    #header .slogan {margin-left:25px;}
    #menuIcon {cursor:pointer;display:flex;align-items:center;align-content:stretch;justify-content:center;flex-direction:column;gap:5px;}
    #menuIcon span {background-color:gainsboro;display:block;height:3px;width:22px;}
    #userLinks {display:none;}
}
@media only screen and (max-width: 360px) {
    #header .slogan {display:none;}
}
@keyframes rainbow-text-simple-animation-rev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}
@keyframes rainbow-text-simple-animation {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}

button {
    display: inline-block;
    outline: 0;
    cursor: pointer;
    border: 2px solid whitesmoke;
    border-radius: 3px;
    color: #fff;
    background: #0F52BA;
    font-size: 20px;
    font-weight: 600;
    height: 100%;
    padding: 8px 12px;
    text-align:center;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}                
button.register {background:#D22B2B;border-color:#000;}
button.signin {background:#0F52BA;border-color:#000;z-index:99;}
button.getstarted {background:#702963;border:1px solid #696969;margin-bottom:35px;}
button.seepreview {background:#CC5500;border:1px solid #696969;margin-bottom:35px;}
#nextSteps button {border-color:#444;}
button:hover {color: #fff;background:#088F8F;}
button.alt:hover {background:#FDDA0D;color:#333 !important;}
button[disabled="disabled"]:hover {cursor:not-allowed;}

#header button {margin-top:5px;margin-bottom:5px;}

#explanation {background-color:gainsboro;color:#363636;font-size:1.6em;padding:50px;}
#explanation ul {list-style-type:circle;margin-left:25px;}
#explanation ul li {margin-left:25px;padding:5px;}
#explanation a {color:#363636;}
#explanation a:hover {color:#0096FF;}
#explanation .close {float:right;margin-top:-5px;}

#body {color:silver;font-weight:bold;}
#body > h2 {margin:30px;color:whitesmoke;}
#body > p {margin:20px;}
#body em {font-size:0.75em;font-weight:normal;}
#body .small {font-size:10px;font-weight:normal;}
#body p.small {font-size:10px;font-weight:normal;margin:10px;}
#classSelector {display:flex;align-items:center;align-content:center;justify-content:center;gap:10px;margin:10px 50px;text-align:center;}
#classSelector > [type="radio"] {position:absolute;opacity:0;width:0;height:0;}
#classSelector > label {background-color:#213245;border:2px solid #162D45;border-radius:3px;flex:1 1 0px;margin:10px;padding:10px;}
#classSelector > label:hover {cursor:pointer;border:2px solid whitesmoke;background-color:#2A4159;}
#classSelector > label h2, #selectedClass > label h2, #guildModifiers > label h2 {
    color:white !important;
    margin:10px -12px;
    padding:5px;
    border-width:1px 0px 1px 0px;
    border-style:double;
    position:relative;
    box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
}
#classSelector > label h2::before, #classSelector > label h2::after, #selectedClass > label h2::before, #selectedClass > label h2::after, #guildModifiers > label h2::before, #guildModifiers > label h2::after  {
    position:absolute;
    content: '';
    display: block;
}
#classSelector > label h2::before, #selectedClass > label h2::before, #guildModifiers > label h2::before {
    width: 0.235em;
    height: 100%;
    padding: 0 0 0.238em;
    top: -1px;
    left: -0.235em;
    background: inherit;
    border-radius: 0.313em 0 0 0.313em;
}
#classSelector > label h2::after, #selectedClass > label h2::after, #guildModifiers > label h2::after {
    width: 0.235em;
    height: 100%;
    padding: 0 0 0.238em;
    top: -1px;
    right: -0.235em;
    background: inherit;
    border-radius: 0 0.313em 0.313em 0;
}
#classSelector > label div:nth-of-type(4), #selectedClass > label div:nth-of-type(4) {color:#CC7000;}
#classSelector input[type="radio"]:checked + label div:nth-of-type(4) {color:#FF8C00;}
#classSelector input[type="radio"]:checked + label {border:2px solid white;background-color:#374657;color:whitesmoke;}
#classSelector.used input[type="radio"]:not(:checked) + label {opacity:0.6;}
#classSelector.used input[type="radio"]:not(:checked) + label:hover {opacity:0.8;}
@media only screen and (max-width: 1040px) {
    #classSelector {flex-wrap:wrap;}
    #classSelector > label {min-width:250px;margin:10px 25px;}
}
@media only screen and (max-width: 1400px) and (orientation: landscape) {
    #classSelector {flex-wrap:wrap;}
    #classSelector > label {min-width:250px;margin:10px 25px;}
}

#gameInformation {background-color:#374657;padding:40px 100px;}
#gameInformation > ol {list-style:none;display:flex;flex-direction:row;align-items:center;align-content:center;justify-content:center;gap:50px;flex-wrap:none}
#gameInformation > ol > * {background-color:whitesmoke;color:#343434;box-shadow: inset 0px 0px 5px #343434;border:1px solid gainsboro;border-radius:3px;font-size:1.2em;font-weight:bold;padding:25px 15px;text-align:center;width:300px;}
#gameInformation > ol > div {font-size:2.2em;height:50px;width:50px;padding:10px;vertical-align:center;}
@media only screen and (max-width: 1040px) {
    #gameInformation > ol {
        flex-direction:column;
    }
    #gameInformation > ol > * {
        height: auto;
        width: auto;
    }
    #gameInformation > ol > div {
        font-size:3em;
        transform: rotate(90deg);
        display:none;
    }
}
@media only screen and (max-width: 1400px) and (orientation: landscape) {
    #gameInformation > ol > div {display:none;}
}
@media only screen and (max-width: 600px) {
    #gameInformation {background-color:#374657;padding:35px 25px;}
    #gameInformation > ol {gap:35px;}
    #gameInformation > ol > * {padding:15px 10px;}
}
#gameInformation > ol > li > strong {color:#088F8F;}

#choiceInformation, #guildInformation {background-color:whitesmoke;display:flex;align-items:center;align-content:center;justify-content:center;padding:40px 100px;}
#choiceInformation > div, #guildInformation > div {display:flex;align-items:center;align-content:center;justify-content:center;}
#choiceInformation > div:first-of-type, #guildInformation > div:first-of-type {flex:1 1 30%;}
#choiceInformation > div:last-of-type, #guildInformation > div:last-of-type {flex:1 1 70%;}
#selectedClassInformation, #guildOtherInformation {color:black;font-size:1.5em;font-weight:normal;margin-left:50px;}
#selectedClassInformation ul, #guildOtherInformation ul {font-size:0.8em;font-weight:normal;margin-left:50px;margin-top:20px;}
#selectedClassInformation ul li, #guildOtherInformation ul li {margin:10px;}
#selectedClass, #guildModifiers {background-color:#213245;border:2px solid #000d1a;border-radius:3px;min-width:200px;margin:10px;padding:10px;text-align:center;}
#priorArrow, #nextArrow {font-size:4em;}
#priorArrow:hover, #nextArrow:hover {cursor:pointer;color:grey;}

@media only screen and (max-width: 600px) {
    #choiceInformation, #guildInformation {
        flex-direction:column;
        padding:50px 0px;
    }
    #choiceInformation > div, #guildInformation > div {
        flex:inherit;
    }
    #selectedClassInformation, #guildOtherInformation {margin:25px;}
}

#nextSteps {background-color:#374657;padding:25px 50px;text-align:center;}
#nextSteps * {color:whitesmoke;font-size:1.1em;font-weight:normal;}
#nextSteps p {font-size:2em;}
#nextSteps p.nextStepsTitle {font-weight:bold;font-size:2.2em;}
#nextSteps input {color:#222;width:300px;padding:8px;margin:10px;}
#nextSteps button {border:1px solid silver;}
#keypad {padding:15px;font-size:1.2em;}
#number {display:none;}
button.refresh {font-family:Lucida Sans Unicode;font-size:2.2em}
.keypadKey {display:inline-block;margin:25px;padding:25px;border:1px solid silver;color:silver;border-radius:3px;}
.keypadKey:hover {cursor:pointer;border-color:white;color:white;background-color:rgba(222,222,222,0.1);}
.keypadKey.invalidSelection {border-color:darkred;color:rgba(222,222,222,0.25) !important;}
.keypadKey.invalidSelection:hover {cursor:not-allowed;background-color:transparent;}
#inlineTOS {border:2px solid silver;margin:0 auto;width:60%;}
#inlineTOS ol {list-style:none;}
#inlineTOS ol > li {padding:2px;margin:1px;}
#inlineTOS ol > li:not(:first-child) {display:none;}
#inlineTOS h3 {color:silver;cursor:pointer;border:1px solid transparent}
#inlineTOS h3:hover span {color:whitesmoke;background-color:rgba(33,50,69,0.25);border-color:rgba(33,50,69,0.40)}
#inlineTOS ol li ol li {color:gainsboro;font-size:16px;text-align:left;padding:5px;}
#inlineTOS h3 + ol:not(.hidden) {background-color:rgba(33,50,69,0.75);border-color:rgba(33,50,69,0.9);}
#continueRegister strong {color:#0096FF;}

#cookieConfig {background-color:gainsboro;border:2px solid #333333;border-radius:5px;box-shadow:0px 0px 3px #333333;display:inline-flex;flex-direction:column;align-items:center;align-content:center;justify-content:center;padding:35px;}
#cookieConfig p {color:#353535;display:block;font-size:1.4em;text-shadow:1px 1px rgba(128,128,128,0.69);}
#cookieConfig a {color:#0096FF;text-decoration:none;}
#cookieConfig a:hover {text-decoration:underline;}
#cookieConfig a em {color:#0096FF;}
#cookieConfig span {color:#353535;display:block;font-size:1.2em;text-shadow:1px 1px rgba(128,128,128,0.69);}
#cookieConfig .toggleItem {display:flex;align-items:center;gap:15px;margin:10px;}
#cookieConfig .toggleItem > span {font-weight:normal;}
#cookieConfig .toggleItem > span:last-of-type {color:#0096FF;font-weight:bold;}

 /* The switch - the box around the slider */
#cookieConfig .toggleOptional {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
#cookieConfig .toggleOptional input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The label */
#cookieConfig .label {
    display:inline-block;
}

/* The slider */
#cookieConfig .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374657;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -ms-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

#cookieConfig .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -ms-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

#cookieConfig input:checked + .slider {
  background-color: #0096FF;
}

#cookieConfig input:focus + .slider {
  box-shadow: 0 0 1px #0096FF;
}

#cookieConfig input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -moz-transform: translateX(26px);
  -ms-transform: translateX(26px);
  -o-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
#cookieConfig .slider.round {
  border-radius: 34px;
}

#cookieConfig .slider.round:before {
  border-radius: 50%;
}

#name {display:none;}

#otherInformation {background-color:#088F8F;padding:50px 50px;text-align:center;}
#otherInformation p {color:#504f4f;font-size:2.5em;font-weight:bold;text-shadow:-2px 2px 1px #504f4f;-webkit-text-stroke:1px darkgrey;text-stroke:1px darkgrey;}
#otherInformation p strong {color:#702963;}
@media only screen and (max-width: 600px) {
    #nextSteps, #otherInformation {padding:25px;}
    #otherInformation p {padding-left:0;padding-right:0;}
}

#cardInformation {background-color:#E5E4E2;text-align:center;}
#cardInformation > p {color:#454545;font-size:2em;}
#cardInformation > p:first-of-type {padding:50px 50px 20px}
#cardInformation > p:last-of-type {padding:20px 50px 50px}
#commanderCards {background-color:#374657;border:2px solid #333333;border-radius:5px;box-shadow:0px 0px 3px #333333;display:inline-flex;flex-direction:column;align-items:center;align-content:center;justify-content:center;padding:35px;}

.rarityScale, .rarityExplanation {display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;}
.rarityScale {gap:25px;}
.rarityExplanation {}
.rarityScale > div {background-color:#d3d3d3;border:3px inset solid gray;border-radius:5px;box-shadow:0px 0px 3px #999999;outline:2px solid #333333;width:140px;height:175px;}
.rarityScale > div > h4 {padding:5px 10px;background:#555555;}
/*.rarityScale > div > h4 {padding:5px 10px;background:linear-gradient(-45deg, #454545, #666666, #888888, #666666, #454545);background-size:200% 200%;animation:gradient 5s ease infinite;}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
*/
.rarityScale > div > p > span {display:block;text-shadow:1px 1px rgba(128,128,128,0.69);}
.rarityScale > div > p > span:first-of-type {color:#444444;font-size:1.5em;margin-top:25px;}
.rarityScale > div > p > span:last-of-type {color:#333333;font-size:1.75em;margin-top:15px;}

.rarityExplanation > p {background-color:#d3d3d3;border:3px inset solid gray;border-radius:5px;box-shadow:0px 0px 3px #999999;outline:2px solid #333333;margin-top:25px;padding:15px;}
.rarityExplanation > p > span {color:#353535;display:block;font-size:1.6em;text-shadow:1px 1px rgba(128,128,128,0.69);}
.rarityExplanation em {color:#464646;}

@media only screen and (max-width: 1040px) {
    #cardInformation {padding:0 50px;}
    #commanderCards {padding:20px;margin:20px;}
    .rarityScale {gap:15px;}
}

@media only screen and (max-width: 600px) {
    #cardInformation {padding:0;}
    #commanderCards {padding:20px;margin:20px;}
    .rarityScale {gap:15px;}
}

.common h4 {color:whitesmoke;}
.strange h4 {color:#009900;}
.rare h4 {color:#0096FF;}
.epic h4 {color:#710193;}
.legendary h4 {color:#ff7518;}
.rarityScale > div:hover {cursor:pointer;}
.common.selected {outline-color:whitesmoke;outline-color:rgba(245, 245, 245, 0.69);}
.strange.selected {outline-color:#009900;outline-color:rgba(0, 153, 0, 0.69);}
.rare.selected {outline-color:#0096FF;outline-color:rgba(0, 150, 255, 0.69);}
.epic.selected {outline-color:#710193;outline-color:rgba(113, 1, 147, 0.69);}
.legendary.selected {outline-color:#ff7518;outline-color:rgba(255, 117, 24, 0.69);}
.common:hover {outline-color:whitesmoke;}
.strange:hover {outline-color:#009900;}
.rare:hover {outline-color:#0096FF;}
.epic:hover {outline-color:#710193;}
.legendary:hover {outline-color:#ff7518;}

.rarityExplanation strong {
    -webkit-text-stroke-width:1.5px;
    -webkit-text-stroke-color:#353535;
}
#commonDescription strong {-webkit-text-fill-color:whitesmoke;}
#strangeDescription strong {-webkit-text-fill-color:#009900;}
#rareDescription strong {-webkit-text-fill-color:#0096FF;}
#epicDescription strong {-webkit-text-fill-color:#710193;}
#legendaryDescription strong {-webkit-text-fill-color:#ff7518;}

#gamePreview {
    color:#504f4f;background-color:gray;font-size:2.5em;font-weight:bold;text-shadow:0px 1px 1px #bbbaba;
}

#socialMedia {
    padding:25px;
    background-color:#021931;
}
#socialMedia > p {
    padding:15px;
    font-size:1.1em;
    font-weight:normal;
}

#socialMedia > svg {
    margin:15px;
}
#socialMedia > svg:hover {
    color:#0096FF;
    cursor:pointer;
}

#footer {background-color:#000d1a;color:#e6f3ff;text-align:center;}
#footer ul {list-style:none;padding:35px 25px 10px;display:flex;align-items:center;align-content:center;justify-content:center;gap:25px;flex-wrap:wrap;margin-bottom:10px;}
#footer > p {padding-bottom:35px;}
#footer a:hover {color:#0096FF;}

#scrolledTriangle {
    right:0;
    top:0;
    padding:0;
    display:block;
    position: fixed;
    height: 60px;
    width: 60px;
    cursor: pointer;
    background: transparent;
    rotate: -90deg;
    z-index:98;
}
#scrolledTriangle span {
    top:0;
    right:0;
    margin-top:15px;
    margin-right:8px;
    position:absolute;
    color:whitesmoke;
    font-size:2.5em;
}
#cookieTriangle {
    right:0;
    bottom:0;
    padding:0;
    display:block;
    position: fixed;
    height: 60px;
    width: 60px;
    cursor: pointer;
    background: transparent;
}
svg .triangle path {
    fill: #0F52BA;
}
svg .star path {
    fill: #f4f4f4;
}

#cookiePanel {
    color:#464646;
    font-size:1.2em;
    padding:35px 15px 35px;
    width:420px;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    background:whitesmoke;
    border-left:2px solid gray;
    z-index:100;
}
#cookiePanel b {
    color:#353535;
    font-size:1.3em;
}
#cookiePanel ul {padding:5px 35px;}
#cookiePanel ul li {padding:2px;}
#cookiePanel hr {
    margin:25px 0;
    background:rgb(222,222,222);
    background:rgb(255,255,255,0.69);
}
#cookiePanel em {font-size:0.8em}
#cookiePanel em a {color:#0096FF}

#cookiePanel .close {position:fixed;bottom:35px;right:10px;}

@media only screen and (max-width: 600px) {
    #cookiePanel {
        width:calc(100% - 30px);
        height:569px;
        overflow-y:auto;
        font-size:1.2em;
        padding:15px;
        position:fixed;
        top:auto;
        left:auto;
        right:auto;
        bottom:0;
        background:whitesmoke;
        border-top:2px solid gray;
        z-index:100;
    }
}