/*:root {*/
body {
  /*color-scheme: light dark; /* change automatically based on computer's theme */ 
  font-family: Monospace;
  font-size: 16pt;
  font-weight: 600;
}

.body_dark {
  background-color: #000; 
  color: white;
}


.body_light {
  background-color: white; 
  color: black;
}



::selection {
  color: yellow;
  background: red;
}

#mainwrapper {
  margin: 0 auto;
  /* width: 50%; */
  max-width: 800px;
  padding: 10px;
  border-radius: 20px;
  background: #3b3b3b;
  border: 1px solid black;
}

.tablewrapper {
  display: table;
}

.itemwrapper {
  display: table-row;
}

.item,
.value {
  display: table-cell;
  padding: 4px 15px;
}

.item {
  white-space: nowrap;
  position: relative;
}

.item:hover .tooltiptext, 
.with-tooltip:hover .tooltiptext {
  visibility: visible;
}


.tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;

  background-color: black;
  font-family: serif;
  left: 150px;
  top: 15px;
  border: 1px;
  padding: 10px;
}

.dig_output {
  border: 1px;
}

.header {
  font-size: 16pt;
  font-weight: 600;
  padding: 5px;
}

.area_content {
  margin: 10px 0px;
}

.area {
  border: 1px dotted gray;
  padding: 5px;
  margin: 3px;

}

.tab {
  display: none;
}

#password.area {
  display: block;
}

.tab-button {
  background-color: #3b3b3b;
  color:aliceblue;
  padding: 5px 20px;
  border-radius: 10px;
}

.tab-button:hover {
  background-color: #b6b1b133;
}

.tab-bar {
  background-color:#3b3b3b;
  /* border: 1px dotted aquamarine; */
}

#output textarea {
  
  resize: none;
  width: 600px;
  height: 300px;
  background: rgb(66, 55, 55);
  color: white;
  font-size: 1em;
  padding: 10px 30px;
 
}

#output textarea::placeholder {
  color: rgba(245, 245, 245, 0.308);
   font-style: italic;
}

#output textarea::selection {
  color: red;
  background-color: aqua;
}


#themeswitcher {
  position: absolute;
  left: 20px;
  top: 10px;

	background: none;
	color: inherit;
	/* border: none; */
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;


  border-radius: 10px;
  border-color: white;
  padding: 2px 5px;

  font-size: 0.8em;

}

#themeswitcher:hover {
  color: gray;
}

.message\.blink {
  animation-name: blink;
  animation-duration: 5s;
   animation-iteration-count: infinite;
}

@keyframes blink {
    0% {color: pink}
    50% {color: black;}
    100% {color: pink;}
    }