html, body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--7sGreenLight);
}

input[type="text"],
input[type="number"] {
  border-style: none;
  border-bottom: .01in solid var(--7sGreenDarkest);
  background-color: transparent;
}

input[type="number"] {
  text-align: center;
}

.loading {
  opacity: 0;
}

.showMenu-enter-active, .showMenu-leave-active {
  opacity: 1;
  transition: opacity .2s linear 0s;
}

.showMenu-enter, .showMenu-leave-to {
  opacity: 0;
}

#characterSheetApp {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--navHeaderSize) 1fr;
  grid-template-columns: 1fr;
}

#headerContainer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  background-color: var(--7sGreenDark);
  color: white;
}

#contentContainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: var(--spacingXLarge);
}

#page {
  position: relative;
  min-width: 8.5in;
  min-height: 11in;
  max-width: 8.5in;
  max-height: 11in;
  overflow: hidden;
  padding: .25in;
/*   border: .25in red solid; */
  font-size: .15in;
  color: var(--7sGreenDarkest);
  box-shadow: 0.075in 0.075in 0.25in 0.05in var(--7sGreenDarkest);
  display: grid;
  grid-gap: .05in;
  grid-template-rows: 1.5in 1.5in 2.5in 2.5in 3in;
  grid-template-columns: 12fr 10fr 5fr 7fr;
  grid-template-rows: 6fr 6fr 10fr 10fr 12fr;
  grid-template-areas:
      'characterInfo backgrounds deathSpiral deathSpiral'
      'characterInfo arcana deathSpiral deathSpiral'
      'advantages advantages advantages traits'
      'advantages advantages advantages skills'
      'stories stories stories skills';
  background-color: white;
}

#page.landscape {
  min-width: 11in;
  min-height: 8.5in;
  max-width: 11in;
  max-height: 8.5in;
  grid-template-columns: 12fr 7fr 25fr;
  grid-template-rows: 10fr 6fr 6fr 12fr;
  grid-template-areas:  'characterInfo traits advantages'
                        'backgrounds   skills advantages'
                        'arcana        skills advantages'
                        'deathSpiral   skills    stories';
}

#page>* {
    overflow: hidden;
}

#SeventhSeaTag {
  font-family: 'Pirata One', cursive;
  font-size: .3in;
  line-height: .3in;
  letter-spacing: .01in;
  font-weight: bold;
  text-align: center;
  color: var(--7sGold);
  text-shadow:  .03in .02in 0 var(--7sGreenDarkest),
                -.01in -.01in 0 var(--7sGreenDarkest),
                .01in -.01in 0 var(--7sGreenDarkest),
                -.01in .01in 0 var(--7sGreenDarkest),
                .01in .01in 0 var(--7sGreenDarkest);
}

#SeventhSeaTag>#subtag {
  font-size: 70%;
}

.cell {
  display: grid;
  grid-template-rows: .25in 1fr;
  background-color: white;
}

.cell-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .25in;
  text-align: center;
/*   background-color: var(--7sGreen); */
  background-color: var(--7sGreenDark);
  color: white;
  text-shadow: .01in .01in .0in var(--7sGreenDarkest);
  font-family: 'Pirata One', cursive;
  font-size: .2in;
  letter-spacing: .01in;
}

.cell-content {
}

/*********************
*** Character Info ***
*********************/
#charInfoCell {
  grid-area: characterInfo;
}

#charInfoCell>.cell-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/******************
*** Backgrounds ***
*******************/
#bgCell {
  grid-area: backgrounds;
}

#bgCellContent {
  display: flex;
  flex-direction: column;
  font-size: .1in;
}

#bgCellContent>div {
  flex: 1;
}

/*************
*** Arcana ***
**************/
#arcanaCell {
  grid-area: arcana;
}

#arcanaCellContent {
  display: flex;
  flex-direction: column;
  font-size: .1in;
}

#arcanaCellContent>div {
  flex: 1;
}

/*******************
*** Death Spiral ***
********************/
#deathSpiralCell {
  grid-area: deathSpiral;
}

#deathSpiralCell>.cell-content {
  position: relative;
}

#deathSpiralCellNotes {
  position: absolute;
  right: .05in;
  bottom: .05in;
  font-size: .1in;
}

.wound {
  position: absolute;
  width: .25in;
  height: .25in;
  border: .01in solid var(--7sGreenDarkest);
  border-radius: 1in;
  transform: translate(-50%, -50%);
}

