/*New Styles*/
.main-holder .color-bg p strong, .main-holder .color-bg p a {
    text-transform: uppercase;
    font-family: 'Aptifer Sans LT Pro Bold';
}

.reader-container .body-background {
        background-image: url("https://content.demiplane.com/compendium/marvelrpg/spider-verse-expansion/css/spv-bg-2.png") !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: right !important;
}

        .main-holder {
                background-color: transparent;
        }


@media only screen and (max-width: 1100px) {

        .reader-container .body-background {
                background-image: url(https://static.thetabula.app/static/tabula/assets/marvel/layout/grid.png?format=webp) !important;
        }
}

.main-holder h1.normal.magenta, .main-holder h1.normal.orange, .main-holder h1.normal.purple {
    font-size: 55px;
}

@font-face {
    font-family: 'Aptifer Sans LT Pro Black';
    src: url("https://content.demiplane.com/fonts/Aptifer-Sans-LT-Pro-Black.ttf") format("truetype");
}

.main-holder .image-with-subtitle-center p a {
    font-family: 'Aptifer Sans LT Pro Black';
    text-transform: uppercase;
}

.main-holder ul li:not(:last-child) {
    margin-bottom: 10px;
}

.main-holder .pre-gen-block ul li:not(:last-child) {
    margin-bottom: 0px;
}

@font-face {
  font-family: "Comicbook";
  src: url(https://content.demiplane.com/fonts/animeace2_reg.otf);
}



   .editors-note-block {
    margin: 20px 30px;
    padding: 0px 10px;
    border: thick solid var(--marvel-bg-teal);
    
    font-family: "Comicbook";
    font-size: var(--font-size-small-1);
    
    & .author {
        text-align: right;
    }
}

.editors-note-block.edit-purple {
    border-color: var(--marvel-bg-purple);
}

.editors-note-block.editor-lg {
    border-color: var(--marvel-bg-light-green);
}

.editors-note-block.edit-green {
    border-color: var(--marvel-bg-green);
}

.editors-note-block.edit-black {
    border-color: var(--marvel-bg-black);
}

.main-holder .compendium-table h5 {
    font-family: 'Aptifer Sans LT Pro Bold';
}

.main-holder .Chapter-10-Tables {
    background-color: var(--marvel-bg-green);
}

.main-holder .compendium-table.Chapter-10-Tables {
    & table {
        
        & th {
        font-family: 'Aptifer Sans LT Pro';
    }
    
    & tr:nth-child(even) {
        background-color: #c2c8bd;
    }
    }
}

.main-holder .vehicle-name {
    border-top: thick solid var(--marvel-bg-green);
    padding-top: 20px;
}

.main-holder .vehicle-block {
    border-bottom: thick solid var(--marvel-bg-green);
    padding-bottom: 20px;
}



/*Recycled*/

 .tooltip-convert {
    color: magenta;
}  

.main-holder .marvel-iconography img {
    margin-top: 12px;
}    

.main-holder .powerslist-subhead {
    font-family: Aptifer Slab LT Pro;
          font-weight: bold;
      margin-top: 0px;
      font-size: calc(var(--font-size-2)*0.92);
}

.main-holder .powers-subhead {
    font-family: Aptifer Slab LT Pro;
          font-weight: bold;
      margin-bottom: -5px;
      margin-top: var(--font-size-6);
      font-size: calc(var(--font-size-2)*0.92);
}
 
            .main-holder .force-clear {
      clear: both;
  }
  
  .main-holder .advancement-chart {
      background-color: var(--marvel-bg-sky-blue);
      padding: 2px;
      clip-path: polygon(0% -585px, 100% 29px, 100% 100%, 0 100%, 0 0);
  }
  
  .main-holder .inner-chart {
      background-color: #d9eefa;
      clip-path: polygon(0% -585px, 100% 23px, 100% 100%, 0 100%, 0 0);
      margin: 10px;
      padding: 5px;
  }
  
  .main-holder .advancement-chart li {
      font-size: var(--font-size-2);
      margin-bottom: 10px;
  }
  
  .main-holder .advancement-chart ul li::before {
  height: var(--font-size-2);
  width: var(--font-size-2);
  content: "\25A1";
  color: black;
  font-size: var(--font-size-3);
}

.main-holder .advancement-chart h4 {
    text-transform: uppercase;
    padding: 0px 0px 0px 10px;
    
}
  
  .main-holder .power-subhead {
      font-family: Aptifer Slab LT Pro;
      font-weight: bold;
      margin-top: 0px;
      font-size: calc(var(--font-size-2)*0.92);
  }
  

  


             .marvel-sidebar {
    background: #33006644;
}

.profile-sidebar {
    background: #00336644;
}

.secret-code-block {
    background: #00330044;
}

.temp-pre-gen-block {
    background: #04334044;

}

.main-holder .ch2-subhead {
    color: var(--marvel-bg-blue);
    font-size: var(--font-size-2);
    font-weight: bold;
    font-family: Aptifer Slab LT Pro;
}

.main-holder .ch2-list {
    background-color: #f6f7fb;
    border: 2px dashed var(--marvel-bg-blue);
    padding: 20px;
    max-width: 90%;
    border-radius: 0px 10px 0px 10px;
    margin: -5px 5px 15px 5px;
}

.main-holder .ch2-list li::before {
  height: 12px;
  width: 12px;
  content: "\2B21";
  color: var(--marvel-bg-blue);
}

.main-holder h4 {
    font-size: var(--font-size-2);
    font-family: Aptifer Sans LT Pro Bold;
    margin-top: var(--font-size-4);
    color: var(--marvel-bg-black);
}

.marvel-long-list li {
    margin-bottom: var(--font-size-1);
}


/** TEMPORARY TO VERIFY CHARACTERS **/

    :root {
  --marvel-red: #ed1c24;
  --marvel-sheet-bg-ow: rgb(255, 243, 241);
  --marvel-sheet-bg-white: white;
  --marvel-sheet-bg-maroon: rgb(139, 2, 3);
  --marvel-sheet-bg-red: rgb(237, 28, 37);

  --marvel-bg-blue: rgba(0, 89, 158, 1);
  --marvel-bg-gold: rgba(216, 190, 39, 1);
  --marvel-bg-pink: rgb(164, 56, 91);
  --marvel-bg-orange: rgb(204, 115, 28);
  --marvel-bg-teal: rgb(3, 104, 116);
  --marvel-bg-crimson: rgb(148, 48, 50);
  --marvel-bg-purple: rgb(73, 53, 129);
  --marvel-bg-green: rgb(71, 99, 55);
  --marvel-bg-light-green: rgb(62, 147, 77);
  --marvel-bg-red: rgb(157, 16, 21);
  --marvel-bg-black: rgb(0, 1, 1);
  --marvel-bg-magenta: rgb(133, 46, 138);
  --marvel-bg-sky-blue: rgb(0, 170,233);
  --marvel-bg-vehicle-sheet-light-blue: #d9eefa;

  --base-font: 18px;
  --font-scale: 1.2;

  --font-size-1: var(--base-font);

  --font-size-2: calc(var(--base-font) * var(--font-scale));

  --font-size-3: calc(var(--font-size-2) * var(--font-scale));

  --font-size-4: calc(var(--font-size-3) * var(--font-scale));

  --font-size-5: calc(var(--font-size-4) * var(--font-scale));

  --font-size-6: calc(var(--font-size-5) * var(--font-scale));

  --font-size-7: calc(var(--font-size-6) * var(--font-scale));

  --font-size-8: calc(var(--font-size-7) * var(--font-scale));

  --font-size-small-1: calc(var(--base-font) / var(--font-scale));

  --font-size-small-2: calc(var(--font-size-small-1) / var(--font-scale));

  --font-size-small-3: calc(var(--font-size-small-2) / var(--font-scale));
}

@font-face {
  font-family: "Aptifer Sans LT Pro";
  src: url(https://content.demiplane.com/fonts/Aptifer-Sans-LT-Pro-Bold.ttf);
}

@font-face {
  font-family: "Aptifer Sans LT Pro Bold";
  font-weight: bold;
  src: url(https://content.demiplane.com/fonts/Aptifer-Sans-LT-Pro-Black.ttf);
}

@font-face {
  font-family: "Aptifer Slab LT Pro";
  src: url(https://content.demiplane.com/fonts/Aptifer+Slab+LT+Pro.otf);
}

/**/
/*Chapter Image*/
/**/

.ch-image {
  position: relative;
}

.ch-image::after {
  content: "0";
  font-family: Aptifer Sans LT Pro;
  /*font-size: 68px;*/
  font-size: var(--font-size-8);
  padding-bottom: 5px;
  color: white;
  background-repeat: no-repeat;
  display: flex;
  position: absolute;
  z-index: 1001;
  width: calc(var(--font-size-7) * 2);
  aspect-ratio: 1 / 1;
  /*bottom: 32px;*/
  bottom: var(--font-size-4);
  /*left: 32px;*/
  left: var(--font-size-4);
  background-image: url(https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-number-bg.png?format=webp);
  background-position: center;
  background-size: contain;
  align-items: center;
  justify-content: space-around;
}

/*  */
/* Headers */
/*  */

.main-holder h1 {
  position: relative;
  display: flex;
  align-items: end;
  font-size: var(--font-size-8);
  height: 120px;
  margin: 0;
  margin-top: -18px;
  padding-bottom: var(--font-size-6);
  padding-left: var(--font-size-small-2);
  padding-right: var(--font-size-small-2);
  color: white;
  background: linear-gradient(transparent, var(--bg-color) 95%), var(--bg-image);
  background-size: cover;
  background-position: 0, 0;
  font-family: Aptifer Sans LT Pro;
}

.main-holder h1::after {
  position: absolute;
  content: "";
  width: calc(100% - calc(var(--font-size-small-2) * 2));
  height: 8px;
  background-color: white;
  bottom: var(--font-size-small-3);
}

.main-holder h1.no-chapter-number::before {
  display: none;
}

.ch-1::after {
  content: "1";
}

.ch-2::after {
  content: "2";
}

.ch-3::after {
  content: "3";
}

.ch-4::after {
  content: "4";
}

.ch-5::after {
  content: "5";
}

.ch-6::after {
  content: "6";
}

.ch-7::after {
  content: "7";
}

.ch-8::after {
  content: "8";
}

.ch-9::after {
  content: "9";
}

.ch-10::after {
  content: "10";
}

.ch-11::after {
  content: "11";
}

.ch-12::after {
  content: "12";
}

.ch-13::after {
  content: "13";
}

.ch-14::after {
  content: "14";
}

.ch-15::after {
  content: "15";
}

/*bg color classes*/
.main-holder .color-bg {
  color: white;
  padding: var(--font-size-small-2);
  padding-bottom: 40px;
  position: relative;
}

.main-holder .color-bg::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 32px;
  bottom: 0px;
  left: 0px;

  background: repeating-linear-gradient(
    -45deg,
    var(--bg-color),
    var(--bg-color) 10px,
    white 10px,
    white 20px
  );
}

.main-holder .color-bg::after {
  position: absolute;
  content: "";
  width: 295px;
  height: 34px;
  bottom: -1px;
  left: 0px;
  background-color: var(--bg-color);

  clip-path: polygon(
    0% 0%,
    100% 0%,

    calc(100% - 34px) 100%,
    0% 100%
  );
}

.main-holder .color-bg a {
    color: white;
    border-color: white;
}

.main-holder .gold {
  --bg-color: var(--marvel-bg-gold);
  background-color: var(--bg-color);
}

.main-holder h1.gold {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-gold-background.png");
}

.main-holder .blue {
  --bg-color: var(--marvel-bg-blue);
  background-color: var(--bg-color);
}

.main-holder h1.blue {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-blue-background.png");
}

.main-holder .pink {
  --bg-color: var(--marvel-bg-pink);
  background-color: var(--bg-color);
}

.main-holder .magenta {
  --bg-color: var(--marvel-bg-magenta);
  background-color: var(--bg-color);
}

.main-holder h1.pink {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-pink-background.png");
}

.main-holder h1.magenta {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/x-men-expansion/css/chapter-open-magenta-background.png");
}

.main-holder .orange {
  --bg-color: var(--marvel-bg-orange);
  background-color: var(--bg-color);
}

.main-holder h1.orange {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-orange-background.png");
}

.main-holder .teal {
  --bg-color: var(--marvel-bg-teal);
  background-color: var(--bg-color);
}

.main-holder h1.teal {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-teal-background.png");
}

.main-holder .sky-blue {
  --bg-color: var(--marvel-bg-sky-blue);
  background-color: var(--bg-color);
}

.main-holder h1.sky-blue {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/x-men-expansion/css/Chapter Start Sky Blue.jpg");
}

.main-holder .crimson {
  --bg-color: var(--marvel-bg-crimson);
  background-color: var(--bg-color);
}

.main-holder h1.crimson {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-crimson-background.png");
}

.main-holder .purple {
  --bg-color: var(--marvel-bg-purple);
  background-color: var(--bg-color);
}

.main-holder h1.purple {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-purple-background.png");
}

.main-holder .green {
  --bg-color: var(--marvel-bg-green);
  background-color: var(--bg-color);
}

.main-holder h1.green {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-green-background.png");
}

.main-holder .light-green {
  --bg-color: var(--marvel-bg-light-green);
  background-color: var(--bg-color);
}

.main-holder h1.light-green {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-light-green-background.png");
}

.main-holder .red {
  --bg-color: var(--marvel-bg-red);
  background-color: var(--bg-color);
}

.main-holder h1.red {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-red-background.png");
}

.main-holder .black {
  --bg-color: var(--marvel-bg-black);
  background-color: var(--bg-color);
}

.main-holder h1.black {
  --bg-image: url("https://content.demiplane.com/compendium/marvelrpg/playtest-rulebook/css/chapter-open-black-background.png");
}

/*utility*/
.m-t-none {
  margin-top: 0px;
}

/* ------- */

.main-holder .power-set-block {
  background-color: #f2f8ff;
  clip-path: none;
}

.pre-gen-abilities {
  background-color: #fbbbad;
  display: inline-flex;
}

.pre-gen-damage {
  background-color: #fbe3ad;
  display: inline-flex;
}

.pregen-rank {
  background-color: #f5fbad;
  display: inline-flex;
}

.pregen-karma {
  background-color: #e1fbad;
  display: inline-flex;
}

.pregen-health {
  background-color: #c2fbad;
  display: inline-flex;
}

.pregen-focus {
  background-color: #adfbbc;
  display: inline-flex;
}

.pregen-speed {
  background-color: #adfbdb;
  display: inline-flex;
}

.pregen-traits {
  background-color: #adf6fb;
  display: inline-flex;
}

.pregen-biography {
  background-color: #add5fb;
  display: inline-block;
}

.pregen-powers {
  background-color: #b3adfb;
  display: inline-flex;
}

/**/
/*Changes*/
/**/

/**/
/*Powers*/
/**/
.main-holder .power-set-block {
  /*--top-corner: 30px;*/
  --top-corner: var(--font-size-4);
  /*--bottom-corner: 176px;*/
  --bottom-corner: calc(var(--font-size-7) * 3);

  position: relative;
  background-color: transparent;
  padding-bottom: 16px;
  margin-bottom: 40px;
}

.main-holder .power-set-block * {
  position: relative;
  z-index: 1;
}

.main-holder .power-set-block h3 {
  --border-size: 6px;

  line-height: 100%;

  color: white;
  padding-top: var(--top-corner);
  padding-left: var(--top-corner);
  padding-bottom: calc(var(--border-size) + 2px);
  text-transform: uppercase;
  font-size: 32px;
  position: relative;
  background: none;
}

.main-holder .power-set-block h3::before {
  position: absolute;
  content: "";
  width: calc(100% - calc(var(--top-corner) * 2));
  height: var(--border-size);
  background-color: white;
  left: var(--top-corner);
  bottom: 0;

  clip-path: polygon(
    var(--border-size) 0%,
    100% 0%,
    calc(100% - var(--border-size)) 100%,
    0% 100%
  );
}

.main-holder .power-set-block p {
  --corner-size: 10px;
  --border-offset: 2px;
  --border-width: 3px;

  --x-1: calc(0% + var(--corner-size));
  --x-2: calc(100% - var(--corner-size));
  --x-3: 100%;
  --x-4: 0%;

  --y-1: 0%;
  --y-2: calc(0% + var(--corner-size));
  --y-3: calc(100% - var(--corner-size));
  --y-4: 100%;

  --left-x: calc(0% + var(--corner-size));
  --right-x: calc(100% - var(--corner-size));
  --top-y: calc(0% + var(--corner-size));
  --bottom-y: calc(100% - var(--corner-size));

  width: fit-content;
  background-color: var(--marvel-sheet-bg-white);
  margin-left: var(--top-corner);
  margin-right: var(--top-corner);
  padding: 12px 12px 8px 12px;
  font-family: "Aptifer Slab LT Pro";
  position: relative;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1)
  );
}

.main-holder .power-set-block p::before {
  --ix-1: calc(var(--x-1) + var(--border-offset));
  --ix-2: calc(var(--x-2) - var(--border-offset));
  --ix-3: calc(var(--x-3) - var(--border-width));
  --ix-4: calc(var(--x-4) + var(--border-width));

  --iy-1: calc(var(--y-1) + var(--border-width));
  --iy-2: calc(var(--y-2) + var(--border-offset));
  --iy-3: calc(var(--y-3) - var(--border-offset));
  --iy-4: calc(var(--y-4) - var(--border-width));

  background-color: black;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1),
    /* inside */ var(--ix-1) var(--iy-1),
    var(--ix-4) var(--iy-2),
    var(--ix-4) var(--iy-3),
    var(--ix-1) var(--iy-4),
    var(--ix-2) var(--iy-4),
    var(--ix-3) var(--iy-3),
    var(--ix-3) var(--iy-2),
    var(--ix-2) var(--iy-1),
    var(--ix-1) var(--iy-1)
  );
}

