h1 {
    color: rgb(10, 48, 20);
    font-family: Arial, sans-serif;
 
  }

  body {

    padding-top: 20px;
    padding-left: 60px;
    padding-right: 60px;
    background-image: url(./images/marble.png);
    background-color: rgb(243, 200, 216);
    font-family: 'Calibri', 'Roboto', Arial, sans-serif;
  }

  .npcnamn {
 
    color: rgb(236, 204, 145);
    text-transform: capitalize;
    display: inline;
    font-size: 18;
  }

  .npcnamn:hover{
    color:#fff3d1;
    cursor: pointer;
  }


  .npc {

    color:rgb(203, 243, 255);
  }

  .placesContent {
    padding-left: 5%;
    padding-bottom: 5%;
  }
  
  #generatedPlaces {
    
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
   

  }

  #generatedPlaces p {
    width: 50%; /* Adjust width for two columns */
  }
  
  .placesButtonGroup {
    display: flex;
    justify-content: flex-start; /* Align items to the left */
    align-items: center; /* Vertically center items */
    margin-bottom: 10px; /* Optional: adds space below the button group */
  }
  
  .placesButtonGroup > * {
    margin-right: 10px; /* Adjust this value for spacing between elements */
  }
  
  /* Optionally remove the margin from the last element */
  .placesButtonGroup > *:last-child {
    margin-right: 0;
  }
  .Places {
    background-image: url(./images/map.png);
    width: 100%;
  }

  .tooltip {
    display: none;
    position: absolute;
    background-color: rgb(130, 19, 76); 
    color: #eee;
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    position: absolute;
    z-index: 999;
  }

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:  rgb(10, 48, 20);
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #d8ccd4;
}

