Common.css: Difference between revisions

Latest revision as of 23:23, 12 November 2024

/* The CSS added here will affect both desktop and mobile users. Before finishing, please ensure that the style works well on all devices.

This CSS page contains formatting for in-article elements like tables and images. If you're looking for formatting for the whole site, check https://grousehouse.wiki/MediaWiki:Foreground.css!

Table of Contents (you can search the page for these titles to jump straight there):
• Article warnings
    • Crowdsource warning
• Basic text tables and lists
    • Basic list
    • Basic list with inside borders
    • List with multiple items on each row
    • List with alternating color rows
    • Information table with alternating color rows
• Images and image grids
    • Large image grid
    • Small item grid
    • Image grid with alternating color cells
• Universal tables and tools
    • Explore encounter table
    • Crafting recipe table
    • Achievements box
    • Individual applicator preview boxes
    • NPC profile box
    • Spoiler button
    • Grouse tips
    • Storyline elements
    • Battle enemy tables
• Shop content
    • Shopkeeper table
    • Shop content boxes
• Lunar event-specific tables
    • Monthly lunar applicator tables
• Matchmaker event-specific tables
    • Dateable list box (not currently in use - intended for lists about who each gender is able to date)
    • Dateable profile box
• Fayre event-specific tables
    • Crop detail tables
• Decor preview modal
• Befriending tables
• Color scales
*/

/* Article warnings */

/* Crowdsourcing warning {{Crowdsourcing}} */

.crowdsource-warning {
    background-color: #d4d4d4;
    width: 90%;
    margin: auto;
    border: 1px solid gray;
    border-radius: 20px;
}

.warningtitle {
    text-align: center;
    background-color: #b0b0b0;
    border-radius: 20px 20px 0 0;
    padding: 10px;
    font-weight: bold;
}

.warning-body {
    padding: 10px;
}

/* Basic text tables and lists */

/* Basic list */

table.TB-basic-list {
    width: 100%;
    background-color: #c3c3c3;
    border: 1px solid black;
    border-collapse: collapse;
}

table.TB-basic-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-basic-list tr {
    border-top: 1px solid black;
}

table.TB-basic-list td {
    padding: 5px;
}

/* Basic list with inside borders */

table.TB-bordered-list {
    width: 40%;
    background-color: #c3c3c3;
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
}

table.TB-bordered-list th {
    background-color: black;
    color: white;
    padding: 5px;
}

table.TB-bordered-list td {
    padding: 5px;
    border: 1px solid black;
}

/* List with multiple items on each row */

table.rowlist {
    background-color: #d4d4d4;
    width: 100%;
}