.main-holder .power-set-block::before {
  --x1: var(--top-corner);
  --x2: 100%;
  --x3: calc(100% - var(--bottom-corner));
  --x4: 0%;

  --y1: 0px;
  --y2: calc(100% - var(--bottom-corner));
  --y3: 100%;
  --y4: var(--top-corner);

  z-index: 0;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(70, 40, 132, 0.8) 40%,
    rgba(70, 40, 132, 0.5) 100%
  );
  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x2) var(--y2),
    var(--x3) var(--y3),
    var(--x4) var(--y3),
    var(--x4) var(--y4)
  );
}

.main-holder .power-set-block img {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0px;
}

.main-holder .power-set-container {
  padding-left: var(--top-corner);
}

.main-holder .power-set-container table td {
  padding-left: 0px;
}

.main-holder .Chapter-4-Tables {
    background-color: var(--marvel-bg-orange);
}

.main-holder .Chapter-4-Tables table tr {
    border-color: var(--marvel-bg-orange);
}

.main-holder .Chapter-4-Tables table tr:nth-child(even) {
    background-color: rgb(254, 225, 198);
}

.main-holder .Chapter-5-Tables {
    background-color: var(--marvel-bg-teal);
}

.main-holder .Chapter-5-Tables table tr {
    border-color: var(--marvel-bg-teal);
}

.main-holder .Chapter-5-Tables table tr:nth-child(even) {
    background-color: rgb(193, 210, 216);
}

.main-holder .Chapter-6-Tables {
    background-color: var(--marvel-bg-crimson);
}

.main-holder .Chapter-6-Tables table tr {
    border-color: var(--marvel-bg-crimson);
}

.main-holder .Chapter-12-Tables {
    background-color: var(--marvel-bg-sky-blue);
}

.main-holder .Chapter-12-Tables table tr {
    border-color: var(--marvel-bg-sky-blue);
}

.main-holder .Chapter-12-Tables table tr:nth-child(even) {
    background-color: #c2d7e8;
}

.main-holder .left-aligned-table td, .main-holder .left-aligned-table thead {
    text-align: left;
}

/**/
/*Character Sheet*/
/**/

.main-holder .Pre-Gen-Name {
  font-family: "Aptifer Sans LT Pro";
}

.main-holder .Pre-Gen-Name::after {
  display: none;
}

.main-holder .pre-gen-block {
  --v-offset: -48px;
}

/**/
/*Section 1*/
/**/
.main-holder .pre-gen-block .section-1 {
  --overlap: 16px;
  --artist-width: 30px;
  display: grid;
  grid-template-columns:
    60%
    var(--overlap)
    calc(40% - var(--overlap));
}

.main-holder .pre-gen-block .section-1 .image {
  --offset: 4px;
  --border-width: 6px;
  --corner-size: 20px;

  --x1: 0%;
  --x2: 100%;
  --x3: calc(100% - var(--corner-size));

  --y1: 0%;
  --y2: calc(100% - var(--corner-size));
  --y3: 100%;

  position: relative;
  width: 100%;
  height: min-content;
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
  grid-template-areas: "artist art";
  grid-template-columns: 30px 1fr;

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x2) var(--y2),
    var(--x3) var(--y3),
    var(--x1) var(--y3),
    var(--x1) var(--y1)
  );
}

.main-holder .image .book-image-center {
  margin: 0 !important;
  margin-bottom: -3px !important;
  width: 100% !important;
}

.main-holder .section-1 .image::before {
  --x1: var(--artist-width);
  --ix1: calc(var(--x1) + var(--border-width));
  --ix2: calc(var(--x2) - var(--border-width));
  --ix3: calc(var(--x3) - var(--offset));

  --iy1: calc(var(--y1) + var(--border-width));
  --iy2: calc(var(--y2) - var(--offset));
  --iy3: calc(var(--y3) - var(--border-width));

  background-color: var(--marvel-red);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x2) var(--y2),
    var(--x3) var(--y3),
    var(--x1) var(--y3),
    var(--x1) var(--y1),
    /* inside */ var(--ix1) var(--iy1),
    var(--ix1) var(--iy3),
    var(--ix3) var(--iy3),
    var(--ix2) var(--iy2),
    var(--ix2) var(--iy1),
    var(--ix1) var(--iy1)
  );
}

.main-holder .pre-gen-block .section-1 .image p {
  grid-area: artist;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  margin: 0px;
  margin-bottom: 56px;
  width: var(--artist-width);
  font-size: var(--font-size-small-1);
}

.main-holder .pre-gen-block .section-1 .image img {
  grid-area: art;
  margin: 0px;
}

.main-holder .pre-gen-block .section-1 > div:nth-child(2) {
  display: grid;
  row-gap: var(--font-size-small-3);
  grid-column: 2 / 4;
  grid-row: 1;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 140px;
    grid-auto-rows: calc(var(--font-size-8) * 2) 140px 140px 140px;
  grid-template-areas:
    "rank karma"
    "health health"
    "focus focus"
    "speed speed";
}

.main-holder .pregen-rank {
  --rank-corner-size: 23px;
  --rank-border-offset: 5px;
  --rank-border-width: 8px;

  --rank-left-x: calc(0% + var(--rank-corner-size));
  --rank-right-x: calc(100% - var(--rank-corner-size));
  --rank-top-y: calc(0% + var(--rank-corner-size));
  --rank-bottom-y: calc(100% - var(--rank-corner-size));

  grid-area: rank;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 120px;
  width: calc(var(--font-size-5) * 3 + 8px);
  margin: 8px auto 0px auto;
  background-color: var(--marvel-sheet-bg-ow);
  clip-path: polygon(
    var(--rank-left-x) 0%,
    var(--rank-right-x) 0%,
    100% var(--rank-top-y),
    100% var(--rank-bottom-y),
    var(--rank-right-x) 100%,
    var(--rank-left-x) 100%,
    0% var(--rank-bottom-y),
    0% var(--rank-top-y)
  );
}

