html, body {
    height: 100%;
}

body {
    background-color: rgb(47, 113, 133);
    font-family: "American Typewriter", courier, xFiles, Verdana, Geneva, Tahoma, sans-serif;
    color: #111111;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#header {
    flex-grow: 0;
}

#body {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#content {
    display: flex;
    flex-grow: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

h1 {
    text-align: center;
    padding: 1em;
}

a {
    color: rgb(47, 113, 133);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.cp20 {
    position: relative;
    top: 2px;
    height: 1em;
    width: 1em;
}

.rp20 {
    position: relative;
    top: 2px;
    height: 1em;
    width: 1em;
}

.indexcard {
    background-image: linear-gradient(90deg, white 0, white 1em, transparent 1px), linear-gradient(270deg, white 0, white 1em, transparent 1px), linear-gradient(180deg, white 0, white 4em, transparent 1px), repeating-linear-gradient(180deg, white, white 1.5em, #DDD 1px, #DDD calc(1.5em + 1px));
    transform: rotate(6deg);
    width: 36em;
    line-height: calc(1.5em + 1px);
    padding-top: 0em;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
    margin: 4em 2em;
    min-height: 18em;
}

.indexcard-title {
    font-weight: bold;
    text-align: center;
    padding-top: 1.5em;
    padding-bottom: 0.9em;
}

.indexcard-title a {
    color: black;
    text-decoration: underline;
}

.indexcard p {
    padding-bottom: 0.6em;
}

.indexcard ul {
    margin-top: 0;
}

.cardlist {
    background-image: linear-gradient(180deg, rgb(79,99,119) 3rem, rgb(228,226,204) 3rem, rgb(228,226,204) 6rem, #F0A4A4 calc(3rem + 2px), #F0A4A4 calc(3rem + 4px), transparent 1px), linear-gradient(90deg, transparent 0, transparent 6.5rem, red 6.5rem, red calc(6.5rem + 1px), transparent calc(6.5rem + 2px), transparent 7rem, red calc(7rem + 1px), red calc(7rem + 1px), transparent calc(7rem + 2px)), repeating-linear-gradient(180deg, transparent, transparent 1.5rem, rgb(47,113,133,0.25) 1px, rgb(47,113,133,0.25) calc(1.5rem + 1px));
    background-color: rgb(242, 234, 170);
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
    min-height: 20em;
    width: 88%;
    margin-top: 2em;
    transform: rotate(-0.25deg);
}

.cardlistsubgroup {
    margin: 0;
}

.cardlist a {
    color: #111111;
}

.cardlist-title {
    font-weight: bold;
    text-align: center;
}

.cardlist table {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cardlist tr {
    height: calc(1.5rem - 1px);
}

.cardlist th {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.7em;
    padding-bottom: 1em;
    text-align: left;
}

.cardlist td {
    padding-left: 1em;
    padding-right: 1em;
}

.cardlistimages {
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
}

.cardlistimages2 {
    max-width: 1000px;
}

.cardlistimages3 {
    max-width: 1100px;
}

.cardlist1 {
    background-image: linear-gradient(180deg, rgb(79,99,119) 3rem, rgb(228,226,204) 3rem, rgb(228,226,204) 6rem, #F0A4A4 calc(3rem + 2px), #F0A4A4 calc(3rem + 4px), transparent 1px), linear-gradient(90deg, transparent 0, transparent 6.5rem, red 6.5rem, red calc(6.5rem + 1px), transparent calc(6.5rem + 2px), transparent 7rem, red calc(7rem + 1px), red calc(7rem + 1px), transparent calc(7rem + 2px)), repeating-linear-gradient(0deg, transparent, transparent 1.5rem, rgb(47,113,133,0.25) 1px, rgb(47,113,133,0.25) calc(1.5rem + 1px));
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
    width: 90%;
    color: #111111;
    text-align: left;
    padding: 1em;
    padding-top: 0em;
    line-height: calc(1.5rem + 1px);
    margin-left: auto;
    margin-right: auto;
    transform: rotate(-0.5deg);
}

    .cardlist1 a:hover {
        color: rgb(47, 113, 133);
        text-decoration: underline;
    }

.cardlist1-title {
    font-weight: bold;
    font-size: 1.5em;
    padding-top: 0.5em;
    text-align: center;
}

.cardlist1 table {
    border-collapse: collapse;
    border: 0px;
}

.cardlist1 tr {
    height: calc(1.5rem + 1px);
}

.cardlist1 th {
    padding-bottom: 1.7em;
}

.cardlist1 td {
    padding-left: 1em;
    padding-right: 1em;
}

.cardlistindex {
    margin-left: 8em;
    margin-top: 4.2em;
    margin-bottom: 3em;
    line-height: calc(1.5rem + 1px);
}

    .cardlistindex a {
        color: rgb(47, 113, 133);
    }
    
.cardlist-title a {
    text-decoration: underline;
}

.rarity-stamp {
    transform: rotate(12deg);
    font-size: 2rem;
    font-weight: bold;
    color: black;
    border: 0.25rem solid black;
    float: right;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    border-radius: 0.75rem;
    -webkit-mask-image: url('/images/stampmask.png');
    -webkit-mask-size: 150px 50px;
    mix-blend-mode: multiply;
}

.Demonstration, .Demonstration > a {
    color: rgb(96,96,96);
    border-color: rgb(96,96,96);
    font-size: 1rem;
}

.Promo, .Promo > a {
    color: rgb(42,56,205);
    border-color: rgb(42,56,205);
}

.Fixed, .Fixed > a {
    color: rgb(111,126,139);
    border-color: rgb(111,126,139);
}

.Common, .Common > a {
    color: rgb(27,89,55);
    border-color: rgb(27,89,55);
}

.Uncommon, .Uncommon > a {
    color: rgb(199,191,21);
    border-color: rgb(199,191,21);
}

.Rare, .Rare > a {
    color: rgb(164,48,50);
    border-color: rgb(164,48,50);
}

.Ultra-Rare, .Ultra-Rare > a {
    color: rgb(135,30,65);
    border-color: rgb(135,30,65);
}

.card-image {
    width: 400px;
    height: 574px;
    margin: 2em;
    border: solid black 21px;
    border-radius: 21px;
    transform: rotate(-3deg);
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
}

.small-card {
    border: solid black 13px;
    border-radius: 13px;
    width: 250px;
    height: 358px;
}

.property-name {
    font-weight: bold;
}

.linkimage {
    float: left;
    border: solid 1px #AAAAAA;
    border-radius: 40px;
    height: 80px;
    width: 80px;
    margin: 12px 12px 150px 0px;
}

#header {
    border-bottom: solid black 0px;
    background-color: #111111;
    padding-top: 1em;
    padding-left: 0.25em;
    padding-bottom: 0.25em;
}

.nav-tab {
    background-color: rgb(31, 97, 117);
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    z-index: 1;
    text-transform: uppercase;
    margin-left: 0.75em;
}

.selected.nav-tab {
    background-color: rgb(47, 113, 133);
}

    .selected.nav-tab::before {
        background-color: rgb(47, 113, 133);
    }

    .selected.nav-tab::after {
        background-color: rgb(47, 113, 133);
    }

.nav-tab::before {
    background-color: rgb(31, 97, 117);
    content: '';
    display: inline-block;
    position: relative;
    width: 0.5em;
    height: 1.5em;
    top: 0.5em;
    left: -0.5em;
    transform-origin: 0 0;
    z-index: 10;
    -webkit-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

.nav-tab::after {
    background-color: rgb(31, 97, 117);
    content: '';
    display: inline-block;
    position: relative;
    width: 0.5em;
    height: 1.5em;
    top: 0.5em;
    left: 0.5em;
    transform-origin: 0 0;
    z-index: 10;
    -webkit-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    transform: skewX(15deg);
}

.nav-tab-label {
    color: #DDDDDD;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

    .nav-tab-label a {
        color: #DDDDDD;
        text-decoration: none;
    }

        .nav-tab-label a:visited {
            color: #DDDDDD;
            text-decoration: none;
        }

.xFilesCcg {
    background-color: rgb(199,191,21);
}

    .xFilesCcg a, .xFilesCcg a:visited {
        color: #111111;
    }

.rules a, .rules a:visited {
    color: #111111;
}

.rules {
    background-color: rgb(129,161,182);
}

.cards {
    background-color: rgb(27,89,55);
}

.decks {
    background-color: rgb(175,42,86);
}

.distribution {
    background-color: rgb(74,71,126);
}

.about {
    background-color: rgb(164,48,50);
}

.magazines {
    background-color: rgb(155,9,79);
}

.links {
    background-color: rgb(164,48,50);
}

.rulespage {
    width: 410px;
    height: 577px;
    margin-left: 0;
    margin-right: 0;
}

.rulebook {
    width: 410px;
    height: 577px;
    margin: 2em;
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
}

.rulesnav {
    width: 2em;
    height: 2em;
    margin: 1em;
}

.magazine-page {
    margin: 2em;
    border: solid 1px rgb(0,0,0,0.5);
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
}

.magazineContainer {
    padding-left: 4em;
    padding-right: 4em;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
}

.magazine-indexcard {
    text-align: center;
}


.magazine-indexcard .indexcard-title {
    margin-top: 0;
}

.magazineContainer .cardlist {
    width: 50em;
    min-height: 56em;
    margin: 2em auto;
}

.magazine-contents {
    border: 0px;
    border-collapse: collapse;
    width: 100%;
    margin-top: 1.1em;
}

.magazine-contents tr {
    height: 1em;
}

.magazine-contents td {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 1em;
    width: 50%;
    vertical-align: top;
}

.magazine-contents td:first-child {
    text-align: right;
}

.magazinelistimages {
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
}

.magazinelistimages3 {
    max-width: 1100px;
}

.magazine-image {
    width: 250px;
    margin: 2em;
    border: solid 1px rgb(0,0,0,0.5);
    transform: rotate(-3deg);
    box-shadow: -5px -5px 5px rgb(0,0,0,0.5);
}

.cardnav {
    position: fixed;
    height: 2em;
    width: 2em;
    top: calc(50% - 1em);
}

.cardnav-left {
    left: 4em;
}

.cardnav-right {
    right: 4em;
}

.rotate0 {
    transform: rotate(0deg);
}

.rotate1 {
    transform: rotate(1deg);
}

.rotate2 {
    transform: rotate(2deg);
}

.rotate3 {
    transform: rotate(3deg);
}

.rotate4 {
    transform: rotate(4deg);
}

.rotate5 {
    transform: rotate(5deg);
}

.rotate6 {
    transform: rotate(6deg);
}

.rotaten1 {
    transform: rotate(-1deg);
}

.rotaten2 {
    transform: rotate(-2deg);
}

.rotaten3 {
    transform: rotate(-3deg);
}

.rotaten4 {
    transform: rotate(-4deg);
}

.rotaten5 {
    transform: rotate(-5deg);
}

.rotaten6 {
    transform: rotate(-6deg);
}