table.rowlist th {
    background-color: #acacac;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

tr.rowlistsubheader {
    text-align: center;
    background-color: #c4c4c4 !important;
    font-weight: bold;
}

td.rowlistitems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.rowlistitem {
    margin-left: 1em;
    background-color: #c4c4c4;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* List with alternating color rows */

table.altlist {
    width: 60%;
    margin: auto;
    border: 1px solid gray;
}

.altlist tr:nth-of-type(odd) {
    background-color: #c6c6c6;
}

.altlist tr:nth-of-type(even) {
    background-color: #d4d4d4;
}

table.altlist td {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Information table with alternating color rows */

.infotable {
border: 1px solid black;
}

.infotable td {
padding: 5px;
}

.infotable td.infoheader {
background-color: black;
color: white;
}

.infotable tr:nth-of-type(even){
background-color: #f5f5f5;
}

.infotable tr:nth-of-type(odd){
background-color: #fff;
}

/*  Images and image grids */

/* Large image grid */

.imagegrid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gridimage {
    padding: 10px;
}

.gridimage img {
    height: 150px;
    width: auto;
    border-radius: 10px;
    border: 1px solid black;
}

/* Small item grid {{ItemGrid}} {{ItemGridItem}} */

div.itemgrid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    margin-right: auto;
}

@media only screen and (max-width: 40rem) {

div.griditem {
    width: 10em !important;
}

}

div.griditem {
    background: #d4d4d4;
    margin-right: 15px;
    border: 1px solid gray;
    border-radius: 10px;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 15em;
}

div.griditem.decoritem {
    background: #d4d4d4;
    margin-right: 10px;
    border: 1px solid gray;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 10em;
border-radius: 0;
}

div.griditem.decoritem div.item-name {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: 4em;
  font-size: 11px;
  width: 13em;
  display: table-cell;
  vertical-align: middle;
}

div.griditem.decoritem div.item-image {
background: white;
}

div.item-image {
    padding: 10px;
    width: auto;
cursor: pointer;
}

div.item-image img {
    max-width: 20vw;
    height: auto;
    width: auto;
}

/* Image grid with alternating color cells */

.altimagegrid {
border: none;
text-align: center;
}

.altimagegrid td {
padding: 5px;
border: 1px solid black;
}

.altimage1 {
background-color: #f5f5f5;
}

.altimage2 {
background-color: #fff;
}

/* Universal tables and tools */

/* Table Type A */

@media only screen and (max-width: 40rem) {
.tableA {
width: 100% !important;
font-size: 10px;
}
}

.tableA th {
padding: 10px;
font-weight: bold;
background: #648a9b;
color: white;
text-align: left;
}

.tableA td {
padding: 10px;
text-align: center;
}

.tableA tr {
border-bottom: 1px solid black;
}

.tableA tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableA tr:nth-of-type(even) {
    background-color: #fff;
}

.tableA tr:first-of-type th {
background: #3a5f70 !important;
text-align: center;
}

/* Table Type B */

@media only screen and (max-width: 40rem) {
.tableB {
width: 100% !important;
font-size: 10px;
}

.tableB li {
font-size: 10px;
}
}

.tableB {
text-align: center;
}

.tableB tr {
border-bottom: 1px solid black;
}

.tableB td {
padding: 10px;
}

.tableB th {
background:#3a5f70;
color: white;
text-align: center;
padding: 10px;
}

.tableB tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableB tr:nth-of-type(even) {
    background-color: #fff;
}

/* Table Type C */

@media only screen and (max-width: 40rem) {
.tableC {
width: 100% !important;
font-size: 10px;
}
}

.tableC td {
padding: 10px;
text-align: center;
}

.tableC tr {
border-bottom: 1px solid black;
}

.tableC tr:nth-of-type(even) td:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableC tr:nth-of-type(even) td:nth-of-type(even) {
    background-color: #fff;
}

.tableC tr:nth-of-type(odd) td:nth-of-type(odd) {
    background-color: #fff;
}

.tableC tr:nth-of-type(odd) td:nth-of-type(even) {
    background-color: #f4f4f4;
}

.tableC th {
background:#3a5f70;
color: white;
text-align: center;
padding: 10px;
}

.tableC th.subheaderC {
background:#648a9b;
color: white;
text-align: center;
padding: 10px;
}

/* Table Type D */

@media only screen and (max-width: 40rem) {
.tableD {
width: 100% !important;
font-size: 10px;
}
}

.tableD th {
padding: 10px;
font-weight: bold;
background: #d5d5d5;
color: black;
text-align: center;
}

.tableD td {
padding: 10px;
text-align: center;
}

.tableD tr {
border-bottom: 1px solid black;
}

.tableD tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.tableD tr:nth-of-type(even) {
    background-color: #fff;
}

.tableD tr:first-of-type th {
background: #3a5f70 !important;
text-align: center;
color: white;
}

/* Flex box table */

@media only screen and (max-width: 40rem) {
.flexTable {
width: 100% !important;
font-size: 10px;
}
}

.flexTable th {
padding: 10px;
font-weight: bold;
background: #3a5f70;
color: white;
text-align: center;
}

.flexTable td {
padding: 10px;
text-align: center;
}

.flexTable tr {
border-bottom: 1px solid black;
}

.flexSubheader {
padding: 10px;
font-weight: bold;
color: black;
text-align: center;
}

.flexGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.baseHeadshot {
  width: 150px;
  border: 1px solid black;
  margin: 0.5em;
}

.baseImage {
  margin-bottom: -1.2em !important;
}

.baseName {
  background-color: #d5d5d5;
  padding: 5px;
  font-weight: bold;
}

.baseObtention {
  position: relative;
  top: -0.5em;
  right: -7em;
  background: #fff;
  width: 75px !important;
  border-radius: 5px;
  border: 1px solid black;
  font-size: 10px;
}

/* Explore encounter table */

@media only screen and (max-width: 40rem) { 
table.explore_encounter {
    width: 100% !important;
}
}

table.explore_encounter {
    width: 90%;
    margin: auto;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
}

table.explore_encounter td {
    padding: 10px;
    border: 1px solid black;
}

tr.encounter_options td:first-of-type {
    background-color: #b4b4b4;
}

tr.encounter_options td {
    background-color: #d1d1d1;
}

button.b_encountertime {
    background: none;
    padding: 5px;
}

/* Crafting recipe table {{CraftingRecipe}} */

table.crafting-recipe {
    width: 60%;
    margin: auto;
    background-color: #b0b0b0;
    border: 1px solid black;
    border-collapse: collapse;
}

tr.recipe-name td {
    padding: 10px;
}

td.recipe-thumb {
    background-color: #d4d4d4;
    text-align: center;
    width: 20%;
    padding: 10px;
}

td.recipe-ingredients {
    background: #d4d4d4;
    padding: 10px;
}

td.recipe-ingredients img {
    width: 40px;
    height: auto;
    padding: 5px;
}

td.recipe-obtention {
    text-align: center;
    padding: 10px;
}

td.recipe-preview {
    text-align: center;
    background-color: #d4d4d4;
}

/* Achievement box */

table.achievement {
    background-color: #d4d4d4;
    width: 400px;
    border: 1px solid black;
    border-collapse: collapse;
    margin: 0.5em;
height: 200px;
}

@media only screen and (max-width: 40em) {
table.achievement {
    background-color: #d4d4d4;
    width: 100%;
}
}

.achievement_icon {
    background-color: #b7b7b7;
    padding: 10px;
    font-weight: bold;
}

tr.achievement-text td {
    padding: 10px;
}

.achievementName {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
}

/* Individual applicator preview boxes */

table.applicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.applicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

td#app_name {
    background: #9e9e9e;
}

td#app_genetics {
    background: #bcbcbc;
}

td#app_obtention {
    background: #bcbcbc;
}