.main-holder .pregen-rank:before {
  --rank-inset-outside-left-x: calc(0% + var(--rank-border-width));
  --rank-inset-inside-left-x: calc(
    var(--rank-left-x) + var(--rank-border-offset)
  );
  --rank-inset-outside-right-x: calc(100% - var(--rank-border-width));
  --rank-inset-inside-right-x: calc(
    var(--rank-right-x) - var(--rank-border-offset)
  );

  --rank-inset-upper-top-y: calc(0% + var(--rank-border-width));
  --rank-inset-upper-bottom-y: calc(
    var(--rank-top-y) + var(--rank-border-offset)
  );
  --rank-inset-lower-top-y: calc(
    var(--rank-bottom-y) - var(--rank-border-offset)
  );
  --rank-inset-lower-bottom-y: calc(100% - var(--rank-border-width));

  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--marvel-red);
  clip-path: polygon(
    var(--rank-left-x) 0%,
    var(--rank-right-x) 0%,
    100% var(--rank-top-y),
    100% var(--rank-bottom-y),
    var(--rank-right-x) 100%,
    var(--rank-left-x) 100%,
    0% var(--rank-bottom-y),
    0% var(--rank-top-y),
    var(--rank-inset-outside-left-x) var(--rank-inset-upper-bottom-y),
    var(--rank-inset-outside-left-x) var(--rank-inset-lower-top-y),
    var(--rank-inset-inside-left-x) var(--rank-inset-lower-bottom-y),
    var(--rank-inset-inside-right-x) var(--rank-inset-lower-bottom-y),
    var(--rank-inset-outside-right-x) var(--rank-inset-lower-top-y),
    var(--rank-inset-outside-right-x) var(--rank-inset-upper-bottom-y),
    var(--rank-inset-inside-right-x) var(--rank-inset-upper-top-y),
    var(--rank-inset-inside-left-x) var(--rank-inset-upper-top-y),
    var(--rank-inset-outside-left-x) var(--rank-inset-upper-bottom-y),
    0% var(--rank-top-y)
  );
}

.main-holder .pregen-rank h5 {
  margin-top: var(--rank-border-width);
  text-transform: uppercase;
  /*font-size: 18px;*/
  font-size: var(--font-size-1);
}

.main-holder .pregen-rank p {
  /*font-size: 88px;*/
  font-size: calc(var(--font-size-6) * 2);
  font-weight: bold;
  margin: 32px 0px 0px 0px;
  margin: var(--font-size-4) 0px 0px 0px;
}

.main-holder .pregen-karma {
  --karma-tab-height: 18px;
  --karma-tab-offset: 10px;

  --karma-x1: 0%;
  --karma-x2: calc(100%);
  --karma-x3: calc(100% - var(--karma-tab-offset));
  --karma-x4: calc(var(--karma-x1) + var(--karma-tab-offset));

  --karma-y1: 0%;
  --karma-y2: calc(var(--karma-y1) + var(--karma-tab-height));
  --karma-y3: calc(var(--karma-y2) + var(--karma-tab-offset));

  --karma-y6: 100%;
  --karma-y5: calc(var(--karma-y6) - var(--karma-tab-height));
  --karma-y4: calc(var(--karma-y5) - var(--karma-tab-offset));

  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin: 8px 0px 0px 0px;
  background-color: var(--marvel-sheet-bg-ow);

  grid-area: karma;
  clip-path: polygon(
    var(--karma-x1) var(--karma-y1),
    var(--karma-x2) var(--karma-y1),
    var(--karma-x2) var(--karma-y2),
    var(--karma-x3) var(--karma-y3),
    var(--karma-x3) var(--karma-y4),
    var(--karma-x2) var(--karma-y5),
    var(--karma-x2) var(--karma-y6),
    var(--karma-x1) var(--karma-y6),
    var(--karma-x1) var(--karma-y5),
    var(--karma-x4) var(--karma-y4),
    var(--karma-x4) var(--karma-y3),
    var(--karma-x1) var(--karma-y2)
  );
}

.main-holder .pregen-karma::before {
  --karma-border-width: 2px;
  --karma-border-offset: 1px;

  --karma-ix-1: calc(var(--karma-x1) + var(--karma-border-width));
  --karma-ix-2: calc(var(--karma-x2) - var(--karma-border-width));
  --karma-ix-3: calc(var(--karma-x3) - var(--karma-border-width));
  --karma-ix-4: calc(var(--karma-x4) + var(--karma-border-width));

  --karma-iy-1: calc(var(--karma-y1) + var(--karma-border-width));
  --karma-iy-2: calc(var(--karma-y2) - var(--karma-border-offset));
  --karma-iy-3: calc(var(--karma-y3) - var(--karma-border-offset));
  --karma-iy-4: calc(var(--karma-y4) + var(--karma-border-offset));
  --karma-iy-5: calc(var(--karma-y5) + var(--karma-border-offset));
  --karma-iy-6: calc(var(--karma-y6) - var(--karma-border-width));

  background-color: var(--marvel-red);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;

  clip-path: polygon(
    var(--karma-x1) var(--karma-y1),
    var(--karma-x2) var(--karma-y1),
    var(--karma-x2) var(--karma-y2),
    var(--karma-x3) var(--karma-y3),
    var(--karma-x3) var(--karma-y4),
    var(--karma-x2) var(--karma-y5),
    var(--karma-x2) var(--karma-y6),
    var(--karma-x1) var(--karma-y6),
    var(--karma-x1) var(--karma-y5),
    var(--karma-x4) var(--karma-y4),
    var(--karma-x4) var(--karma-y3),
    var(--karma-x1) var(--karma-y2),
    var(--karma-x1) var(--karma-y1),
    /* inside */ var(--karma-ix-1) var(--karma-iy-1),
    var(--karma-ix-1) var(--karma-iy-2),
    var(--karma-ix-4) var(--karma-iy-3),
    var(--karma-ix-4) var(--karma-iy-4),
    var(--karma-ix-1) var(--karma-iy-5),
    var(--karma-ix-1) var(--karma-iy-6),
    var(--karma-ix-2) var(--karma-iy-6),
    var(--karma-ix-2) var(--karma-iy-5),
    var(--karma-ix-3) var(--karma-iy-4),
    var(--karma-ix-3) var(--karma-iy-3),
    var(--karma-ix-2) var(--karma-iy-2),
    var(--karma-ix-2) var(--karma-iy-1),
    var(--karma-ix-1) var(--karma-iy-1)
  );
}

.main-holder .pregen-karma h5 {
  text-transform: uppercase;
  font-size: 16px;
}

.main-holder .pregen-karma p {
  /*font-size: 56px;*/
  font-size: var(--font-size-7);
  font-weight: bold;
  margin-top: 24px;
}

.main-holder .section-1 .container {
  background-color: var(--marvel-sheet-bg-ow);
  --corner-size: 20px;
  --border-offset: 1px;
  --border-width: 2px;

  --x-1: calc(0% + var(--corner-size));
  --x-2: calc(100% - var(--corner-size));
  --x-3: 100%;
  --x-4: 0%;

  --y-1: 0%;
  --y-2: calc(0% + var(--corner-size));
  --y-3: calc(100% - var(--corner-size));
  --y-4: 100%;

  --left-x: calc(0% + var(--corner-size));
  --right-x: calc(100% - var(--corner-size));
  --top-y: calc(0% + var(--corner-size));
  --bottom-y: calc(100% - var(--corner-size));

  grid-column: 1 / 3;
  grid-row: 2 / 4;

  text-align: center;
  padding-right: var(--dr-size);
  padding-left: var(--corner-size);
  position: relative;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1)
  );
}

.main-holder .section-1 .container::before {
  --ix-1: calc(var(--x-1) + var(--border-offset));
  --ix-2: calc(var(--x-2) - var(--border-offset));
  --ix-3: calc(var(--x-3) - var(--border-width));
  --ix-4: calc(var(--x-4) + var(--border-width));

  --iy-1: calc(var(--y-1) + var(--border-width));
  --iy-2: calc(var(--y-2) + var(--border-offset));
  --iy-3: calc(var(--y-3) - var(--border-offset));
  --iy-4: calc(var(--y-4) - var(--border-width));

  background-color: var(--marvel-red);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1),
    /* inside */ var(--ix-1) var(--iy-1),
    var(--ix-4) var(--iy-2),
    var(--ix-4) var(--iy-3),
    var(--ix-1) var(--iy-4),
    var(--ix-2) var(--iy-4),
    var(--ix-3) var(--iy-3),
    var(--ix-3) var(--iy-2),
    var(--ix-2) var(--iy-1),
    var(--ix-1) var(--iy-1)
  );
}

.main-holder .section-1 .container h5 {
  text-transform: uppercase;
  font-size: 16px;
  font-size: var(--font-size-1);
}

.main-holder .section-1 .container p {
  font-size: 48px;
  font-size: var(--font-size-6);
  font-weight: bold;
  margin-top: var(--font-size-small-1);
}

.main-holder .section-1 .damage-reduction,
.main-holder .section-1 .initiative-modifier {
  --dr-offset: 1px;
  --dr-border-width: 2px;
  --dr-corner-size: 20px;

  --dr-x1: 0%;
  --dr-x2: 100%;
  --dr-x3: calc(0% + var(--dr-corner-size));

  --dr-y1: 0%;
  --dr-y2: 100%;
  --dr-y3: calc(100% - var(--dr-corner-size));

  background-color: var(--marvel-sheet-bg-white);
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  position: relative;

  clip-path: polygon(
    var(--dr-x1) var(--dr-y1),
    var(--dr-x2) var(--dr-y1),
    var(--dr-x2) var(--dr-y2),
    var(--dr-x3) var(--dr-y2),
    var(--dr-x1) var(--dr-y3),
    var(--dr-x1) var(--dr-y1)
  );
}

.main-holder .section-1 .damage-reduction::before,
.main-holder .section-1 .initiative-modifier::before {
  --dr-ix1: calc(var(--dr-x1) + var(--dr-border-width));
  --dr-ix2: calc(var(--dr-x2) - var(--dr-border-width));
  --dr-ix3: calc(var(--dr-x3) + var(--dr-offset));

  --dr-iy1: calc(var(--dr-y1) + var(--dr-border-width));
  --dr-iy2: calc(var(--dr-y2) - var(--dr-border-width));
  --dr-iy3: calc(var(--dr-y3) - var(--dr-offset));

  background-color: var(--marvel-red);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;

  clip-path: polygon(
    var(--dr-x1) var(--dr-y1),
    var(--dr-x2) var(--dr-y1),
    var(--dr-x2) var(--dr-y2),
    var(--dr-x3) var(--dr-y2),
    var(--dr-x1) var(--dr-y3),
    var(--dr-x1) var(--dr-y1),
    /* inside */ var(--dr-ix1) var(--dr-iy1),
    var(--dr-ix1) var(--dr-iy3),
    var(--dr-ix3) var(--dr-iy2),
    var(--dr-ix2) var(--dr-iy2),
    var(--dr-ix2) var(--dr-iy1),
    var(--dr-ix1) var(--dr-iy1)
  );
}

.main-holder .section-1 .damage-reduction h5,
.main-holder .section-1 .initiative-modifier h5 {
  /*font-size: 16px;*/
  font-size: var(--font-size-small-1);
  line-height: 100%;
  text-transform: uppercase;
  text-align: center;
  margin-top: 8px;
}

.main-holder .section-1 .damage-reduction p,
.main-holder .section-1 .initiative-modifier p {
  /*font-size: 40px;*/
  font-size: var(--font-size-5);
  font-weight: bold;
  text-align: center;
  margin: 0;
  margin-top: 10px;
}

.main-holder .pregen-health,
.main-holder .pregen-focus,
.main-holder .pregen-speed {
  --dr-offset: 10px;
  --dr-size: 96px;
  --dr-size: calc(var(--font-size-6) * 2);

  background-color: transparent;
  display: grid;
  grid-template-columns: 1fr var(--dr-size) var(--dr-offset);
  grid-template-rows: var(--dr-offset) var(--dr-size) 1fr;
}

.main-holder .pregen-health {
  grid-area: health;
}

.main-holder .pregen-focus {
  grid-area: focus;
}

.main-holder .pregen-speed {
  grid-area: speed;
}

.main-holder .pregen-speed .container p {
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  margin: 0px;
}

/**/
/*Section 2*/
/**/
.main-holder .pre-gen-block .section-2 {
  display: grid;
  column-gap: 8px;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

.main-holder .pre-gen-abilities {
  --corner-size: 30px;
  --border-width: 2px;
  --offset: 1px;
  --upper-tab-size: 38%;
  --lower-tab-size: 59%;
  --x1: 0%;
  --x2: var(--upper-tab-size);
  --x3: calc(var(--x2) + var(--corner-size));
  --x4: 100%;
  --x5: calc(100% - var(--lower-tab-size));
  --x6: calc(var(--x5) - var(--corner-size));

  --y1: 0%;
  --y2: var(--corner-size);
  --y3: 100%;
  --y4: calc(100% - var(--corner-size));

  background: var(--marvel-sheet-bg-maroon);
  background: linear-gradient(
    180deg,
    var(--marvel-sheet-bg-maroon) 4%,
    var(--marvel-sheet-bg-red) 80%
  );

  margin-top: var(--v-offset);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-template-areas:
    "hd hd hd"
    "as ds cc";

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y3),
    var(--x6) var(--y4),
    var(--x1) var(--y4)
  );
}

