body{
  font-family: sans-serif;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 100%), url(./paper3.jpeg);
}

.image-preview{
  height: 250px;
  width: 250px;
  border: 1px solid black;
  margin-bottom: 10px;
}

.char-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-story{
  width: 680px;
  margin: auto;
  display: block;
}

.main-column{
  width: 700px;
  padding-left: 20px;
  background-color: white;
  background-image: url(https://portalwombat.de/src/icrpg/assets/ui/backgrounds/bg-sheet.png);
  overflow-y: auto;
  padding-right: 20px;
}

.summary{
  width: 350px;
  height: calc(100% - 25px);
  background-color: #222;
  color: white;
  padding-top: 25px;
  padding-right: 5px;
}

.summary-h1{
  font-weight: bold;
}

#download_button{
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}



.two-columns{
  display: flex;
  height: 98vh;
  justify-content: center;
}
.lifeform-image{
  height: 275px;
  margin: auto;
  display: block;
}

h1{
  background: url("https://portalwombat.de/src/icrpg/assets/ui/backgrounds/bg-bar-red.webp") no-repeat bottom;
  background-size: contain;
  border-bottom: none;
  padding-bottom: 8px;
  padding-left: 16px;
}

h2{
  border-bottom: none;
  background: url("https://portalwombat.de/src/icrpg/assets/ui/backgrounds/bg-bar-4.webp") no-repeat bottom;
  padding-bottom: 9px;
  background-size: contain;
}

h3{
  color: rgb(192 32 37);
}