td#markingapp_preview img {
    width: 100%;
    height: auto;
}

table.markingapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.markingapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

table.clawleathersapplicatorpreview td {
    border: 1px solid black;
    padding: 10px;
}

table.clawleathersapplicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

table.applicatorpreview td#app_preview img {
    width: 100%;
    height: auto;
}

td#app_explorepreview {
    border-top: none;
}

/* NPC Profile Box */

table.npc {
background-color: #d4d4d4;
  border-collapse: collapse;
  width: 75%;
  margin: auto;
}

table.npc p {
  font-size: 14px;
}

@media only screen and (max-width: 40em) {
table.npc {
width: 100%;
}

table.npc p {
font-size: 12px;
}

.npc-bio div {
  height: 150px !important;
  overflow-y: auto;
}

.npc-gallery div {
  height: 150px !important;
  overflow-y: auto;
}
}

td.npc-name {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  border-right: none !important;
  width: 40%;
  color: white;
text-align: center;
}

td.npc-image {
text-align: center;
  padding: 10px;
  border-bottom: none !important;
  background: #b7b7b7;
width: 40%;
}

tr.npc-pronouns td {
    text-align: center;
    padding: 5px;
font-style: italic;
border-top: none !important;
background: #919191;
width: 20%;
}

.npc-bio div {
  height: 350px;
  overflow-y: auto;
}

td.npc-bio {
padding: 10px;
}

.npc-imagegallery {
  border-top: 5px solid #3a5f70;
}

.npc-gallery {
  background: #dfdfdf;
}

.npc-gallery div {
  text-align: center;
  height: 300px;
  overflow-y: auto;
}

.npc-gallery div img {
  margin: 0.5em;
}

/* Spoiler button */

.spoilerButton p {
    background-color: #acacac;
    width: 40%;
    margin: 5px auto;
    padding: 10px;
    border-radius: 10px;
}

.spoilerButton p:hover {
    background-color: #929292;
cursor: pointer;
}

.spoilerContent {
    padding: 10px;
}

/* Grouse Tips */

table.grousetip {
    width: 100%;
    background: #f0f0f0;
    border: 1px solid gray;
    border-collapse: collapse;
}

table.grousetip td {
    padding: 10px;
}

td.grousetipheader {
    background-color: #c7c7c7;
}

td.grousetipimage {
    width: 30%;
    vertical-align: top;
}

/* Storyline Elements */

/* Page Boxes */

.storylinel {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
margin-bottom: 0px;
}

.storyliner {
    width: 100%;
    background: #d4d4d4;
    display: inline-block;
margin-bottom: 0px;
}

.storylinel span[typeof="mw:File"] {
    float: left;
    margin-right: 1.5em;
}

.storyliner span[typeof="mw:File"] {
    float: right;
    margin-left: 1.5em;
}

.storylinel .text {
    padding: 2em;
}

.storyliner .text {
    padding: 2em;
}

@media only screen and (max-width: 56.25rem) {

.storylinel span[typeof="mw:File"] {
width: 50%;
}

.storyliner span[typeof="mw:File"] {
width: 50%;
}

.storylinel .text {
    font-size: 10px;
}

.storyliner .text {
    font-size: 10px;
}

.storylinel .text p {
    font-size: 10px;
}

.storyliner .text p {
    font-size: 10px;
}

.storybluebutton {
font-size: 10px;
}

.storygreenbutton {
font-size: 10px;
}
}

/* Storyline Buttons */