.main-holder .pre-gen-abilities::before {
  --i-x1: calc(var(--x1) + var(--border-width));
  --i-x2: calc(var(--x2) - var(--offset));
  --i-x3: calc(var(--x3) - var(--offset));
  --i-x4: calc(var(--x4) - var(--border-width));
  --i-x5: calc(var(--x5) + var(--offset));
  --i-x6: calc(var(--x6) + var(--offset));

  --i-y1: calc(var(--y1) + var(--border-width));
  --i-y2: calc(var(--y2) + var(--border-width));
  --i-y3: calc(var(--y3) - var(--border-width));
  --i-y4: calc(var(--y4) - var(--border-width));

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--marvel-red);

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y3),
    var(--x6) var(--y4),
    var(--x1) var(--y4),
    var(--x1) var(--y1),
    /* inside */ var(--i-x1) var(--i-y1),
    var(--i-x1) var(--i-y4),
    var(--i-x6) var(--i-y4),
    var(--i-x5) var(--i-y3),
    var(--i-x4) var(--i-y3),
    var(--i-x4) var(--i-y2),
    var(--i-x3) var(--i-y2),
    var(--i-x2) var(--i-y1),
    var(--i-x1) var(--i-y1)
  );
}

.main-holder .pre-gen-abilities h3 {
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Aptifer Sans LT Pro";
  /*font-size: 32px;*/
  font-size: var(--font-size-4);
  color: white;
  grid-area: hd;
  padding-top: calc(var(--border-width) + 6px);
  padding-left: calc(var(--border-width) + 6px);
}

.main-holder .pre-gen-abilities .ability-score {
  grid-area: as;

  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(var(--corner-size) + var(--border-width) + 6px);
}

.main-holder .pre-gen-abilities .ability-score p {
  background-color: var(--marvel-sheet-bg-white);
  position: relative;
  height: 72px;
  width: 90%;
  margin: 0;
  padding-top: 10px;
  text-align: center;
  font-family: "Aptifer Sans LT Pro";
  font-size: 48px;
  font-size: var(--font-size-6);
  font-weight: bold;
  border: 2px solid rgb(122, 0, 0);
}

.main-holder .pre-gen-abilities .ability-score p::after {
  position: absolute;
  width: 100%;
  height: 24px;
  left: 0;
  bottom: 0;
  font-family: Aptifer Slab LT Pro;
  font-size: 16px;
  font-size: var(--font-size-small-1);
  font-weight: bold;
  text-transform: uppercase;
}

.main-holder .ability-score .melee::after {
  content: "Melee";
}

.main-holder .ability-score .agility::after {
  content: "Agility";
}

.main-holder .ability-score .resilience::after {
  content: "Resilience";
}

.main-holder .ability-score .vigilance::after {
  content: "Vigilance";
}

.main-holder .ability-score .ego::after {
  content: "Ego";
}

.main-holder .ability-score .logic::after {
  content: "Logic";
}

.main-holder .pre-gen-abilities .defense-score {
  grid-area: ds;

  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}

.main-holder .pre-gen-abilities .defense-score p {
  background-color: var(--marvel-sheet-bg-white);
  height: 72px;
  width: 90%;
  margin: 0;
  text-align: center;
  font-family: "Aptifer Sans LT Pro";
  font-size: 48px;
  font-size: var(--font-size-6);
  font-weight: bold;
  border: 2px solid rgb(122, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}

.main-holder .pre-gen-abilities .non-combat-checks {
  grid-area: cc;

  background-color: var(--marvel-sheet-bg-ow);
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}

.main-holder .pre-gen-abilities .non-combat-checks p {
  --corner-size: 10px;
  --border-offset: 1px;
  --border-width: 2px;

  --x-1: calc(0% + var(--corner-size));
  --x-2: calc(100% - var(--corner-size));
  --x-3: 100%;
  --x-4: 0%;

  --y-1: 0%;
  --y-2: calc(0% + var(--corner-size));
  --y-3: calc(100% - var(--corner-size));
  --y-4: 100%;

  --left-x: calc(0% + var(--corner-size));
  --right-x: calc(100% - var(--corner-size));
  --top-y: calc(0% + var(--corner-size));
  --bottom-y: calc(100% - var(--corner-size));

  background-color: var(--marvel-sheet-bg-white);
  height: 72px;
  width: 90%;
  margin: 0;
  text-align: center;
  font-family: "Aptifer Sans LT Pro";
  /*font-size: 48px;*/
  font-size: var(--font-size-6);
  font-weight: bold;
  border: 2px solid rgb(122, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  border: none;

  position: relative;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1)
  );
}

.main-holder .pre-gen-abilities .non-combat-checks p::before {
  --ix-1: calc(var(--x-1) + var(--border-offset));
  --ix-2: calc(var(--x-2) - var(--border-offset));
  --ix-3: calc(var(--x-3) - var(--border-width));
  --ix-4: calc(var(--x-4) + var(--border-width));

  --iy-1: calc(var(--y-1) + var(--border-width));
  --iy-2: calc(var(--y-2) + var(--border-offset));
  --iy-3: calc(var(--y-3) - var(--border-offset));
  --iy-4: calc(var(--y-4) - var(--border-width));

  background-color: rgb(122, 0, 0);
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;

  clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1),
    /* inside */ var(--ix-1) var(--iy-1),
    var(--ix-4) var(--iy-2),
    var(--ix-4) var(--iy-3),
    var(--ix-1) var(--iy-4),
    var(--ix-2) var(--iy-4),
    var(--ix-3) var(--iy-3),
    var(--ix-3) var(--iy-2),
    var(--ix-2) var(--iy-1),
    var(--ix-1) var(--iy-1)
  );
}

.main-holder .pre-gen-abilities div .abilities-colhead {
  background-color: transparent;
  height: 50px;
  width: fit-content;
  margin: 0;
  padding: 0px;
  padding-top: 8px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Aptifer Slab LT Pro";
  font-weight: bold;
  font-size: 16px;
  font-size: var(--font-size-small-1);
  color: white;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-holder .pre-gen-abilities .non-combat-checks .abilities-colhead {
  color: black;
}

.main-holder .pre-gen-abilities .non-combat-checks .abilities-colhead::before {
  display: none;
}

.main-holder .pregen-traits {
  --upper-tab-width: 57%;
  --corner-size: 30px;
  --border-width: 2px;
  --offset: 1px;

  --x1: 0%;
  --x2: var(--upper-tab-width);
  --x3: calc(var(--x2) + var(--corner-size));
  --x4: 100%;
  --x5: calc(var(--x4) - var(--corner-size));

  --y1: 0%;
  --y2: var(--corner-size);
  --y3: calc(100% - var(--corner-size));
  --y4: 100%;

  background-color: var(--marvel-sheet-bg-ow);
  position: relative;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-template-areas:
    "hd hd"
    "traits tags";

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4)
  );
}

.main-holder .pregen-traits::before {
  --i-x1: calc(var(--x1) + var(--border-width));
  --i-x2: calc(var(--x2) - var(--offset));
  --i-x3: calc(var(--x3) - var(--offset));
  --i-x4: calc(var(--x4) - var(--border-width));
  --i-x5: calc(var(--x5) - var(--offset));

  --i-y1: calc(var(--y1) + var(--border-width));
  --i-y2: calc(var(--y2) + var(--border-width));
  --i-y3: calc(var(--y3) - var(--offset));
  --i-y4: calc(var(--y4) - var(--border-width));

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--marvel-red);

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4),
    var(--x1) var(--y1),
    /* inside */ var(--i-x1) var(--i-y1),
    var(--i-x1) var(--i-y4),
    var(--i-x5) var(--i-y4),
    var(--i-x4) var(--i-y3),
    var(--i-x4) var(--i-y2),
    var(--i-x3) var(--i-y2),
    var(--i-x2) var(--i-y1),
    var(--i-x1) var(--i-y1)
  );
}

.main-holder .pregen-traits h3 {
  font-size: 32px;
  font-size: var(--font-size-4);
  font-family: "Aptifer Sans LT Pro";
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  padding-top: calc(var(--border-width) + 6px);
  padding-left: calc(var(--border-width) + 6px);
  grid-area: hd;
}

.main-holder .pregen-traits div > p {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 20px;
  font-size: var(--font-size-2);
  padding-left: 10px;
  margin-bottom: -16px;
}

.main-holder .pregen-traits ul {
  padding: 0;
  padding-left: 32px;
}

.main-holder .pregen-traits ul li {
  padding: 0;
  padding-bottom: 4px;
  font-size: var(--font-size-1);
}

.main-holder .pregen-traits ul li::before {
  height: 12px;
  width: 12px;
  content: "\25C6";
  color: black;
  font-size: 16px;
}

.main-holder .pregen-traits .traits {
  grid-area: traits;
}

.main-holder .pregen-traits .mv-tags {
  grid-area: tags;
  padding-right: var(--font-size-small-3);
}

/**/
/*Section 3*/
/**/
.main-holder .pre-gen-block .section-3 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  padding-top: 16px;
}

.main-holder .pre-gen-damage {
  --upper-tab-width: 32%;
  --lower-tab-width: 20%;
  --corner-size: 30px;
  --border-width: 2px;
  --offset: 1px;

  --x1: 0%;
  --x2: var(--upper-tab-width);
  --x3: calc(var(--x2) + var(--corner-size));
  --x4: 100%;
  --x5: calc(100% - var(--lower-tab-width));
  --x6: calc(var(--x5) - var(--corner-size));
  --x8: calc(0% + var(--lower-tab-width));
  --x7: calc(var(--x8) + var(--corner-size));

  --y1: 0%;
  --y2: var(--corner-size);
  --y3: 100%;
  --y4: calc(100% - var(--corner-size));

  position: relative;
  background: var(--marvel-sheet-bg-maroon);
  background: linear-gradient(
    0deg,
    var(--marvel-sheet-bg-maroon) 4%,
    var(--marvel-sheet-bg-red) 80%
  );

  padding-bottom: calc(var(--corner-size) + var(--border-width) + 8px);

  margin-top: calc(var(--v-offset) + 10px);

  /*display: grid;*/
  /*grid-template-columns: 1fr;*/
  display: flex;
  flex-direction: column;
  row-gap: 16px;

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y3),
    var(--x6) var(--y4),
    var(--x7) var(--y4),
    var(--x8) var(--y3),
    var(--x1) var(--y3)
  );
}

.main-holder .pre-gen-damage::before {
  --i-x1: calc(var(--x1) + var(--border-width));
  --i-x2: calc(var(--x2) - var(--offset));
  --i-x3: calc(var(--x3) - var(--offset));
  --i-x4: calc(var(--x4) - var(--border-width));
  --i-x5: calc(var(--x5) + var(--offset));
  --i-x6: calc(var(--x6) + var(--offset));
  --i-x7: calc(var(--x7) - var(--offset));
  --i-x8: calc(var(--x8) - var(--offset));

  --i-y1: calc(var(--y1) + var(--border-width));
  --i-y2: calc(var(--y2) + var(--border-width));
  --i-y3: calc(var(--y3) - var(--border-width));
  --i-y4: calc(var(--y4) - var(--border-width));

  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  background-color: var(--marvel-red);

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y3),
    var(--x6) var(--y4),
    var(--x7) var(--y4),
    var(--x8) var(--y3),
    var(--x1) var(--y3),
    var(--x1) var(--y1),
    /* inside */ var(--i-x1) var(--i-y1),
    var(--i-x1) var(--i-y3),
    var(--i-x8) var(--i-y3),
    var(--i-x7) var(--i-y4),
    var(--i-x6) var(--i-y4),
    var(--i-x5) var(--i-y3),
    var(--i-x4) var(--i-y3),
    var(--i-x4) var(--i-y2),
    var(--i-x3) var(--i-y2),
    var(--i-x2) var(--i-y1),
    var(--i-x1) var(--i-y1)
  );
}

.main-holder .pre-gen-damage h3 {
  /*font-size: 32px;*/
  font-size: var(--font-size-4);
  font-family: "Aptifer Sans LT Pro";
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  padding-top: calc(var(--border-width) + 6px);
  padding-left: calc(var(--border-width) + 6px);
}

.main-holder .pre-gen-damage .damage-row {
  display: flex;
  width: 100%;
  padding: 0px;
  padding-right: calc(var(--border-width) + 8px);
}