.wound.dramatic {
  border: .02in solid var(--7sGreen);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.wound-bonus {
  opacity: 0;
  transition: opacity 1s ease;
}

.wound-label {
  position: absolute;
  font-family: 'Pirata One', cursive;
  transition: all 1s ease;
}

#wound-1-1 { top: 30%; left: 25%; }
#wound-1-2 { top: 20%; left: 29.5%; }
#wound-1-3 { top: 15%; left: 38.5%; }
#wound-1-4 { top: 12.5%; left: 47.5%; }
#wound-1-5 { top: 12.5%; left: 58%; }

#wound-2-1 { top: 16.5%; left: 67.5%; }
#wound-2-2 { top: 22.5%; left: 75%; }
#wound-2-3 { top: 32.5%; left: 77.5%; }
#wound-2-4 { top: 42.5%; left: 75%; }
#wound-2-5 { top: 52.5%; left: 70%; }

#wound-3-1 { top: 57.5%; left: 60%; }
#wound-3-2 { top: 60%; left: 50%; }
#wound-3-3 { top: 56.5%; left: 40%; }
#wound-3-4 { top: 47.5%; left: 35%; }
#wound-3-5 { top: 36%; left: 37.5%; }

#wound-4-1 { top: 27.5%; left: 45%; }
#wound-4-2 { top: 25%; left: 55%; }
#wound-4-3 { top: 32.5%; left: 62.5%; }
#wound-4-4 { top: 42.5%; left: 61%; }
#wound-4-5 { top: 45%; left: 50%; }

#wound-5-1 { top: 72%; left: 44%; }
#wound-5-2 { top: 69%; left: 35%; }
#wound-5-3 { top: 62.5%; left: 27%; }
#wound-5-4 { top: 53%; left: 23%; }
#wound-5-5 { top: 41%; left: 22.5%; }

#wound-label-1 { top: 4%; left: 62%; }
#wound-label-2 { top: 53.5%; left: 74%; }
#wound-label-3 { top: 26%; left: 33%; }
#wound-label-4 { top: 36%; left: 53%; }
#wound-label-5 { top: 36%; left: 53%; }

#deathSpiralCellWounds.extraWounds>.wound-label {
  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}

#deathSpiralCellWounds.extraWounds>.wound-bonus {
  opacity: 1;
}

#deathSpiralCellWounds.extraWounds>#wound-label-1 { top: 32%; left: 18%; }
#deathSpiralCellWounds.extraWounds>#wound-label-2 { top: 4%; left: 62%; }
#deathSpiralCellWounds.extraWounds>#wound-label-3 { top: 53.5%; left: 74%; }
#deathSpiralCellWounds.extraWounds>#wound-label-4 { top: 26%; left: 33%; }

/*************
*** Traits ***
**************/
#traitsCell {
  grid-area: traits;
}

#traitsCell>.cell-content {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0px, 1fr)) .25in;
}

.skill,
.trait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .02in;
  font-size: .15in;
  line-height: .15in;
}

.skill:nth-child(even),
.trait:nth-child(even) {
/*   margin: -.05in; */
/*   padding: .04in .05in; */
  background-color: var(--7sGreenLight);
}

.dot-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: .75in;
}

.dot {
/*   cursor: pointer; */
/*   min-width: .14in;
  min-height: .14in;
  max-width: .14in;
  max-height: .14in; */
  width: .15in;
  height: .15in;
  border: .02in solid var(--7sGreenDarkest);
  border-radius: 1in;
  
  transition: all .5s ease;
}

.dot.active {
  background-color: var(--7sGreen);
  background-color: var(--7sGold);
/*   border: .02in solid var(--7sGreenDarkest); */
}

/*************
*** Skills ***
**************/
#skillsCell {
  grid-area: skills;
}

#skillsCell>.cell-content {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0px, 1fr)) .15in;
}

#skillsCellNotes {
  text-align: left;
  font-size: .1in;
}

/*****************
*** Advantages ***
******************/
#advantagesCell {
  grid-area: advantages;
}

#advantagesCell>.cell-content {
  font-size: 0.125in;
}

/**************
*** Stories ***
***************/
#storiesCell {
  grid-area: stories;
}

#storiesCell>.cell-content {
  display: flex;
  width: 200%;
}

.story {
  width: 50%;
  transition: width 1s linear;
}

.second-story {
  width: 25%;
}

.seconStoryActive>.story {
  width: 25%;
}




/*
*****************
*** Edit Menu ***
*****************
*/
#editMenu {
  display: flex;
  flex-direction: column;
/*   align-items: center; */
  position: absolute;
  max-width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding: 5vmin;
  background-color: var(--7sGreen);
  color: white;
}

#editMenu>label {
  display: grid;
  grid-template-columns: auto 1fr;
}

.menuHeader {
  font-weight: bolder;
  color: var(--7sGold);
}