body {
  background-color: #414d61;
}

h1, h2, h3, p, table {
  color: white;
}

h1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 40px;
  text-align: center;
}

h3 {
  font-size: 20px;
  text-align: center;
}


.chooseColor {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 15px;
  /*   color: white;  */
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
}


.chooseColor a {
color: white;
  text-decoration: none;
  margin-left: 5px; /* small indent between links */
}

.chooseColor a:hover {
 /* text-decoration: underline; */
  text-decoration: none;
  color: black;
}

.lang-switch {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  /*   color: white;  */
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
}


.lang-switch a {
color: white;
  text-decoration: none;
  margin-left: 5px; /* small indent between links */
}

.lang-switch a:hover {
 /* text-decoration: underline; */
  text-decoration: none;
  color: black;
}

table.centered {
      width: 50%;            /* takes up half the width of the page */
      margin: 0 auto;        /* centered */
      border-collapse: collapse;
    }

    /* cell indents, no visible borders */
    table.centered td {
      padding: 12px 16px;
      border: none;
      text-align: left;
    }


/* Create a custom checkbox */
.checkmark {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: #eee;
}

.checkmark:hover {
  background-color: #ccc;
  cursor: pointer;
}

/* contain the braille */
.braille-container {
  width: 100px;
}

hr {
  border-top: 2px solid;
}

button {
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 7px;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #333333;
}

.button1:hover {
  background-color: #333333;
  color: white;
}

.mb-3 {
  margin-bottom: 3px;
}

.footer {
/*  position: absolute; */
  bottom: 15px;
  right: 15px;
  font-size: 10px;
  color: white;
  text-align: right;
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
}

.footer a {

color: white;
  text-decoration: underline;
}

.footer a:hover {
text-decoration: underline;

  color: black;
}