.main-holder .damage-row .damage-type {
  width: 32px;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  margin: 0px;
  text-align: center;
  font-family: Aptifer Slab LT Pro;
  font-weight: bold;
  font-size: var(--font-size-small-1);
  color: white;
}

.main-holder .damage-row > p:nth-of-type(2) {
  width: 42%;
  position: relative;
}

.main-holder .damage-row > p:nth-of-type(2)::after {
  content: "Multiplier";
  position: absolute;
  height: 100%;
  width: 100%;
  /*font-size: 10px;*/
  font-size: var(--font-size-small-3);
  text-transform: uppercase;
  text-align: center;
  /*display: flex;*/
  display: none;
  align-items: end;
  justify-content: center;
  margin-bottom: -16px;
}

.main-holder .damage-row > p:nth-of-type(3) {
  width: calc(20% - 32px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 48px;
  padding: 0px;
  margin: 0px;
}

.main-holder .damage-row > p:nth-of-type(4) {
  width: 38%;
  position: relative;
}

.main-holder .damage-row > p:nth-of-type(4)::after {
  content: "Ability";
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: end;
  justify-content: center;
  margin-bottom: -16px;
}

.main-holder .damage-row .damage-box {
  background-color: white;
  width: 45%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(122, 0, 0);
  margin: 0;
  font-family: "Aptifer Sans LT Pro";
  /*font-size: 48px;*/
  font-size: var(--font-size-6);
  font-weight: bold;
  padding-bottom: 4px;
}

.main-holder .pregen-powers {
  background-color: transparent;
  display: grid;
  grid-template-rows: var(--font-size-4) auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hd hd"
    "power-1 power-2";
}

.main-holder .pregen-powers h3 {
  grid-area: hd;
  /*height: 32px;*/
  height: var(--font-size-4);
  /*font-size: 32px;*/
  font-size: var(--font-size-4);
  font-family: "Aptifer Sans LT Pro";
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  position: relative;
}

.main-holder .pregen-powers h3::after {
  --border-size: 3px;
  --tab-size: 31%;
  --corner-size: 30px;
  --offset: 1px;

  --x1: calc(0% + var(--border-size));
  --x2: var(--tab-size);
  --x3: calc(var(--x2) + var(--corner-size));
  --x4: 100%;
  --x5: calc(var(--x3) + var(--offset));
  --x6: calc(var(--x2) + var(--offset));

  --y1: calc(100% - var(--border-size));
  --y2: 0%;
  --y3: var(--border-size);
  --y4: 100%;

  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 0;
  left: 0;

  background-color: var(--marvel-red);

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y3),
    var(--x6) var(--y4),
    var(--x1) var(--y4)
  );
}

.main-holder .pregen-powers div > p {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 20px;
  padding-left: 10px;
  margin-top: 0px;
  margin-bottom: -16px;
}

.main-holder .pregen-powers ul {
  padding: 0;
  padding-left: 32px;
}

.main-holder .pregen-powers ul li {
  padding: 0;
  padding-bottom: 4px;
  font-size: var(--font-size-1);
}

.main-holder .pregen-powers ul li::before {
  height: 12px;
  width: 12px;
  content: "\25C6";
  color: black;
  font-size: 16px;
}

.main-holder .pregen-powers div:nth-of-type(1) {
  grid-area: power-1;
}

.main-holder .pregen-powers div:nth-of-type(2) {
  grid-area: power-2;
}

.main-holder .pregen-powers .Pre-Gen-Box-Text-Subhead {
  padding-top: 8px;
  font-size: var(--font-size-2);
}

/**/
/*Section 4*/
/**/

.main-holder .pregen-biography {
  --upper-tab-width: 23%;
  --corner-size: 30px;
  --border-width: 2px;
  --offset: 1px;

  --x1: 0%;
  --x2: var(--upper-tab-width);
  --x3: calc(var(--x2) + var(--corner-size));
  --x4: 100%;
  --x5: calc(var(--x4) - var(--corner-size));

  --y1: 0%;
  --y2: var(--corner-size);
  --y3: calc(100% - var(--corner-size));
  --y4: 100%;

  background-color: var(--marvel-sheet-bg-ow);
  position: relative;
  padding: calc(var(--border-width) + 6px);
  padding-top: 0px;
  margin-top: 16px;

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4)
  );
}

.main-holder .pregen-biography::before {
  --i-x1: calc(var(--x1) + var(--border-width));
  --i-x2: calc(var(--x2) - var(--offset));
  --i-x3: calc(var(--x3) - var(--offset));
  --i-x4: calc(var(--x4) - var(--border-width));
  --i-x5: calc(var(--x5) - var(--offset));

  --i-y1: calc(var(--y1) + var(--border-width));
  --i-y2: calc(var(--y2) + var(--border-width));
  --i-y3: calc(var(--y3) - var(--offset));
  --i-y4: calc(var(--y4) - var(--border-width));

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--marvel-red);

  clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4),
    var(--x1) var(--y1),
    /* inside */ var(--i-x1) var(--i-y1),
    var(--i-x1) var(--i-y4),
    var(--i-x5) var(--i-y4),
    var(--i-x4) var(--i-y3),
    var(--i-x4) var(--i-y2),
    var(--i-x3) var(--i-y2),
    var(--i-x2) var(--i-y1),
    var(--i-x1) var(--i-y1)
  );
}

.main-holder .pregen-biography h3 {
  /*font-size: 32px;*/
  font-size: var(--font-size-4);
  font-family: "Aptifer Sans LT Pro";
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  padding-top: calc(var(--border-width) + 6px);
}

.main-holder .pregen-biography p {
    font-size: var(--font-size-1);
}

.main-holder .pregen-biography .Pre-Gen-Box-Text-Subhead {
  margin-bottom: 2px;
  font-size: 20px;
}

.main-holder .pregen-biography .Pre-Gen-Biography-Paragraphs {
  margin-top: 0px;
}

/*Image*/
.main-holder .image-juggcov {
  max-width: 465px;
  width: 100%;
}

.main-holder .image-chaoswarflcov-resize {
  max-width: 505px;
  width: 100%;
}

.main-holder .image-fourflcov {
  max-width: 425px;
  width: 100%;
}

.main-holder .image-nightcrawler {
  max-width: 485px;
  width: 100%;
}

.main-holder .image-powersofxdc {
  max-width: 550px;
  width: 100%;
}

.main-holder .image-capmarvcol {
  max-width: 545px;
  width: 100%;
}

.main-holder .image-thingcol {
  max-width: 490px;
  width: 100%;
}

.main-holder .image-capmarvlifedc {
  max-width: 480px;
  width: 100%;
}

.main-holder .image-shehulkdcdowling-resize {
  max-width: 535px;
  width: 100%;
}

.main-holder .image-wolvwxcflcov-resize {
  max-width: 515px;
  width: 100%;
}

.main-holder .image-newxcvr-resize- {
  max-width: 435px;
  width: 100%;
}

.main-holder .image-fcbdsecwars-masked {
  max-width: 440px;
  width: 100%;
}

.main-holder .image-fcbdsecwars-masked- {
  max-width: 420px;
  width: 100%;
}

.main-holder .image-timelesscov {
  max-width: 500px;
  width: 100%;
}

.main-holder .image-ffcolrevised {
  max-width: 680px;
  width: 100%;
}

.main-holder .image-wastelwolvcol {
  max-width: 470px;
  width: 100%;
}

.main-holder .image-asmcol {
  max-width: 480px;
  width: 100%;
}

.main-holder .image-kazarloslcvr-resize {
  max-width: 425px;
  width: 100%;
}

.main-holder .image-gwenpoolcov-resize {
  max-width: 440px;
  width: 100%;
}

.main-holder .image-mightavncol {
  max-width: 550px;
  width: 100%;
}

.main-holder .image-avenlokiuncol-resize {
  max-width: 550px;
  width: 100%;
}

.main-holder .image-drscol {
  max-width: 650px;
  width: 100%;
}

.main-holder .normal h3 {
    margin-top: var(--font-size-4);
}

@media only screen and (max-width: 660px) {
  p {
    line-height: 24px;
  }

  :root {
    --gw-p-font-size: 16px;
  }
}

.main-holder .image-with-subtitle-right {
    margin-bottom: 10px;
    margin-left: 10px;
}

.main-holder .image-with-subtitle-center {
    margin-top: var(--font-size-1);
}

.main-holder .image-with-subtitle-center p {
    margin-bottom: -10px;
}

.image-so {
  shape-margin: 8px;
  margin: 0px;
  padding: 0px;
  position: relative;
  max-width: 100%;
}


.image-so > p {
    opacity: 0.9;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
      font-family: Aptifer Sans LT Pro;
          font-weight: bold;
  text-transform: uppercase;
  font-size: var(--font-size-small-2);
  padding: 2px 10px 0px 10px;
  margin-left: auto;
  margin-right: auto;
  color: var(--marvel-red);
background-color: var(--marvel-sheet-bg-white);
  background-size: auto 100%;
  background-position: 50%;
  box-shadow: 0px 2px 12px rgb(0 0 0 / 20%);
  z-index: 1001;
  border: 2px solid var(--marvel-red);
  border-radius: 10px;
}

.image-so.alt > p {
  background-image: none;
  color: white;
  box-shadow: none;
}

.main-holder .image-with-subtitle-left {
    margin-right: 10px;
    margin-top: 10px;
}

