html {
  background-color: var(--bcolor);
  color: var(--fcolor);
}

body {
  background-color: var(--bcolor);
  color: var(--fcolor);
}


.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

img.main {
  height: 30%;
  width: 30%;
}
img.switch {
  height: 8%;
  width: 8%;
}

a:visited,
a:link {
  color: inherit;
  text-decoration: none;
}

table.index {
  line-height: 1.4;
  border-spacing: 0;
}

td {padding: 0;
}

td:nth-child(1) {
  vertical-align: top;
  text-align: left;
  font-weight: bold;
}

td:nth-child(2) {
  text-align: right;
}

/* show more depending on click */
tr:nth-last-child(1),
tr:nth-child(6) ~ tr                   {visibility: collapse;
                                        line-height: 0;      }
tr:nth-child(7) ~ tr:nth-last-child(1) {visibility: visible; 
                                        line-height: 1.4;      }

:target tr                                     {visibility: visible  ! important;
                                                line-height: 1.4     ! important;}
:target tr:nth-child(7) ~ tr:nth-last-child(1) {visibility: collapse ! important;
                                                line-height: 0       ! important;}

td a {content: " ";
      display: block;
      width: 100%;
      height: 100%;
}

/*  to make it easier to see what is going on * /

td a {background: red;
      opacity: .5;
      border: solid;
}
table{background: blue;
      opacity: .9;
}
/ * */