:root {
    --nord1:  #2E3440; /* bg darkest  */
    --nord2:  #3B4252;
    --nord3:  #434C5E;
    --nord4:  #4C566A; /* bg lightest */

    --nord5:  #D8DEE9; /* fg darkest */
    --nord6:  #E5E9F0;
    --nord7:  #ECEFF4; /* fg lightest */

    --nord8:  #8FBCBB; /* shades of blue */
    --nord9:  #88C0D0;
    --nord10: #81A1C1;
    --nord11: #5E81AC;

    --nord12: #BF616A; /* red */
    --nord13: #D08770; /* orange */
    --nord14: #EBCB8B; /* yellow */
    --nord15: #A3BE8C; /* green */
    --nord16: #B48EAD; /* purple */
}

body {
  background-color: var(--nord1);
  color: var(--nord5);
}

.navbar {
  background-color: var(--nord2);
  overflow: hidden;
  display:flex;
}

.navbar a {
  float: left;
  color: var(--nord5);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.5s;
}

.navbar a:hover {
  background-color: var(--nord5);
  color: var(--nord2);
  transition: 0.5s;
}

.navcenter {
  margin: 0 auto;
  padding-left:6%;
}

.navbar button {
  float: left;
  color: var(--nord5);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.5s;
  border: none;
  background-color: inherit;
}

.navbar button:hover {
  background-color: var(--nord5);
  color: var(--nord2);
  transition: 0.5s;
}

.navbar button.active {
  background-color: var(--nord8);
  color: var(--nord2)
}

.navbar button.ipbutton {
  float:right;
}

.navbar button.ipbuttonclicked {
  background: var(--nord15);
}


.tabpage {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.tabvis {
  animation: fadeIn 1s;
  opacity: 1;
  display: block;
}

.tabinvis {
  animation: fadeOut 0.5s;
  opacity: 0;
  pointer-events: none;
}

.tabinit {
  opacity: 0;
  display: none;
}

ol {
  display: inline-block;
}

li {
  text-align: left;
  padding: 12px;
}

table {
  display: inline-block;
}

td {
  padding: 12px;
}

a {
  color: var(--nord14);
  transition: color 0.5s;
}

a:hover {
  color: var(--nord13);
  transition: color 0.5s;
}

img {
  width: 25%;
  border: 3px solid var(--nord4);
}

@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

@keyframes fadeOut {
  from {opacity:1;}
  to {opacity:0;}
}