@media only screen and (max-width: 600px) {
  .book-image-right {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .force-image-right {
    float: none;
    display: block;
    margin: 0 auto;
  }
  
  .force-image-center {
      float: none;
      display: block;
  }

  .image-with-subtitle-right {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .book-image-left {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .force-image-left {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .image-with-subtitle-left {
    float: none;
    display: block;
    margin: 0 auto;
  }
  
  .main-holder .image-so > p {
      position: static;
  }
}

@media only screen and (max-width: 800px) {
  .main-holder h1.green {
    height: 200px;
    line-height: var(--font-size-8);
  }
}

@media only screen and (max-width: 700px) {
  :root {
    --base-font: 16px;
  }

  .main-holder .color-bg::after {
    width: 45%;
  }

  .main-holder h1.green {
    height: 160px;
    line-height: var(--font-size-8);
  }
}

@media only screen and (max-width: 600px) {
  :root {
    --base-font: 14px;
  }

  .ch-image::after {
    bottom: var(--font-size-1);
  }
}

@media only screen and (max-width: 590px) {
  .main-holder h1.teal {
    height: 160px;
    line-height: var(--font-size-8);
  }
}

@media only screen and (max-width: 540px) {
  .main-holder h1.pink {
    height: 160px;
    line-height: var(--font-size-8);
  }
}

@media only screen and (max-width: 500px) {
  .main-holder .power-set-block {
    --bottom-corner: calc(var(--font-size-7) * 2);
  }
}

@media only screen and (max-width: 450px) {
  .main-holder h1.blue {
    height: 160px;
    line-height: var(--font-size-8);
  }
}

/**/
/*Test*/
/**/



/*Character Sheet Queries*/

@media only screen and (max-width: 800px) {

.main-holder .pre-gen-block .section-1 .image p {
    margin: 0px;
}

.main-holder .pre-gen-block .section-1 > div:nth-child(2) {

grid-auto-rows: calc(var(--font-size-8) * 2) auto auto auto;

}

.main-holder .pregen-speed .container {
    padding-bottom: 8px;
}

.main-holder .pre-gen-block .section-2 {
  display: grid;
  column-gap: 8px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

.main-holder .pre-gen-abilities {
  --upper-tab-size: 144px;
  margin-top: var(--font-size-1);
}

.main-holder .pregen-traits {
    --upper-tab-width: 220px;
    margin-top: var(--font-size-1);
}

.main-holder .pre-gen-block .section-3 {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  column-gap: 8px;
  padding-top: 0px;
}

.main-holder .pre-gen-damage {
    --upper-tab-width: 130px;
    margin-top: var(--font-size-1);
}

.main-holder .pregen-powers {
    margin-top: var(--font-size-1);
}

.main-holder .pregen-biography {
    --upper-tab-width: 180px;
}


}


@media only screen and (max-width: 600px) {

    .main-holder .pregen-rank p {
  margin: var(--font-size-2) 0px 0px 0px;
}

}



@media only screen and (max-width: 500px) {
        .main-holder .pre-gen-block .section-1 {
  --overlap: 16px;
  --artist-width: 30px;
  display: grid;
  grid-template-columns: auto;
    grid-template-rows: auto auto;
}

.main-holder .pre-gen-block .section-1 .image {

  grid-column: 1;
  grid-row: 1;

}

.main-holder .pre-gen-block .section-1 > div:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--font-size-small-3);
}


.main-holder .pregen-rank p {
    margin-top: 16px;
}
}

.Front-Matter_Credits strong {
    color: var(--marvel-red);
    font-family: Aptifer Sans LT Pro;
}

.MarvelCredits {
    text-align: center;
}

.tech-reliance {
    content: '';
    background-image: url(https://content.demiplane.com/compendium/marvelrpg/enter-hydra/css/01-04-Tech-Reliance.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 9px 9px 5px 9px;
    margin-left: 5px;
}

.magic-reliance {
     content: '';
    background-image: url(https://content.demiplane.com/compendium/marvelrpg/x-men-expansion/j58avDSIkgcBXGg2/11-13-Magic_Reliance.png?format=webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 9px 9px 5px 9px;
    margin-left: 5px;
}


   /**/
/*Vehicle Sheet*/
/**/

.main-holder .vehicle-block {
    margin-bottom: var(--font-size-6);
    padding-bottom: var(--font-size-3);
}

.main-holder .vehicle-name {
    font-family: Aptifer Sans LT Pro Bold;
    font-size: var(--font-size-3);
    text-transform: uppercase;
}

.vehicle-section-1 {
	--overlap: 16px;
	--artist-width: 30px;
	display: grid;
	grid-template-columns: 75%
    var(--overlap)
    calc(30% - var(--overlap));
    margin-bottom: -30px;
}

.main-holder .vehicle-section-1 .image {
	--offset: 4px;
	--border-width: 6px;
	--corner-size: 20px;
	--x1: 0%;
	--x2: 100%;
	--x3: calc(100% - var(--corner-size));
	--y1: 0%;
	--y2: calc(100% - var(--corner-size));
	--y3: 100%;
	position: relative;
	width: 100%;
	height: min-content;
	display: grid;
	grid-column: 1 / 3;
	grid-row: 1;
	grid-template-areas: "artist art";
	grid-template-columns: 30px 1fr;
	clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x2) var(--y2),
    var(--x3) var(--y3),
    var(--x1) var(--y3),
    var(--x1) var(--y1)
  );
}

.main-holder .vehicle-section-1 .image::before {
	--x1: var(--artist-width);
	--ix1: calc(var(--x1) + var(--border-width));
	--ix2: calc(var(--x2) - var(--border-width));
	--ix3: calc(var(--x3) - var(--offset));
	--iy1: calc(var(--y1) + var(--border-width));
	--iy2: calc(var(--y2) - var(--offset));
	--iy3: calc(var(--y3) - var(--border-width));
	background-color: var(--marvel-bg-green);
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 2;
	clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x2) var(--y2),
    var(--x3) var(--y3),
    var(--x1) var(--y3),
    var(--x1) var(--y1),
    /* inside */ var(--ix1) var(--iy1),
    var(--ix1) var(--iy3),
    var(--ix3) var(--iy3),
    var(--ix2) var(--iy2),
    var(--ix2) var(--iy1),
    var(--ix1) var(--iy1)
  );
}

.main-holder .vehicle-section-1 .image img {
	grid-area: art;
	margin: 0px;
	height: 100%;
}

.main-holder .vehicle-section-1 .image p {
	grid-area: artist;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin: 10px;
	margin-bottom: 16px;
	width: var(--artist-width);
	font-size: var(--font-size-small-2);
	line-height: 100%;
}

.main-holder .eva-artist {
    margin: 5px !important;
    margin-bottom: 16px !important;
}

.main-holder .vehicle-section-1 .image {
    max-height: 400px;
}

.main-holder .vehicle-health {
	grid-area: health;
}
 
 .main-holder .vehicle-health, .main-holder .vehicle-speed {
	--dr-offset: 10px;
	--dr-size: 96px;
	--dr-size: calc(var(--font-size-6) * 2);
	background-color: transparent;
	display: grid;
	grid-template-columns: 1fr var(--dr-size) var(--dr-offset);
	grid-template-rows: var(--dr-offset) var(--dr-size) 1fr;
	
}

.main-holder .vehicle-section-1 .container {
	
	background-color: var(--marvel-sheet-bg-white);
	--corner-size: 20px;
	--border-offset: 1px;
	--border-width: 2px;
	--x-1: calc(0% + var(--corner-size));
	--x-2: calc(100% - var(--corner-size));
	--x-3: 100%;
	--x-4: 0%;
	--y-1: 0%;
	--y-2: calc(0% + var(--corner-size));
	--y-3: calc(100% - var(--corner-size));
	--y-4: 100%;
	--left-x: calc(0% + var(--corner-size));
	--right-x: calc(100% - var(--corner-size));
	--top-y: calc(0% + var(--corner-size));
	--bottom-y: calc(100% - var(--corner-size));
	grid-column: 1 / 3;
	grid-row: 2 / 4;
	text-align: center;
	padding-right: var(--dr-size);
	padding-left: var(--corner-size);
	position: relative;
	clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1)
  );
  padding-top: 10px;
  margin-left:-40px;
  
}
 
 .main-holder .vehicle-section-1 .vehicle-damage-reduction {
	--dr-offset: 1px;
	--dr-border-width: 2px;
	--dr-corner-size: 20px;
	--dr-x1: 0%;
	--dr-x2: 100%;
	--dr-x3: calc(0% + var(--dr-corner-size));
	--dr-y1: 0%;
	--dr-y2: 100%;
	--dr-y3: calc(100% - var(--dr-corner-size));
	background-color: var(--marvel-sheet-bg-white);
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	position: relative;
	clip-path: polygon(
    var(--dr-x1) var(--dr-y1),
    var(--dr-x2) var(--dr-y1),
    var(--dr-x2) var(--dr-y2),
    var(--dr-x3) var(--dr-y2),
    var(--dr-x1) var(--dr-y3),
    var(--dr-x1) var(--dr-y1)
  );
}

.main-holder .vehicle-section-1 .container::before {
	--ix-1: calc(var(--x-1) + var(--border-offset));
	--ix-2: calc(var(--x-2) - var(--border-offset));
	--ix-3: calc(var(--x-3) - var(--border-width));
	--ix-4: calc(var(--x-4) + var(--border-width));
	--iy-1: calc(var(--y-1) + var(--border-width));
	--iy-2: calc(var(--y-2) + var(--border-offset));
	--iy-3: calc(var(--y-3) - var(--border-offset));
	--iy-4: calc(var(--y-4) - var(--border-width));
	background-color: var(--marvel-bg-green);
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	clip-path: polygon(
    var(--x-1) var(--y-1),
    var(--x-2) var(--y-1),
    var(--x-3) var(--y-2),
    var(--x-3) var(--y-3),
    var(--x-2) var(--y-4),
    var(--x-1) var(--y-4),
    var(--x-4) var(--y-3),
    var(--x-4) var(--y-2),
    var(--x-1) var(--y-1),
    /* inside */ var(--ix-1) var(--iy-1),
    var(--ix-4) var(--iy-2),
    var(--ix-4) var(--iy-3),
    var(--ix-1) var(--iy-4),
    var(--ix-2) var(--iy-4),
    var(--ix-3) var(--iy-3),
    var(--ix-3) var(--iy-2),
    var(--ix-2) var(--iy-1),
    var(--ix-1) var(--iy-1)
  );
}

.main-holder .vehicle-section-1 .container h5 {
	text-transform: uppercase;
	font-size: 16px;
	font-size: var(--font-size-1);
}

.main-holder .vehicle-section-1 .container p {
	font-size: 48px;
	font-size: var(--font-size-6);
	font-weight: bold;
	margin-top: var(--font-size-small-1);
}

.main-holder .vehicle-section-1 .vehicle-damage-reduction::before {
	--dr-ix1: calc(var(--dr-x1) + var(--dr-border-width));
	--dr-ix2: calc(var(--dr-x2) - var(--dr-border-width));
	--dr-ix3: calc(var(--dr-x3) + var(--dr-offset));
	--dr-iy1: calc(var(--dr-y1) + var(--dr-border-width));
	--dr-iy2: calc(var(--dr-y2) - var(--dr-border-width));
	--dr-iy3: calc(var(--dr-y3) - var(--dr-offset));
	background-color: var(--marvel-bg-green);
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	clip-path: polygon(
    var(--dr-x1) var(--dr-y1),
    var(--dr-x2) var(--dr-y1),
    var(--dr-x2) var(--dr-y2),
    var(--dr-x3) var(--dr-y2),
    var(--dr-x1) var(--dr-y3),
    var(--dr-x1) var(--dr-y1),
    /* inside */ var(--dr-ix1) var(--dr-iy1),
    var(--dr-ix1) var(--dr-iy3),
    var(--dr-ix3) var(--dr-iy2),
    var(--dr-ix2) var(--dr-iy2),
    var(--dr-ix2) var(--dr-iy1),
    var(--dr-ix1) var(--dr-iy1)
  );

}

.main-holder .vehicle-section-1 .vehicle-damage-reduction h5 {
	/* font-size: 16px; */
	font-size: var(--font-size-small-1);
	line-height: 100%;
	text-transform: uppercase;
	text-align: center;
	margin-top: 8px;
}

.main-holder .vehicle-section-1 .vehicle-damage-reduction p {
	/* font-size: 40px; */
	font-size: var(--font-size-5);
	font-weight: bold;
	text-align: center;
	margin: 0;
	margin-top: 10px;
}
 
 .main-holder .vehicle-speed {
	grid-area: speed;
}

.main-holder .vehicle-speed .container {
    	background-color: var(--marvel-sheet-bg-white);
    	padding: 20px;
}
 
 .main-holder .vehicle-speed .container p {
	font-size: 16px;
	font-weight: normal;
	text-align: left;
	margin: 0px;
}

.main-holder .pre-gen-block .vehicle-section-3 {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	column-gap: 8px;
	padding-top: 16px;
}

.main-holder .vehicle-powers {
	background-color: transparent;
	display: grid;
	grid-template-rows: var(--font-size-4) auto;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "hd hd"
    "power-1 power-2";
}

.main-holder .vehicle-block .powers-header {
	grid-area: hd;
	/* height: 32px; */
	height: var(--font-size-4);
	/* font-size: 32px; */
	font-size: var(--font-size-2);
	font-family: "Aptifer Sans LT Pro";
	font-weight: bold;
	text-transform: uppercase;
	color: black;
	position: relative;
}

.main-holder .vehicle-powers div:nth-of-type(1) {
	grid-area: power-1;
}

.main-holder .vehicle-powers div > p {
	font-variant: small-caps;
	font-weight: bold;
	font-size: 20px;
	padding-left: 10px;
	margin-top: var(--font-size-5);
	margin-bottom: -16px;
}

.main-holder .vehicle-powers ul {
	padding: 0;
	padding-left: 32px;
}

.main-holder .vehicle-powers li:before {
  height: 12px;
  width: 12px;
  content: "\25C6";
  color: black;
  font-size: 16px;
}

.main-holder .vehicle-powers li {
    margin-bottom: 3px;
}

.main-holder .vehicle-biography {
	--upper-tab-width: 23%;
	--corner-size: 30px;
	--border-width: 2px;
	--offset: 1px;
	--x1: 0%;
	--x2: var(--upper-tab-width);
	--x3: calc(var(--x2) + var(--corner-size));
	--x4: 100%;
	--x5: calc(var(--x4) - var(--corner-size));
	--y1: 0%;
	--y2: var(--corner-size);
	--y3: calc(100% - var(--corner-size));
	--y4: 100%;
	background-color: var(--marvel-sheet-bg-white);
	position: relative;
	padding: calc(var(--border-width) + 6px);
	padding-top: 0px;
	margin-top: 6px;
	clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4)
  );
}