.storybluebutton {
background:#057cb3;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

.storygreenbutton {
background:#78a64b;
padding: 0.5em;
    color: #fff;
    width: auto;
    text-align: center;
font-weight: bold;
    margin-right: 1em;
margin-top: 1em;
}

/* Battle enemy tables */

table.enemy {
    background-color: #d4d4d4;
    border: 1px solid gray;
}

table.enemy td.enemyname {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid gray;
}

table.enemy td.enemyimage {
    text-align: center;
    width: 60%;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background: white;
}

table.enemy.lunarenemy img[src*="night"] {
    margin-bottom: 1em;
}

table.enemy td.icons {
    background: #3a5f70;
    color: white;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid gray;
    text-align: right;
}

table.enemy td.icons img {
    max-height: 2em;
    margin-left: 0.5em;
}

table.enemy td.icons img.openimage {
cursor: pointer;
}

table.enemy td.icons img.opponenttype {
cursor: help;
}

table.enemy td.enemylevels {
    border-bottom: 1px solid gray;
    height: 3vh;
    padding-left: 10px;
    font-weight: bold;
    background: #a1a1a1;
    text-align: center;
}

table.enemy td.enemymodifiers {
    height: 15vh;
    border-bottom: 1px solid gray;
}

table.enemy div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

table.enemy div.modifier {
    margin: 10px;
    background: darkgray;
    width: 75px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid gray;
    height: 75px;
    padding-top: 10px;
}

table.enemy div.modifier.modifiernone {
    font-size: 0.8em;
    line-height: 2.8em;
}

table.enemy div.modifier img {
    height: 50%;
    width: auto;
}

table.enemy td.enemymoves {
    border-bottom: 1px solid gray;
    padding-left: 10px;
    height: 15vh;
    vertical-align: top;
    padding-top: 10px;
}

table.enemy td.enemybiomes {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

table.enemy td.enemybiomes div.biome {
    width: 8rem;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
    border: 1px solid gray;
}

table.enemy td.enemybiomes div.biome.grasslands  {
background: url(https://grousehouse.wiki/images/0/03/Explore_grasslands_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.deciduous  {
background: url(https://grousehouse.wiki/images/9/94/Explore_deciduous_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.mountains  {
background: url(https://grousehouse.wiki/images/b/b4/Explore_mountains_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.riparian  {
background: url(https://grousehouse.wiki/images/2/28/Explore_riparian_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.prairie  {
background: url(https://grousehouse.wiki/images/e/e5/Explore_prairie_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.coniferous  {
background: url(https://grousehouse.wiki/images/b/ba/Explore_coniferous_summer_day.png);
background-position: center;
  background-size: 250%;
font-size: 0.8rem;
line-height: 1.4rem;
}

table.enemy td.enemybiomes div.biome.taiga  {
background: url(https://grousehouse.wiki/images/3/3e/Explore_taiga_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.desert  {
background: url(https://grousehouse.wiki/images/b/b1/Explore_desert_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.swamp  {
background: url(https://grousehouse.wiki/images/f/f8/Explore_swamp_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.tundra  {
background: url(https://grousehouse.wiki/images/8/8f/Explore_tundra_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.glacier  {
background: url(https://grousehouse.wiki/images/a/ac/Explore_glacier_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemybiomes div.biome.rainforest  {
background: url(https://grousehouse.wiki/images/0/0c/Explore_rainforest_summer_day.png);
background-position: center;
  background-size: 250%;
}

table.enemy td.enemystats {
    border-bottom: 1px solid gray;
}

table.enemy td.enemystats div.stat {
    width: 8rem;
    text-align: center;
    border-radius: 10px;
    margin: 0.5em;
}

table.enemy td.enemystats div.stat.strength {
    color: #682323;
    background-color: #ca8282;
    border: 2px solid #682323;
}

table.enemy td.enemystats div.stat.speed {
    color: #513f71;
    background-color: #9582b5;
    border: 2px solid #513f71;
}

table.enemy td.enemystats div.stat.agility {
    color: #625e2b;
    background-color: #c6bc5f;
    border: 2px solid #625e2b;
}

table.enemy td.enemystats div.stat.wisdom {
    color: #235554;
    background-color: #63b3b0;
    border: 2px solid #235554;
}

table.enemy td.enemystats div.stat.smarts {
    color: #255924;
    background-color: #65b363;
    border: 2px solid #255924;
}

table.enemydrops {
    background-color: #d4d4d4;
    border: 1px solid gray;
    border-top: 1px solid gray;
    margin-top: -1.4em;
word-break: normal;
}

table.enemydrops div.tableflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

table.enemydrops td.trophies {
    padding: 10px;
    border-bottom: 1px solid gray;
}

table.enemydrops div.trophy {
    margin: 0.5em;
    width: 10%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

table.enemydrops td.recipeheader {
    width: 11%;
}

table.enemydrops td.recipeheader div.recipe {
    width: 100%;
    background: none !important;
}

table.enemydrops td.recipes {
    padding: 10px;
}

table.enemydrops div.recipe {
    margin: 0.5em;
    width: 11.5%;
    text-align: center;
    background: #b4b4b4;
    padding: 0.5em;
    border-radius: 10px;
    min-width: 6em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.show {display:block;}

table.enemy div.modifier.modifiervenom {
    font-size: 0.7em;
    line-height: 2.6em;
}

.faction {
  padding: 5px;
  border-bottom: 1px solid black;
  font-weight: bold;
}

.faction.merged {
  background: #cd574d;
}

.faction.kinfolk {
  background: #7ea549;
}

.faction.independent {
  background: #eeaf4b;
}

table.enemy.cryptid td.enemybiomes {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

table.enemy.cryptid td.enemystats {
    border-bottom: 1px solid gray;
}

.itemgrid.cryptidThumbnails div {
  background: #d7d7d7;
  margin: 0.5em;
  padding: 10px;
}

.cryptidThumbnails .cryptidBiomeKinfolk img {
  border-bottom: 10px solid #7ea549 !important;
}

.cryptidThumbnails .cryptidBiomeIndependent img {
  border-bottom: 10px solid #eeaf4b !important;
}

.cryptidThumbnails .cryptidBiomeMerged img {
  border-bottom: 10px solid #cd574d !important;
}

/* Battle Enemy Mobile Formatting */

@media only screen and (max-width: 40em) {

table.enemy {
    width: 100%;
    font-size: 0.7em;
}

select.variantDropdown {
    width: 90%;
}

table.enemy div.modifier {
    margin: 5px;
    background: darkgray;
    width: 15vw;
    text-align: center;
    border-radius: 5px;
    border: 2px solid #6c6c6c;
    height: 15vw;
    padding-top: 10px;
    font-size: 0.7em;
}

table.enemy div.modifier.modifiernone {
    font-size: 0.6em;
    line-height: 2.5em;
}

table.enemy div.modifier.modifiervenom {
    font-size: 0.5em;
    line-height: 2.5em;
}

table.enemy td.enemymoves p {
    font-size: 1em;
}

table.enemy td.enemybiomes {
    padding: 10px;
}

table.enemy td.enemybiomes div.biome {
    width: 23vw;
    font-size: 0.8em;
    margin: 0.2em;
}

table.enemy td.enemystats div.stat {
    width: 16vw;
    font-size: 0.8em;
    margin: 0.2em;
}

table.enemy td.enemystats {
  border-bottom: 2px solid #6c6c6c;
  height: 110px;
}

table.enemydrops div.trophy {
    margin: 0.2em;
    width: 15vw;
    min-width: 15vw;
    font-size: 0.7em;
}

table.enemydrops td.recipeheader {
    display: none;
}

table.enemydrops div.recipe {
    margin: 0.2em;
    width: 15vw;
    min-width: 15vw;
    font-size: 0.7em;
}

table.enemydrops td.recipes {
    border-right: 2px solid #6c6c6c;
}

table.enemy td.enemybiomes div.biome.deciduous {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

table.enemy td.enemybiomes div.biome.riparian {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

table.enemy td.enemybiomes div.biome.coniferous {
  font-size: 0.6rem;
  line-height: 1.1rem;
}

}

/* Shop content */

/* Shopkeeper table */

table.shopkeeper {
    border-collapse: collapse;
    margin: auto;
    background-color: #dedede;
    border: 1px solid black;
}

table.shopkeeper td {
    padding: 10px;
}

td.shopkeepername {
    width: 50%;
}

td.shopkeeperimage {
    text-align: center;
}

td.shopkeeperimage img {
    width: 100%;
}

.shopkeeper .gridimage img {
border: none;
}

/* Shop content boxes {{ShopContent}} {{_ShopItem}} */ 

div.shopcontent {
    display: flex;
    flex-direction: row;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

div.shop-title {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  height: 4em;
  font-size: 11px;
  width: 13em;
  display: table-cell;
  vertical-align: middle;
}

div.shop-item {
    background: #d4d4d4;
    margin-right: 10px;
    border: 1px solid gray;
    margin-bottom: 15px;
    text-wrap: wrap;
    width: 10em;
}

div.shop-item span a img {
    height: auto;
}

div.shop-item span a img[src*="preview"] {
}

div.shop-item i {
    font-size: 10px;
}

div.shop-text {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
font-size: 13px;
margin-top: 0.5em;
}

.shop-subtext {
  font-style: italic;
  text-align: center;
  margin-top: -0.5em;
  font-size: 13px;
padding: 0.5em;
}

.shop-text img {
  margin-right: 0.5em;

}

div.shop-cost {
    display: flex;
    padding: 10px;
    margin: 0 auto;
    height: 3em;
    justify-content: center;
    align-items: center;
}

div.shop-image {
    padding: 10px;
    background: white;
}

div.shop-preview {
    border-radius: 0 0 10px 10px;
    background: white;
    padding: 10px;
}

@media only screen and (max-width: 50.01em) {

div.shop-item {
    width: 7em !important;
}

div.shop-text {
font-size: 8px;
}

div.shop-title {
font-size: 8px;
}

.shop-subtext {
font-size: 8px;
}

.shop-image img {
  width: 70px;
}

.shop-text img {
  width: 15px;
}

}

/* Lunar event-specific tables */

/* Monthly lunar applicator table */

table.lunar_applicators {
    background-color: #dedede;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
}

table.lunar_applicators td {
    border: 1px solid black;
    padding: 10px;
}

table.lunar_applicators tr td span a img[src*="lunarapps" i] {
    width: auto;
    max-width: 60vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="base" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="markings" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="eyes" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="claw" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="skin" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

table.lunar_applicators tr td span a img[src*="nose" i] {
    width: auto;
    max-width: 8vw;
    height: auto;
}

/* Matchmaker event-specific tables */

/* Dateable list box */

.dateable1 {
    width: 50%;
    margin: auto;
    text-align: center;
    background: #d4d4d4;
    border-radius: 10px;
    border: 1px solid black;
}

.dateable1_title {
    background-color: #868686;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.dateable1 div.spoilerContent div div {
    display: block;
    width: 13em;
    height: auto;
}

.dateable1 .dateablelistflex {
display:flex;
flex-direction:row;
flex-wrap:wrap;
text-align:center;
font-weight:bold;
justify-content:center;
}

/* Dateable profile box */

table.dateablewolf {
    background-color: #d4d4d4;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
}

@media only screen and (max-width: 40em) {

table.dateablewolf {
    font-size: 0.7em;
}

}

table.dateablewolf .spoilerButton {
text-align: center;
}

table.dateablewolf td {
    border: 1px solid gray;
}

td.wolf-name {
    background-color: #9b9b9b;
    padding: 10px;
    font-weight: bold;
}

td.wolf-image {
    width: 33%;
border-right: none !important;
text-align:center;
}

td.wolf-intro {
    border-left: none !important;
}

td.wolf-image img {
    max-width: 25vw;
    height: auto;
}

td.wolf-requirements {
    padding: 5px;
}

td.trait-header {
    background-color: #9b9b9b;
    padding: 5px;
    font-weight: bold;
width: 33%;
}

td.trait-image {
    width: 7.5%;
text-align:center;
border-right: none !important;
}

td.trait {
    padding-left: 10px;
border-left: none !important;
}

.wolf-gallery img {
    width: 20%;
}

td.wolf-decor {
    text-align: center;
}

.dateable_spoiler {
    background: #d4d4d4;
    width: 100%;
    margin: auto;
    font-size: 14px;
    padding: 1px;
    border: 1px solid gray;
    border-top: none;
}

.dateable_spoiler .spoilerButton {
text-align: center;
}

.dateable_spoiler .spoilerContent {
padding: 0px;
}

table.dateable_flavortext {
    width: 100%;
}

table.dateable_flavortext td {
    padding: 5px;
}

tr.flavortext_title {
    background-color: #9b9b9b;
}

/* Fayre event-specific tables */
/* Crop detail tables */

.fayreCrop {
width: 100%;
}

.fayreCrop tr {
border-bottom: 1px solid black;
}

.cropHeader {
  background: #3a5f70;
  color: white;
}

.cropName {
  padding: 10px;
  font-weight: bold;
}

.cropStats {
  width: 20%;
  vertical-align: top;
  padding: 10px;
  background: #ebebeb;
}

.cropStat {
margin-bottom: 1em;
}

.cropVariantName {
  background: #648a9b;
  color: white;
  padding: 10px;
  font-weight: bold;
  width: 50%;
}

.cropVariantStats {
  width: 20%;
  padding: 10px;
}

.cropVariantStats div {
  margin-bottom: 0.5em;
}

.cropVariantImages div {
  margin-bottom: 0.5em;
}

.fayreCrop .imagegrid img {
   height: 100px;
   border: none;
}

.fayreCropMobile {
width: 100%;
}

.fayreCropMobile tr {
border-bottom: 1px solid black;
}

.fayreCropMobile .imagegrid img {
   height: 100px;
   border: none;
}

@media only screen and (max-width: 40rem) {
.fayreCrop {
display: none;
}

.desktopTables p {
display: none;
}
}

@media only screen and (min-width: 40.01rem) {
.fayreCropMobile {
display: none;
}

.mobileTables p {
display: none;
}
}



/* Illness table */

.illnessTable td {
border: 1px solid gray;
padding: 5px;
}

/* Befriending tables */

.befriendTable td {
border: 1px solid black;
padding: 5px;
}

.befriendHeader {
background-color: #3a5f70;
color: white;
font-weight: bold;
}

.befriendMove {
background-color: #3a5f70;
color: white;
font-weight: bold;
}

.befriendPositive {
background-color: #d9ead3;
}

.befriendNegative {
background-color: #f4cccc;
}

.befriendPositive2 {
background-color: #93c47d;
}

.befriendNegative2 {
background-color: #e06666;
}

@media only screen and (max-width: 40rem) {
.befriendTable {
font-size: 10px;
}
}

/* Color Scales */

.scaleA0 {
background-color: #e67c73;
}

.scaleA25 {
background-color: #f3a96c;
}

.scaleA50 {
background-color: #ffd666;
}

.scaleA75 {
background-color: #abc878;
}

.scaleA100 {
background-color: #57bb8a;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Marking Tables */

.markingBody {
    background: white;
    width: 250px;
    margin: 0.5em;
    border: 1px solid gray;
}

.markingName {
text-align: center;
  background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
}

.markingSource {
    text-align: center;
    background-color: #c4c4c4;
    padding: 10px;
}

.markingPreview {
    padding: 10px;
}

@media only screen and (max-width: 40em) {

.markingName {
    font-size: 12px;
}

.markingSource {
    font-size: 12px;
}

}

@media only screen and (max-width: 50em) {

.markingBody {
    background: white;
    width: 100%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.markingBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 65.626em) {

.markingBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 101.25em) {

.markingBody {
    background: white;
    width: 23%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Base Tables */

.baseBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

.baseBody .baseName {
text-align: center;
  background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
}

.baseGenetics {
text-align: center;
  background-color: #d4d4d4;
  padding: 10px;
}

.basePreview {
padding: 20px;
  margin-top: 1em;
}

@media only screen and (max-width: 50em) {

.baseBody {
    background: white;
    width: 100%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.baseBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 75.01em) {

.baseBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Biome Hunting Trail Tables */

.trailprey {
  margin-top: -5em;
}

.trailimage {
  background: transparent !important;
}

.trailimage img {
  width: 100%;
}

.trailnames {
  background: transparent !important;
  color: white;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
}

@media only screen and (max-width: 40em) {

.trailprey tr td span a img {
  width: 70px;
}

}

/* Main page contributors */

#mainpagecontributors {
  width: 100%;
  height: auto;
  overflow: auto;
  background-color: #d4d4d4;
  margin: 0.5em;
}

#mainpageevents {
width: 60%;
}

#mainpageevents img {
width: 200px;
height: auto;
}

@media only screen and (max-width: 74.125em) {

#mainpageevents {
width: 100%;
}
}

#contributorstitle {
  background: #b0b0b0;
  margin-top: -0.8em;
}

#contributorstitle h3 {
border-bottom: 1px solid black;
  padding-bottom: ;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
}

#contributorsbody {
padding-left: 1em;
}

.contributor {
  width: 30%;
  background: #b0b0b0;
  padding: 0.5em;
  margin: 1em;
  margin-bottom: 2em;
text-align: left;
}

@media only screen and (max-width: 40em) {

.contributor {
  width: 100%;
  background: #b0b0b0;
  padding: 0.5em;
  margin: 1em;
  text-align: left;
  height: 150px;
  overflow: auto;
}

}

.contributorimage {
  float: left;
  padding-right: 0.5em;
  padding-top: 0.5em;
}

.contributorimage img {
  width: 75px;
}

.contributorbio {
  font-style: italic;
}

/* Cryptid Tables */

.cryptid {
  background: #e6e6e6;
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

.cryptidquick {
  background: #d4d4d4;
  border-collapse: collapse;
  width: 300px;
  margin: 0.5em;
max-width:100%;
}

.cryptidquick .cryptidcolor {
  padding: 0px !important;
}

.cryptidinformation img {
  width: 150px;
}

.cryptidinformation.cryptidnotes p {
  display: table-cell;
  vertical-align: middle;
}

.cryptidinformation.cryptidnotes div {
  height: 60px;
  font-size: 12px;
overflow-y: auto;
}

.cryptidinformation.cryptidnotes {
  background: #c6c6c6;
padding: 5px !important;
}

.cryptidinformation.cryptidnotes {
  height: 70px;
}

.cryptidinformation {
  height: 200px;
}

@media only screen and (min-width: 50.01em) {

.cryptidquick {
width: 100% !important;
font-size: 11px;
}

}

@media only screen and (min-width: 65.626em) {

.cryptidquick {
width: 48% !important;
}

}

@media only screen and (min-width: 101.25em) {

.cryptidquick {
width: 30% !important;
}

}

.cryptid td {
  border: 1px solid gray;
  padding: 15px;
}

.cryptid th {
  background-color: #9b9b9b;
  padding: 10px;
  font-weight: bold;
  border: 1px solid gray;
}

.cryptid th.sub {
  background-color: #b5b5b5;
  padding: 10px;
  font-weight: bold;
}

.cryptidname {
  border-right: none !important;
}

.cryptidfaction {
  border-left: none !important;
  text-align: right;
}

.cryptidcolor.kinfolk {
  background: #7ea549;
  height: 15px;
}

.cryptidcolor.merged {
  background: #cd574d;
  height: 15px;
}

.cryptidcolor.independent {
  background: #eeaf4b;
  height: 15px;
}

.cryptidinformation {
padding-bottom: 15px;
}

.cryptidportrait {
  width: 30%;
  float: left;
  text-align: center;
}

.cryptidintrotext {
  float: right;
  width: 70%;
  padding-left: 15px;
}

.cryptidThumbnails img {
width: 130px;
margin: 0.5em;
}

@media only screen and (max-width: 40em) {
.cryptidThumbnails img {
width: 100px;
}
}

/* Eye Color Tables */

.eyecolorbox {
  width: 300px;
  border: 1px solid black;
  margin: 0.5em;
}

.eyename {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
}

.eyeinfo {
  display: flex;
  flex-direction: row;
  text-align: center;
}

.eyepreview {
  width: 70%;
  margin-top: 1em;
  margin-left: 0em;
  text-align: left;
}

.eyefails {
  width: 50%;
  background-color: #f4f4f4;
  border-radius: 10px;
  border: 1px solid black;
  margin: 1em;
  height: 177px;
  overflow: scroll;
  overflow-x: hidden;
}

.failtitle {
  padding: 5px;
  background-color: #d5d5d5;
}

.eyeexplorepreview {
  text-align: center;
  height: 100px;
}

.eyesource {
  background-color: #d5d5d5;
  padding: 5px;
  text-align: center;
  margin-top: -2em;
}

.eyeexplorepreview img {
  height: 100px;
  width: auto;
  margin-top: -2em;
}

.exploreeyes {
  width: 300px;
  border: 1px solid black;
  margin: 0.5em;
  text-align: center;
}

.exploreeyebuttons {
  background-color: #c7c7c7;
height: 42px;
}

.exploreeyebuttons p {
  height: 30px;
  margin-top: -0.5em;
}

/* Accent Tables */

.accentBody {
    background: white;
    width: 300px;
    margin: 0.5em;
    border: 1px solid gray;
}

@media only screen and (max-width: 50em) {

.accentBody {
    background: white;
    width: 100%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 50.01em) {

.accentBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 65.626em) {

.accentBody {
    background: white;
    width: 47%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

@media only screen and (min-width: 101.25em) {

.accentBody {
    background: white;
    width: 31%;
    margin: 0.5em;
    border: 1px solid gray;
}

}

/* Disaster Tables */

@media only screen and (max-width: 74.125em) {
.disaster {
    width: 100% !important;
}
}

.disaster {
    width: 46%;
    margin: 1em;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

.disasterImage {
  background-color: white;
}

.disasterImage div:first-of-type {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}

div[id*="BiomeImage"] {
  margin-bottom: -0.4em;
}

.disasterName {
background-color: #3a5f70;
  padding: 5px;
  font-weight: bold;
  color: white;
}

.disasterCategory {
background-color: #b4b4b4;
padding: 5px;
font-weight: bold;
}

.disasterCategory img {
  width: 30px;
}

.disasterEvolutions {
background-color: #b4b4b4;
padding: 5px;
height: 80px;
width: 80%;
}

.disasterText {
background-color: #d1d1d1;
padding: 5px;
text-align: left;
}

.disasterText div {
  height: 200px;
  overflow: auto;
}

.disasterSubheader {
  height: 50px;
}

.pageButton {
width: 200px; 
margin: 1em; 
font-weight: bold; 
text-align: center;
}

.pageButton a {
color: white;
}

.pageButton a:hover {
color: white;
}

/* Mutation Tables */

@media only screen and (max-width: 74.125em) {
.mutation {
    width: 100% !important;
}
}

.mutation {
    width: 70%;
    margin: auto;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

.mutationName {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
text-align: center;
}

.mutationImage {
  background-color: white;
}

.mutationText {
background-color: #d1d1d1;
padding: 10px;
text-align: center;
width: 33%;
border: 1px solid black;
}

.mutationAge {
padding: 10px;
text-align: center;
width: 33%;
border: 1px solid black;
background-color: #b0b0b0;
}

.mutationPreviews {
    width: 70%;
    margin: auto;
    margin-top: -0.3em;
    background-color: #ededed;
    text-align: center;
    border-collapse: collapse;
border: 1px solid black;
}

@media only screen and (max-width: 74.125em) {
.mutationPreview {
    width: 100% !important;
}
}


/* Decor preview modal */

#decorModal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#decorModalV1 {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#decorModalContent {
  background-color: #fefefe;
  margin: 5vh auto;
  border: 1px solid #888;
  width: 75%;
  height: 75vh;
}

.modalheader {
background-color: #3a5f70;
  padding: 10px;
  font-weight: bold;
  color: white;
}

.decorname {
  font-weight: bold;
}

.modalclose {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalclose:hover,
.modalclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modalbody {
  height: 84.5%;
}

#decorinformation {
  display: block;
  padding: 10px;
}

#decorpreview {
  display: none;
}

#decorpreviewimg {
  position: fixed;
  z-index: 99902;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

#behinddecorpreviewimg {
  position: fixed;
  z-index: 99900;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

#previewbasewolf {
  position: fixed;
  z-index: 99901;
  top: 42%;
  left: 50%;
  width: 40vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

.modalfooter {
  display: flex;
  flex-direction: row;
  background: #d4d4d4;
  padding: 10px;
  align-items: center;
  margin-top: 1em;
}

#previewbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 0;
}

#previewbutton:hover {
background: #8c8c8c;
cursor: pointer;
}

#back {
  display: none;
  width: 50%;
}

#backbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 5px;
  width: 4em;
  text-align: center;
}

#backbutton:hover {
background: #8c8c8c;
cursor: pointer;
}

#previewinput {
  display: none;
  width: 50%;
  text-align: right;
}

#previewoptions {
  width: 100%;
}

#checkboxesbutton {
  background: #acacac;
  height: auto;
  line-height: 2em;
  padding: 5px;
  border-radius: 5px;
  width: 6em;
  text-align: center;
  margin-right: 0.8em;
display: none;
}

#checkboxesbutton:hover {
background: #8c8c8c;
cursor: pointer;
}

#checkboxes {
  position: fixed;
  background: #bbb;
  padding: 10px;
  text-align: center;
  top: 70%;
  left: 50%;
  width: 15em;
  max-width: 640px;
  transform: translate(-50%,-50%);
  z-index: 99999;
  padding-top: 20px;
  display: none;
}

#decorModalV1 #checkboxes {
  position: fixed;
  background: #bbb;
  padding: 10px;
  text-align: center;
  top: 70%;
  left: 25%;
  width: 15em;
  max-width: 640px;
  transform: translate(-50%,-50%);
  z-index: 99999;
  padding-top: 20px;
  display: none;
}

#previewbackground {
  top: 42%;
  left: 50%;
  max-width: 640px;
  transform: translate(-50%,-50%);
  position: fixed;
  width: 40vw;
}

#obtentionheader {
  background: #d4d4d4;
  padding: 10px;
}

#decorinfo {
  display: flex;
  padding: 10px;
}

#decorobtention {
  padding: 10px;
}

@media only screen and (max-width: 40rem) {

#decorModalContent {
  background-color: #fefefe;
  margin: 5vh auto;
  border: 1px solid #888;
  width: 94%;
  height: 60vh;
}

.modalbody {
  height: 80%;
}

#decorpreviewimg {
  position: fixed;
  z-index: 99902;
  top: 36%;
  left: 50%;
  width: 90vw;
  max-width: 640px;
  transform: translate(-50%,-50%);
}

#behinddecorpreviewimg {
  position: fixed;
  z-index: 99900;
  top: 36%;
  left: 50%;
  width: 90vw;
  max-width: 640px;
  transform: translate(-50%, -50%);
}

#previewbasewolf {
  position: fixed;
  z-index: 99901;
  top: 36%;
  left: 50%;
  width: 90vw;
  max-width: 640px;
  transform: translate(-50%,-50%);
}

#previewbackground {
  top: 36%;
  left: 50%;
  max-width: 640px;
  transform: translate(-50%,-50%);
  position: fixed;
  width: 90vw;
}

#checkboxes {
  top: 55%;
}

}