:root {
  --default-short-input-width: 50px;

  --bg-darkness3: rgb(133, 123, 123);
  --bg-darkness2: #000000;
  --bg-darkness1: #ffffff;
  --bg-darkness0: #000;

  --bg-blueish: #ffffff;

  --fg-normal: #fff;
}

#dark-mode {
  --bg-darkness3: rgb(133, 123, 123);
  --bg-darkness2: #000000;
  --bg-darkness1: #000000;
  --bg-darkness0: #000;

  --bg-blueish: #010101;

  --fg-normal: rgb(0, 0, 0);
}

* {
  background-color: var(--bg-darkness3);
  color: var(--fg-normal);
  border: none;
  border-color: var(--bg-darkness0);
}

body {
  background-color: var(--bg-darkness3);
}


/* Divs */
div {
  border-radius: 25px;
  background-color: var(--bg-darkness3);
}
#page-caesar-vigenere div {
  background-color: var(--bg-darkness2);
}
#page-text-to-numbers div {
  background-color: var(--bg-darkness2);
}

/* Navbars */
.nav-link {
  border: none !important;
  margin-right: 10px;
 
}
nav {
  background-color: var(--bg-darkness1) !important;
  border-radius: 0;
}
nav * {
  background-color: rgb(125, 118, 118);
  border-radius: 0;
  height: 35px;
  margin-right: 80px;
}
nav .active {
  background-color: var(--bg-darkness3) !important;
  margin-right: 10px;
}
nav .nav {
  background-color: var(--bg-blueish) !important;
}

/* Labels */
label {
    border: none !important;
    background-color: var(--bg-darkness2) !important;
}
.inputbox label {
    background-color: rbga(0, 0, 0, 0) !important;
}

/* Text */
span {
    background-color: var(--bg-darkness2);
}

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 0 !important;
    padding-top: 1.5rem !important;
}

/* Input */
button,
input,
select {
  background-color: var(--bg-darkness1);
  border-color: var(--bg-darkness0);
  border-radius: 1000px;
  margin: 0 5px;
  width: 170px;
  min-width: 100px;
}

textarea {
    background-color: var(--bg-darkness2) !important;
    color: var(--fg-normal) !important;
    border: none !important;
}


/*** Classes ***/

.text-centered {
  text-align: center;
}

.tool_panel {
  padding: 12px 5px 5px;
  border-radius: 20px;
  /* background-color: lightblue; */
  background-color: var(--bg-darkness2) !important;
  width: 90%;
  margin: auto;
}

.tool_panel div, .tool_panel label {
  background-color: var(--bg-darkness2) !important;
}

.short-input {
  width: var(--default-short-input-width);
}

.mid-sized-input {
  max-width: 150px;
}

.light {
  font-size: 70%;
}

.bg-transparent {
  background-color: transparent;
}

.add-group {
  text-align: center;
  background-color: var(--bg-darkness2);
}

/* Specifications to classes */
div.center {
  border: 2px solid darkblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #nav_home { */
    /* text-align: center; */
    /* margin-top: 10%; */
    /* background-color: var(--bg-darkness1); */
/* } */


/* More specific to this very website */

div.inputbox {
  width: 90%;
  /* border: 2px solid #0f0; */
  border: none;
  margin: 3% 5% 3%;
  padding: 20px;
}

div.outputbox {
  width: 90%;
  height: fit-content;
  min-height: 35px;
  /* border: 2px solid #0f0; */
  border: none;
  margin: 3% 5% 3%;
}

.output {
  text-align: center;
  width: 100%;
  height: fit-content;
  white-space: auto;
}

.translate-btn {
  text-align: center;
}
.icon{
  height: 45px;
}
.copyright{
  width: 100%;
  text-align: center;
  padding: 25px 0;
  background: #716e6e;
  font-weight: 300;
  margin-top: 400px;

}
.marginn{
  height: 5px;
  background-color: black;
}