.main-holder .vehicle-biography::before {
	--i-x1: calc(var(--x1) + var(--border-width));
	--i-x2: calc(var(--x2) - var(--offset));
	--i-x3: calc(var(--x3) - var(--offset));
	--i-x4: calc(var(--x4) - var(--border-width));
	--i-x5: calc(var(--x5) - var(--offset));
	--i-y1: calc(var(--y1) + var(--border-width));
	--i-y2: calc(var(--y2) + var(--border-width));
	--i-y3: calc(var(--y3) - var(--offset));
	--i-y4: calc(var(--y4) - var(--border-width));
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--marvel-bg-green);
	clip-path: polygon(
    var(--x1) var(--y1),
    var(--x2) var(--y1),
    var(--x3) var(--y2),
    var(--x4) var(--y2),
    var(--x4) var(--y3),
    var(--x5) var(--y4),
    var(--x1) var(--y4),
    var(--x1) var(--y1),
    /* inside */ var(--i-x1) var(--i-y1),
    var(--i-x1) var(--i-y4),
    var(--i-x5) var(--i-y4),
    var(--i-x4) var(--i-y3),
    var(--i-x4) var(--i-y2),
    var(--i-x3) var(--i-y2),
    var(--i-x2) var(--i-y1),
    var(--i-x1) var(--i-y1)
  );
}

.main-holder .vehicle-biography h3 {
	font-size: var(--font-size-3);
	font-family: "Aptifer Sans LT Pro";
	font-weight: bold;
	text-transform: uppercase;
	color: black;
	padding-top: calc(var(--border-width) + 6px);
}

.main-holder .vehicle-biography p {
	font-size: var(--font-size-1);
	padding: 5px;
}

/*Vehicle Sheet Queries*/

@media only screen and (max-width: 800px) {
  .main-holder .vehicle-block .vehicle-section-1 .image p {
    margin: 0px;
  }

  .main-holder .vehicle-block .vehicle-section-1 > div:nth-child(2) {
    grid-auto-rows: calc(var(--font-size-8) * 2) auto auto auto;
  }

  .main-holder .vehicle-speed .container {
    padding-bottom: 8px;
  }

  .main-holder .vehicle-block .vehicle-section-3 {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    column-gap: 8px;
    padding-top: 0px;
  }

  
  .main-holder .vehicle-powers {
    margin-top: var(--font-size-1);
  }

  .main-holder .vehicle-biography {
    --upper-tab-width: 180px;
  }
}



@media only screen and (max-width: 500px) {
  .main-holder .vehicle-block .vehicle-section-1 {
    --overlap: 16px;
    --artist-width: 30px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }

  .main-holder .vehicle-block .vehicle-section-1 .image {
    grid-column: 1;
    grid-row: 1;
  }

  .main-holder .vehicle-block .vehicle-section-1 > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--font-size-small-3);
  }
}

.main-holder .force-image-right {
    margin-bottom: 20px;
}

/* Henchmen */

.main-holder .hench-block {
    
    
    
    & .hench-section-1 {
        grid-template-columns: 40% var(--overlap) calc(15% - var(--overlap)) 45%;
        max-height: 470px;
        
        & .pregen-image {
            
            max-height: 350px;
        
        & img {
            height: 390px;
        }
        }
        
        & div:has(.hench-rank) {
           margin-top: -20px;
        
        
        & .hench-rank {
            width: 110px;
            
            & .container {
                padding: 10px 10px;
            }
            
          & p {
              font-size: var(--font-size-5);
          }
        }
        
        & .hench-health, .hench-focus {
            
            width: fit-content;
            
            & .container {
                padding: 10px 10px;
            }
            
            & p {
                font-size: var(--font-size-4);
            }
            
            & .hench-dr {
                font-size: var(--font-size-1);
                padding: 0px;
            }
            
            & h5 {
                padding: 10px;
            }
        }
        
         
        }
        
         & .hench-damage {
             
             --upper-tab-width: 100%;
             height: fit-content;
             margin: 10px 0px;
             --corner-size: 0%;
             padding: 10px 0px 15px;
             
        }
    }
    
    & .hench-section-2 {
        
        
        & .hench-abilities {
            --corner-size: 0px;
            grid-template-columns: 1fr 1fr
         
        }
         & .hench-traits{
    background-color: transparent;
    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: auto;
    
    & > div {
        height: fit-content;
        padding: 0px 10px;
        
        & p strong {
            font-family: "Aptifer Sans LT Pro";
            text-transform: uppercase;
            font-size: var(--font-size-2);
        }
        
        & ul li:before {
            height: 12px;
    width: 12px;
    content: "\25C6";
    color: black;
    font-size: 16px;
        }
    }

}
    }
}

@media only screen and (max-width: 800px) {
    .main-holder .hench-block {
        border-bottom: thick solid var(--marvel-red);
        padding-bottom: 20px;
        margin: auto;
        
        & .hench-section-1 {
            grid-template-columns: 70% var(--overlap) calc(30% - var(--overlap));
            grid-template-rows: 1fr 1fr;
            max-width: 500px;
            margin: auto;
            max-height: none;
            
            & .hench-damage {
                width: 130%;
                max-width: 500px;
                margin: 0px auto;
            }
        }
        
        & .hench-section-2 {
            max-width: 500px;
            margin: -10px auto;
        }
        
    }
}

@media only screen and (max-width: 500px) {
    .main-holder .hench-block {
        border-bottom: thick solid var(--marvel-red);
        padding-bottom: 20px;
        margin: auto;
        
        & .hench-section-1 {
            grid-template-columns: 80% var(--overlap) calc(20% - var(--overlap));
            grid-template-rows: 1fr 1fr;
            max-width: 500px;
            margin: auto;
            max-height: none;
            
            & .pregen-image {
                min-width: 250px;
            }
            
            & .pregen-image img {
                min-width: 300px;
                max-height: 340px;
            }
            
            & > div:has(.hench-rank) {
                grid-column: 2;
                grid-row: 1;
                margin-left: -20px;
                min-width: 150px;
                
                & .container {
                    
                    
                    & h5 {
                        margin: 0px;
                    }
                    
                    & p {
                        margin: 0px;
                    }
                }
                
                & .hench-rank {
                    max-width: 90px;
                }
                
                & .hench-rank p {
                    font-size: var(--font-size-6) !important;
                }
                }
            }
            
            & .hench-damage {
                width: 125% !important;
                max-width: 350px !important;
                margin: 0px auto;
                grid-column: 1;
                grid-row: 2;
            }
        }
        
        & .hench-section-2 {
            max-width: 350px;
            margin: -10px auto;
        }
        
    }


.main-holder .demiplane-credits {
    border-top: thick solid var(--marvel-red);
    & h2 {
        font-size: var(--font-size-2);
        text-align: center;
        display: block;
       max-width: 100%;
       margin-top: 30px;
        
        &:after {
            display: none;
        }
    }
    
    & p {
        text-align: center;
    }
}
/*Image Wizard Styles*/
.image-edgesvccol {
  width: 799.992px;
  shape-outside: polygon(-0.98% -0.40%, 102.31% 0.44%, 99.65% 102.44%, -10.98% 105.15%);
}

.image-edgesvccol > p {
    left: 448.1953125px;
    top: 460.3671875px;
}

.image-spidersocietyscol {
  width: 800px;
  shape-outside: polygon(0.06% 0.00%, 101.18% -0.22%, 100.31% 102.20%, -1.32% 108.77%);
}
.image-spidersocietyscol > p {
  left: 510.4478759765625px;
  top: 60.010406494140625px;
}
.image-newavncol {
  width: 800px;
  shape-outside: polygon(0.04% 0.16%, 102.17% -0.18%, 100.79% 95.35%, -5.58% 91.74%);
}
.image-newavncol > p {
  left: 6.3333282470703125px;
  top: 468.9375px;
}
.image-foesasmdc {
  width: 409.992px;
  shape-outside: polygon(14.15% -0.01%, 0.00% 12.80%, 0.98% 46.96%, 9.76% 76.77%, 1.46% 88.77%, 17.07% 99.48%, 102.68% 100.76%, 98.29% -3.12%);
}
.image-foesasmdc > p {
  left: 118px;
  top: 568.66015625px;
}