/* When the checkbox is checked, add a purple background */
.container input:checked ~ .checkmark {
  background-color: rgb(130, 19, 76); 
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkbox label when it's disabled */
.container input[type="checkbox"]:disabled + .checkmark {
  opacity: 0.5; /* Add a slight gray out effect */
  cursor: not-allowed; /* Change cursor to indicate it's not clickable */
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid rgb(247, 238, 222);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* The male/female checkboxes */

.feMale {
  
  padding-left: 20px;

}

/* The container */
.feMaleCon {
  display: inline;
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:  rgb(230, 245, 234);
}

/* Hide the browser's default checkbox */
.feMaleCon input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkN {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkN:after {
  content: "";
  position: absolute;
  display: none;
}


/* On mouse-over, add a grey background color */
.feMaleCon:hover input ~ .checkmarkN {
  background-color: #d8ccd4;
}


.feMale {  
  display: inline-block;
  flex-flow: row;
  align-items: center;
}

.feMale label {
  margin: 5px 10px 5px 0;
}

.feMale input {
  vertical-align: middle;
  display: block;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* When the checkbox is checked, add a purple background */
.feMale input:checked ~ .checkmarkN {
  background-color: rgb(130, 19, 76); 

}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkN:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.feMaleCon input:checked ~ .checkmarkN:after {
  display: block;
}

/* Style the checkmark/indicator */
.feMaleCon .checkmarkN:after {
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid rgb(247, 238, 222);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


  .npc-button{
    float: right;
    display: inline;
    padding: 2px 12px;
    font-size: 20px;
    background-color: transparent;
    color: rgb(236, 204, 145);
  }

  .npc-button:hover {
    color: rgb(240, 213, 165);


  }

  .namn{
    color:rgb(203, 243, 255);
    text-transform: capitalize;
    width: 80%;
    padding-left: 10px;
    display: inline-block;
  }

  .namn:hover{
    color:#fff;
    cursor: pointer;
  }

  select {
    width: 10%;
    height: 100%;
    padding: 2px 2px;
    border: rgb(247, 238, 222);
    border-radius: 2px;
    background-color: rgb(247, 238, 222);
    display: inline;
    object-position: top;

  }

.selectAll {
  display: inline;
  font-size: 14px;
  padding: 2px 25px;
  text-align: center;
  background-color: rgb(130, 19, 76); 
  color: rgb(247, 238, 222);
  border-radius: 3px;
  margin-top: 1px;
  margin-bottom: 3px;
  border: solid rgb(130, 19, 76); 
  border-width: 1px;
}

.selectAll:hover {
  background-color: rgb(130, 19, 76); 
  border: solid rgb(250, 214, 233); 
  color: rgb(250, 214, 233); 
  border-width: 1px;
}

.selectAll:active {
  background-color: rgb(110, 41, 77); 
  color: rgb(206, 198, 183);

}

  button {
    background-color: transparent;
    border: none;
    color: rgb(10, 48, 20);
    padding: 1px 1px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 35px;
    cursor: pointer;

  }
  
  .smolButton {
    background-color: transparent;
    border: none;
    color: rgb(130, 19, 76); 
    padding: 1px 1px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 20px;
    cursor: pointer;
    padding-left: 10px;

  }

  .bigbutton:hover {
    color: rgb(29, 71, 42); 

  }
  
  .bigbutton:active {
    color: rgb(10, 48, 20);

  }
  

  .smolButton:hover {
    color: rgb(161, 47, 106); 

  }
  
  .smolButton:active {
    color: rgb(65, 17, 42); 

  }

.div1 {

  height: 150px;
  border: 1px solid rgb(41, 83, 57);
  background-position: top;
  background-color: rgb(23, 56, 31); 
  padding: 15px 32px;
  margin-bottom: 5%;
}

.divDwarf {

  background-image: url(./images/dwarf.png);

}

.divHalfling {

  background-image: url(./images/halfling.png);

}

.divMerfolk {

  background-image: url(./images/merfolk.png);

}

.divTabaxi {

  background-image: url(./images/tabaxi.png);

}

.divTiefling {

  background-image: url(./images/tiefling.png);

}

.divDragonborn {

  background-image: url(./images/dragonborn.png);
}

.divElf {

  background-image: url(./images/elf.png);

}

.divHuman {

  background-image: url(./images/human.png);

}

.divHalfelf {

  background-image: url(./images/halfelf.png);

}

.divHalforc {

  background-image: url(./images/halforc.png);

}

.divGnome {

  background-image: url(./images/gnome.png);

}

.divGoliath {

  background-image: url(./images/goliath.png);

}

.divFirbolg {

  background-image: url(./images/firbolg.png);

}

.divGoblin {

  background-image: url(./images/goblin.png);

}

.outer {
  column-count: 4;

}

.outerN {
  column-count: 4;
  width: 100%;
  height: 50%;
}

/*//collapsible



/* Style the button that is used to open and close the collapsible content */

  .selectList {
  min-height: 25px;
  }
.collapsible {
  background-color: rgb(22, 51, 47); 
  color: rgb(236, 204, 145);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: rgb(18, 49, 36); 
}

/* Style the collapsible content. Note: hidden by default */
.namecontent {
  padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 20px;
  display: none;
  overflow: hidden;
  background-color: rgb(18, 49, 36); 
  background-image: url(./images/jungle2.png);
}

.nameButton {
  color: rgb(236, 204, 145);
  font-size: 19px;
  padding-left: 8px;
  padding-bottom: 1px;
}

.nameButton:hover {
  color: rgb(250, 233, 204);


}

/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: rgb(23, 56, 31); 
  color: rgb(236, 204, 145);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 20%;
  font-family: 'Aboreto', 'Trebuchet MS', sans-serif;
}

.tablink:hover {
  background-color: rgb(38, 73, 47);
}

/* Style the tab content */
.tabcontent {
  color: rgb(10, 48, 20);
  display: none;
  padding: 50px 20px;

}

.tablink:active {
  color: #ddd2ac;
}


  
.event {

  color: rgb(203, 243, 255);
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgb(10, 48, 20);
  background-image: url(./images/dirtroad.png);
}

.events {
  margin-left: 15px;
  display: inline-block;
  margin-right: 15px;
}

.eventsymbol {
  margin-left: 15px;
  display: inline;
  text-align: center;

}

/* screen size */ 

@media screen and (max-width: 1100px) {
  .outer {
    column-count: 2;
  }
  .outerN {
    column-count: 2;
  }  

  select {
    width: 120px

  }
  body {

    padding-left: 5px;
    padding-right: 5px;

  }

  .npcnamn {
 
    color: rgb(236, 204, 145);
    text-transform: capitalize;
    display: inline;

  }

  .npc {
    width: 100%;
    padding: 0px 0px;
  }

  .div1 {
    width: 90%;
    padding: 5% 5%;
  }

  button {

    padding: 10px 20px;

  }  

  .npc-button {
  padding: 0px 0px;
  font-size: 16px;
  display: block;  
  float: none;
  position: relative;
  right: 0px;
  }
  p {
    font-size: 13px;
  }

  .feMale {
    padding-top: 10px;
    padding-left: 0px;
    }


    .namecontent {
      padding-top: 0px;
      }

    .selectAll {
      padding: 2px 15px;

    }


}