h1 {
    font-family: var(--titleFont);
    font-size: var(--titleSize);
    line-height: 1em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: normal;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

h2 {
    font-family: var(--titleFont);
    color: var(--pageBgColor);
    font-size: 70px;
    font-weight: normal;
    line-height: 60px;
    padding: 0;
    margin: 20px 0px 0px 0px;
    text-transform: uppercase;
}

h2 .text {
    position: relative;
    top: -8px;
    font-size: 40px;
    line-height: 40px;
    margin: 0;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
}

p.num {
    padding-left: 30px;
    counter-increment: item;
    margin-left: 0;
}

p.num:before {
    content: counter(item);
    color: var(--pageBgColor);
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--mainColor);
    padding: 0;
    margin-left: -30px;
    margin-right: 5px;
    border-color: var(--mainColor);
    border-width: var(--border);
    border-style: solid;
    border-radius: 4px;
    width: 20px;
    text-align: center;
    display: inline-block;
}

p.legend {
    text-align: center;
    font-size: smaller;
    line-height: normal;
}

bx {
    color: var(--pageBgColor);
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--mainColor);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
    border-color: var(--mainColor);
    border-width: var(--border);
    border-style: solid;
    border-radius: 0.5vh;
}

img {
    max-width: 500px;
    align-content: center;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.floatLeft {
    float: left;
    margin-right: 20px;
}

.floatRight {
    float: right;
    margin-left: 20px;
}

.outlined {
    background-color: rgba(var(--transWhite), 0.5);
    border-color: var(--mainColor);
    border-radius: var(--radius);
    border-width: var(--border);
    border-style: solid;
}

.gameIcon {
    color: var(--pageBgColor);
    background-image: url('../images/gameIcons.png');
    background-size: 1000% 400%;
}

.gameIcon.entrance { background-position: 0% 0%; }
.gameIcon.bathroom { background-position: -100% 0%; }
.gameIcon.homeOffice { background-position: -200% 0%; }
.gameIcon.livingRoom { background-position: -300% 0%; }
.gameIcon.masterBedroom { background-position: -400% 0%; }
.gameIcon.kidsBedroom { background-position: -500% 0%; }
.gameIcon.diningRoom { background-position: -600% 0%; }
.gameIcon.kitchen { background-position: -700% 0%; }
.gameIcon.guestBedroom { background-position: -800% 0%; }
.gameIcon.anywhere { background-position: -900% 0%; }

.gameIcon.blank { background-position: var(--blankIconPos); }
.gameIcon.unknown { background-position: var(--unknownIconPos); }

.gameIcon.mom { background-position: 0% -100%; }
.gameIcon.dad { background-position: -100% -100%; }
.gameIcon.teen { background-position: -200% -100%; }
.gameIcon.kid { background-position: -300% -100%; }
.gameIcon.maid { background-position: -400% -100%; }
.gameIcon.grandma { background-position: -500% -100%; }
.gameIcon.boyfriend { background-position: -600% -100%; }
.gameIcon.officer { background-position: -700% -100%; }
.gameIcon.burglar { background-position: -800% -100%; }
.gameIcon.santa { background-position: -900% -100%; }
.gameIcon.ghost { background-position: 0% -200%; }

.gameIcon.light { background-position: -100% -200%; }
.gameIcon.fire { background-position: -200% -200%; }
.gameIcon.swapCard { background-position: -300% -200%; }
.gameIcon.swapHand { background-position: -400% -200%; }
.gameIcon.star { background-position: -500% -200%; }
.gameIcon.action { background-position: -600% -200%; }
.gameIcon.exit { background-position: -700% -200%; }
.gameIcon.uturn { background-position: -800% -200%; }
.gameIcon.window { background-position: -900% -200%; }

.actionCard {
    width: var(--width);
    height: calc(var(--width)*1.3888);
    background-image: url('../images/actionCards.png');
    background-size: 400% 300%;
}

.actionCard.back { background-position: 0% 0%; }
.actionCard.falseAlarm { background-position: -100% 0%; }
.actionCard.escape { background-position: -200% 0%; }
.actionCard.lighsOut { background-position: -300% 0%; }
.actionCard.skipATurn { background-position: 0% -100%; }
.actionCard.swapHands { background-position: -100% -100%; }
.actionCard.hideout { background-position: -200% -100%; }
.actionCard.keepMoving { background-position: -300% -100%; }
.actionCard.shuffleUp { background-position: 0% -200%; }
.actionCard.earthquake { background-position: -100% -200%; }
.actionCard.allOnFire { background-position: -200% -200%; }
.actionCard.swapIdentities { background-position: -300% -200%; }

table.alignTop * {
    vertical-align: top;
}

.td {
    word-wrap: normal;
}