.image-asmdc {
  width: 799.992px;
  shape-outside: polygon(-0.67% -0.06%, 0.20% 99.65%, 18.45% 99.36%, 102.08% 68.01%, 101.20% -2.38%);
}
.image-asmdc > p {
  left: 659.61328125px;
  top: -0.3828125px;
}
.image- {
  width: 394.992px;
  shape-outside: polygon(19.81% -0.01%, -7.48% 101.90%, 113.23% 101.97%, 101.84% -2.93%);
}
.image- > p {
  left: 49.25px;
  top: 708.91015625px;
}
.image-ultsmvcol-resize {
  width: 420px;
  shape-outside: polygon(104.70% -0.93%, 73.09% 27.59%, 68.51% 55.70%, 54.94% 98.77%, 18.75% 103.49%, -0.30% 71.93%, -0.53% -1.82%);
}
.image-ultsmvcol-resize > p {
  left: 0px;
  top: 0px;
}
.image-mmsmcol {
  width: 799.992px;
  shape-outside: polygon(-0.04% -0.64%, 102.71% -0.35%, 101.21% 76.54%, -1.92% 79.16%);
}
.image-mmsmcol > p {
  left: 414.9453125px;
  top: 472.6171875px;
}
.image-smcol {
  width: 799.992px;
  shape-outside: polygon(-1.03% -0.17%, 102.91% -0.17%, 101.91% 104.42%, -3.22% 101.62%);
}
.image-smcol > p {
  left: 11.73828125px;
  top: -5.08984375px;
}
.image-spgwenbheroeslayers {
  width: 799.992px;
  shape-outside: polygon(0.34% -0.01%, 102.66% -0.46%, 101.16% 102.74%, -0.72% 102.96%, -0.97% 1.22%);
}
.image-spgwenbheroeslayers > p {
  left: 651.73828125px;
  top: 575.41015625px;
}
.image-spgwenbcol {
  width: 799.992px;
  shape-outside: polygon(0.34% 0.16%, 101.84% -1.24%, 100.59% 95.28%, -1.28% 92.14%);
}
.image-spgwenbcol > p {
  left: 11.73828125px;
  top: -7.08984375px;
}
.image-webwarriveravar {
  width: 799.992px;
  shape-outside: polygon(0.09% -0.39%, 101.59% -0.30%, 101.22% 103.00%, -1.41% 102.33%);
}
.image-webwarriveravar > p {
  left: 536.73828125px;
  top: -6.08984375px;
}
.image-sm-resize {
  width: 429.996px;
  shape-outside: polygon(-2.15% -0.83%, 105.06% -0.42%, 99.01% 32.23%, 92.27% 72.60%, 60.52% 69.12%, 42.38% 72.67%, -9.36% 107.13%);
}
.image-sm-resize > p {
  left: -1.25390625px;
  top: -11.08984375px;
}
.image-mohsmcol {
  width: 769.992px;
  shape-outside: polygon(0.75% 0.38%, 101.40% -0.14%, 101.27% 72.73%, -0.55% 70.37%);
}
.image-mohsmcol > p {
  left: 448.73828125px;
  top: 182.91015625px;
}
.image-spidersocietycol-resize {
  width: 399.996px;
  shape-outside: polygon(92.19% 0.23%, 91.19% 17.68%, 95.44% 24.90%, 92.44% 41.26%, 83.19% 45.48%, 83.44% 75.74%, 105.94% 103.18%, -4.81% 101.61%, -1.56% -1.70%);
}
.image-spidersocietycol-resize > p {
  left: 4.74609375px;
  top: 780.41015625px;
}
.image-silkcol-resize {
  width: 459.996px;
  shape-outside: polygon(77.77% 0.29%, 71.69% 20.47%, 60.37% 27.20%, 60.58% 38.35%, 76.89% 57.77%, 96.47% 60.53%, 94.95% 76.68%, 103.43% 84.51%, 102.99% 104.84%, -4.40% 106.80%, -1.57% -2.87%);
}
.image-silkcol-resize > p {
  left: 12.7578125px;
  top: 610.16015625px;
}
.image-smramos-resize {
  width: 495px;
  shape-outside: polygon(-1.18% -0.04%, 23.27% 60.46%, 6.70% 64.34%, 7.31% 78.50%, 34.18% 102.01%, 109.13% 56.35%, 102.66% -6.44%);
}
.image-smramos-resize > p {
  left: 183.18359375px;
  top: -7.19140625px;
}
.image-supsmretdc {
  width: 799.992px;
  shape-outside: polygon(-0.67% -0.63%, 101.71% -0.28%, 101.21% 103.22%, -2.29% 103.22%);
}
.image-supsmretdc > p {
  left: 506.66796875px;
  top: -1.3828125px;
}
.image-ultsmflcovmerged {
  width: 799.992px;
  shape-outside: polygon(-0.04% 0.15%, 102.49% -0.51%, 101.12% 103.45%, -2.26% 101.54%);
}
.image-ultsmflcovmerged > p {
  left: 4.66796875px;
  top: 998.1171875px;
}
.image-ultsmcol {
  width: 799.992px;
  shape-outside: polygon(-0.47% -0.59%, 103.16% 0.72%, 101.91% 99.94%, -2.97% 98.89%);
}
.image-ultsmcol > p {
  left: 461.23828125px;
  top: -6.24609375px;
}
.image-aspigflcov-resize {
  width: 799.992px;
  shape-outside: polygon(0.33% -0.03%, 101.33% 25.57%, 101.46% 103.53%, -3.04% 101.70%);
}
.image-aspigflcov-resize > p {
  left: 19.66796875px;
  top: 1046.3671875px;
}
.image-spdhaminhyuk-leedc {
  width: 394.992px;
  shape-outside: polygon(82.07% 0.74%, 78.78% 20.80%, 2.07% 23.19%, 1.56% 46.91%, 18.53% 76.57%, 58.27% 83.10%, 59.79% 106.51%, 104.35% 102.53%, 99.79% 0.42%);
}
.image-spdhaminhyuk-leedc > p {
  left: 243.1796875px;
  top: 558.8671875px;
}
.image-smindiaasrarvar {
  width: 405px;
  shape-outside: polygon(14.61% 0.25%, 9.67% 23.52%, 2.02% 27.21%, 2.76% 43.24%, 6.22% 50.79%, -2.92% 106.61%, 105.48% 103.68%, 102.76% -3.60%);
}
.image-smindiaasrarvar > p {
  left: 96.18359375px;
  top: 597.8671875px;
}
.image-smnoirdc {
  width: 799.992px;
  shape-outside: polygon(0.08% 0.21%, 100.58% -0.31%, 102.83% 104.07%, -2.67% 105.64%);
}
.image-smnoirdc > p {
  left: 642.66796875px;
  top: 609.1171875px;
}
.image-spiderpunkdc {
  width: 799.992px;
  shape-outside: polygon(0.46% 0.06%, 101.96% -0.51%, 101.58% 102.30%, -2.42% 103.45%);
}
.image-spiderpunkdc > p {
  left: 10.66796875px;
  top: 999.1171875px;
}
.image-sversedc {
  width: 465px;
  shape-outside: polygon(21.97% 0.37%, 18.10% 37.62%, 9.07% 44.56%, 13.59% 72.64%, 0.25% 86.53%, 1.54% 93.04%, 11.44% 103.81%, 110.15% 105.22%, 102.41% -1.90%);
}
.image-sversedc > p {
  left: 307.18359375px;
  top: 658.8671875px;
}
.image-marvsmcitywarcol {
  width: 799.992px;
  shape-outside: polygon(0.33% 0.83%, 101.33% 0.01%, 101.46% 104.36%, -0.17% 105.99%);
}
.image-marvsmcitywarcol > p {
  left: 2.66796875px;
  top: 21.05078125px;
}
.image-ssmteamlayersbc {
  width: 424.992px;
  shape-outside: polygon(31.35% 0.50%, 27.35% 12.92%, 9.47% 16.54%, 1.47% 34.29%, 4.53% 76.88%, 11.12% 105.37%, 101.94% 102.10%, 99.12% 0.33%);
}
.image-ssmteamlayersbc > p {
  left: 165.25px;
  top: 520.16015625px;
}
.image-chasmcursekainecol {
  width: 799.992px;
  shape-outside: polygon(-0.53% -0.91%, 102.09% -0.67%, 91.97% 100.86%, 7.47% 102.17%);
}
.image-chasmcursekainecol > p {
  left: 259.73828125px;
  top: 1161.41015625px;
}
.image-asmcvr {
  width: 799.992px;
  shape-outside: polygon(0.34% 0.25%, 102.84% -0.40%, 101.22% 102.50%, -1.66% 102.37%);
}
.image-asmcvr > p {
  left: 523.73828125px;
  top: 696.16015625px;
}
.image-mmsmscol-resize {
  width: 799.992px;
  shape-outside: polygon(0.22% 0.15%, 100.72% -0.66%, 100.09% 103.10%, -1.53% 103.10%);
}
.image-mmsmscol-resize > p {
  left: 493.73828125px;
  top: 568.16015625px;
}
.image-venomlp {
  width: 799.992px;
  shape-outside: polygon(-0.04% 0.26%, 101.33% -0.22%, 100.21% 86.62%, -1.54% 89.51%);
}
.image-venomlp > p {
  left: 387.75px;
  top: 463.91015625px;
}
.image-gwenomvscarnkibdc {
  width: 799.992px;
  shape-outside: polygon(0.71% 0.06%, 101.21% -1.18%, 99.96% 101.73%, -1.17% 103.64%);
}
.image-gwenomvscarnkibdc > p {
  left: 500.66796875px;
  top: 997.1171875px;
}
.image-kinginblackcoellodc {
  width: 799.992px;
  shape-outside: polygon(0.21% 0.35%, 101.83% 0.35%, 100.21% 103.16%, -1.17% 105.55%);
}
.image-kinginblackcoellodc > p {
  left: 525.66796875px;
  top: -5.3828125px;
}
.image-venomwarcol {
  width: 285px;
  shape-outside: polygon(-6.25% -1.51%, 96.56% -1.24%, 98.66% 103.03%, -1.69% 104.26%);
}
.image-venomwarcol > p {
  left: 0.18359375px;
  top: 710.8671875px;
}
.image-abscarncodexriveradc {
  width: 799.992px;
  shape-outside: polygon(102.08% -1.24%, 0.08% 0.15%, -0.79% 102.47%, 101.33% 102.10%);
}
.image-abscarncodexriveradc > p {
  left: 12.66796875px;
  top: 1024.6171875px;
}
.image-mmrpgspiderversesupportingcast {
  width: 799.992px;
  shape-outside: polygon(0.40% 0.09%, 101.28% -0.30%, 93.03% 103.75%, -1.47% 103.07%);
}
.image-mmrpgspiderversesupportingcast > p {
  left: 2.23828125px;
  top: 981.66015625px;
}
.image-marvtudcmerged {
  width: 409.992px;
  shape-outside: polygon(101.77% -3.55%, 54.21% 24.70%, 4.94% 32.73%, 0.79% 62.59%, 0.06% 104.16%, 104.94% 101.75%);
}
.image-marvtudcmerged > p {
  left: 112.25px;
  top: 478.91015625px;
}
.image-sensmscol-resize {
  width: 799.992px;
  shape-outside: polygon(0.15% 0.33%, 102.91% -0.36%, 101.91% 95.99%, -6.47% 92.35%);
}
.image-sensmscol-resize > p {
  left: 5.23828125px;
  top: 421.91015625px;
}
.image-supsmlupacchinodc-resize {
  width: 394.992px;
  shape-outside: polygon(-3.86% -1.38%, 24.49% 32.36%, 5.76% 49.23%, -0.06% 78.25%, 12.09% 86.00%, 80.19% 87.52%, 100.95% 103.48%, 102.98% -2.14%);
}
.image-supsmlupacchinodc-resize > p {
  left: 117.75px;
  top: -9.08984375px;
}
.image-clonecol {
  width: 799.992px;
  shape-outside: polygon(0.08% 0.30%, 103.55% 0.11%, 100.67% 102.14%, -0.67% 101.08%);
}
.image-clonecol > p {
  left: 10.61328125px;
  top: 8.6171875px;
}
.image-ultsmcovmerged {
  width: 360px;
  shape-outside: polygon(73.51% 0.21%, 91.84% 14.65%, 79.90% 39.00%, 92.95% 67.67%, 102.67% 102.58%, -3.16% 101.50%, 1.01% 0.64%);
}
.image-ultsmcovmerged > p {
  left: 8.62890625px;
  top: 413.96875px;
}
.image-multidimensional {
  width: 799.992px;
  shape-outside: polygon(0.33% -0.37%, -0.30% 101.25%, 101.83% 98.66%, 102.20% -0.04%);
}
.image-multidimensional > p {
  left: 520.61328125px;
  top: -3.13671875px;
}
.image-multiasmcol {
  width: 799.992px;
  shape-outside: polygon(0.83% 0.86%, 101.45% 0.01%, 101.83% 106.05%, -4.30% 106.16%);
}
.image-multiasmcol > p {
  left: 11.61328125px;
  top: -4.94140625px;
}
.image-websasmdc {
  width: 399.996px;
  shape-outside: polygon(101.31% 0.21%, 88.81% 101.61%, -3.19% 103.72%, 0.56% -1.01%);
}
.image-websasmdc > p {
  left: 16.2578125px;
  top: -5.08984375px;
}
.image-frightenedasmcol {
  width: 349.992px;
  shape-outside: polygon(-1.08% -0.85%, -0.51% 101.51%, 107.78% 101.72%, 104.63% -1.50%);
}
.image-frightenedasmcol > p {
  left: 73.20703125px;
  top: 394.0234375px;
}
.image-venomcol {
  width: 799.992px;
  shape-outside: polygon(-0.10% 0.27%, 101.53% 0.77%, 100.03% 107.59%, -0.85% 101.02%);
}
.image-venomcol > p {
  left: 439.1953125px;
  top: 351.0546875px;
}
.image-mmsmcol-resize {
  width: 799.992px;
  shape-outside: polygon(0.25% 0.27%, 102.37% -0.01%, 100.00% 103.25%, 1.50% 102.96%);
}
.image-mmsmcol-resize > p {
  left: 27.98828125px;
  top: 657.91015625px;
}
.image-powersvenomcol {
  width: 799.992px;
  shape-outside: polygon(-0.00% 0.60%, 101.25% -0.93%, 101.12% 103.86%, -1.13% 102.33%);
}
.image-powersvenomcol > p {
  left: 538.98828125px;
  top: 469.1484375px;
}
.image-blackcatanncol {
  width: 399.996px;
  shape-outside: polygon(0.30% -0.07%, 0.30% 52.43%, 12.80% 65.21%, 12.55% 102.61%, 107.55% 105.39%, 107.05% 1.69%);
}
.image-blackcatanncol > p {
  left: 128.21484375px;
  top: 498.1171875px;
}
.image-powersultsmcol {
  width: 799.992px;
  shape-outside: polygon(0.37% 1.05%, 101.12% -0.02%, 99.78% 107.78%, -0.38% 100.34%);
}
.image-powersultsmcol > p {
  left: 6.98828125px;
  top: -2.05078125px;
}
.image-hallowseveallenstormbreakervar {
  width: 424.992px;
  shape-outside: polygon(0.12% 0.24%, 10.00% 102.00%, 86.94% 100.34%, 103.88% -2.05%);
}
.image-hallowseveallenstormbreakervar > p {
  left: 224.5px;
  top: 732.16015625px;
}
.image-avencol {
  width: 420px;
  shape-outside: polygon(92.44% 0.58%, -2.80% 59.43%, -1.37% 103.45%, 133.39% 107.58%, 102.68% -6.65%);
}
.image-avencol > p {
  left: 133.25390625px;
  top: 627.41015625px;
}
.image-asmdellotocombovars-resize {
  width: 799.992px;
  shape-outside: polygon(-0.10% 0.16%, -0.22% 105.21%, 100.28% 102.46%, 99.69% -0.75%);
}
.image-asmdellotocombovars-resize > p {
  left: 5.23828125px;
  top: -13.64453125px;
}

@media only screen and (max-width: 400px) {
    h1.normal {
        font-size: var(--font-size-6);
        line-height: 0.8;
    }
    
.main-holder h1.normal.magenta, .main-holder h1.normal.orange, .main-holder h1.normal.purple {
    font-size: var(--font-size-5); 
    }
}

@media only screen and (max-width: 500px) {
    .main-holder .vehicle-block {
        & .vehicle-section-1 > div:has(.vehicle-health) {
            max-width: 80%;
            margin: 10px 50px 0px 60px;
        }
        
        & .vehicle-image img {
            min-height: 250px;
        }
    }
}

@media only screen and (max-width: 600px) {
    .force-image-right {
        margin: auto !important;
    }
}


.main-holder .pre-gen-block.spiderwolf {
    & .pregen-rank p {
        font-size: var(--font-size-7) !important;
    }
    
    & .ability-score p.melee, .ability-score p.resilience, .defense-score p:nth-child(2),.defense-score p:nth-child(3), .defense-score p:nth-child(4) {
        font-size: var(--font-size-4);
    }
}

.demiplane-credits h5 {
    text-align: center;
    color: var(--marvel-red);
}