body {
    background-color:rgb(17, 17, 17);
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    overflow-x:hidden;
}

textarea {
    resize:none;
    width:100%;
    height:50%;
    background-color:aliceblue;
}

label {
    color: aliceblue;
}

.output {
    width: fit-content;
    margin-left: 10px;
    margin-right: 10px;
    white-space: pre;
    color:aliceblue;
    display:inline-block;
    height:100%;
    vertical-align:top;
}

#output {
    overflow-x: scroll;
    overflow-y: hidden;
    padding-top: 20px;
    width:100%;
    min-width: 100%;
    height: fit-content;
    min-height: 25%;
    white-space:nowrap;
}

.character {
    width: 100%;
}

.minerals {
    width: 100%;
    user-select: all;
}

.selector {
    width: 10%;
    padding-left: 1%;
    padding-right: 1%;
    display:inline-block;
}

h2 {
    color:aliceblue;
}

h4 {
    color:aliceblue;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: aliceblue;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    text-align:center;
  }