.summary-item{
  border-top: 1px solid #000;
  border-bottom: 1px solid #333;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}

.summary-item-active{
  border: 1px solid rgb(192 32 37);
}

.summary-bullet{
  width: 100px;
  display: inline-block;
  vertical-align: top;
}
.summary-bullet2{
  width: 175px;
  display: inline-block;
  vertical-align: top;
}

.summary-text{
  padding-left: 17px;
  margin-top: 4px;
}
.summary-error{
  color: rgb(192 32 37);
}

.summary-checkmark{
  font-size: 12px;
  margin-left: 5px;
  color: lawngreen;
}

.corestats-used{
font-size: 1.5em;
font-weight: bold;
color: rgb(192 32 37);
margin-bottom: 15px;
}

.corestats-value{
display: flex;
}

.corestat-name{
font-size: 1.5em;
font-weight: bold;
width: 150px;
height: 60px;
align-content: center;
}

.corestat-lifeform{
font-size: 12px;
width: 150px;
height: 20px;
padding-top: 44px;
margin-left: -150px;
}

.corestat-output{
height: 75px;
width: 75px;
background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d20.webp");
background-size: contain;
font-size: 2.5em;
font-weight: bold;
color: rgb(192 32 37);
align-content: center;
text-align: center;
margin-bottom: 33px;
background-repeat: no-repeat;
}

.corestat-edit{
height: 75px;
align-content: center;
width: 50px;
}

.button_edit{
width: 30px;
background-color: white;
border: 1px solid black;
cursor: pointer;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
}

.corestat-description{
width: 420px;
}

.name-info{
font-size: 12px;
font-weight: normal;
font-style: italic;
}

.effort-used{
font-size: 1.5em;
font-weight: bold;
color: rgb(192 32 37);
margin-bottom: 15px;
}

.effort-value{
display: flex;
}

.effort-name{font-size: 1.5em;font-weight: bold;width: 160px;height: 60px;align-content: center;}

.effort-lifeform{font-size: 12px;width: 160px;height: 20px;padding-top: 44px;margin-left: -160px;}

.effort-output{
height: 75px;
width: 75px;
font-size: 2.5em;
font-weight: bold;
color: rgb(192 32 37);
align-content: center;
text-align: center;
margin-bottom: 64px;
}

#output_basis{
  background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d4.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

#output_weapon{
  background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d6.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

#output_guns{
  background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d8.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

#output_magic{
  background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d10.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

#output_ultimate{
  background-image: url("https://portalwombat.de/src/icrpg/assets/ui/dice-transparent/d12.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

.effort-edit{
height: 75px;
align-content: center;
width: 50px;
}

.effort-description{width: 410px;}

.lifeform-choice{
  background-color: white;
  border: 1px solid black;
  width: 100px;
  display: block;
  cursor: pointer;
}

.lifeform-choice-active{
  outline: 2px solid rgb(192 32 37);
  border: 1px solid rgb(192 32 37);
}
.lifeform-buttons{
  display:flex;
  justify-content: space-around;

}

.character-choice{
  background-color: white;
  border: 1px solid black;
  width: 100px;
  display: block;
  cursor: pointer;
}

.character-choice-active{
  outline: 2px solid rgb(192 32 37);
  border: 1px solid rgb(192 32 37);
}

.character-buttons{
  display:flex;
  justify-content: space-around;

}

.character-image{
  max-width: 250px;
  max-height: 300px;
}

.character-image-div{
  width: 250px;
  height: 300px;
}

.character-startability, .character-startloot, .lifeform-option{
/*display: flex;*/
margin-bottom: 10px;
outline: 2px solid rgba(0,0,0,0);
cursor: pointer;
}

.character-startability:hover, .character-startloot:hover, .lifeform-option:hover{
  outline: 2px solid rgba(0,0,0,0.4);
}

.chosen-option{
  outline: 2px solid rgb(192 32 37) !important;
}

.character-startability-name, .character-startloot-name, .lifeform-option-name{
  /*width: 175px;*/
  margin-right:5px;
  font-weight: bold;
  display:inline-block;
}

.character-startability-text, .character-startloot-text, .lifeform-option-text{
  /*width: 510px;*/
  display:inline;
}

.character-masteries{
  display:flex;
}

.character-mastery{
  margin-bottom: 10px;
}

.character-mastery-name{
  margin-right:5px;
  font-weight: bold;
  display:inline-block;
}

.character-mastery-text{
  display:inline;
}

.h3-infotext{
  color: black;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}

.stat-boni{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lifeform-stat{
  outline: 2px solid rgba(0,0,0,0);
  padding-left: 2px;
  padding-right: 2px;
}

.lifeform-stat:hover{
  outline: 2px solid rgba(0,0,0,0.4);
  cursor: pointer;
}

.lifeform-stat-active{
  outline: 2px solid rgb(192 32 37) !important;
}

.effort-boni{
  display: flex;
  justify-content: space-between;
}

.lifeform-effort{
  outline: 2px solid rgba(0,0,0,0);
  padding-left: 2px;
  padding-right: 2px;
}

.lifeform-effort:hover{
  outline: 2px solid rgba(0,0,0,0.4);
  cursor: pointer;
}

.lifeform-effort-active{
  outline: 2px solid rgb(192 32 37) !important;
}


.loot-columns{
  display: flex;
}

.loot-images{

}

.loot-image img{
  width: 150px;
}

.loot-item, .intspell-item, .weispell-item{
  margin-bottom: 10px;
}

.loot-item:hover, .intspell-item:hover, .weispell-item:hover{
  outline: 2px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.loot-item-name, .intspell-item-name, .weispell-item-name{
  margin-right: 5px;
  font-weight: bold;
  display: inline-block;
}

.loot-item-text, .intspell-item-text, .weispell-item-text{
  display: inline;
}

.loot-item-active, .intspell-item-active, .weispell-item-active{
  outline: 2px solid rgb(192 32 37) !important;
}

.input-text-story{
  width: 98%;
  margin-top: 10px;
}

.link-button{
  color: black;
  text-decoration: none;
  background-color: white;
  border: 1px solid black;
  font-weight: bold;
  padding: 4px;
  display: block;
  margin-top: 5px;
  width: fit-content;
}