:root{
    --BGColor: rgb(13, 13, 13);
    --MGColor: rgb(27, 27, 27);
    --FGColor: rgb(13, 13, 13);
    --TextColor: rgb(255, 249, 237);
    --HilietColor: #FB3640;
    --LinkColor: steelblue;
    --FontsizeDefault: 20px;
    --LineWidth: 3px;
}

.lietmode{
    --BGColor: rgb(172, 172, 172);
    --FGColor: rgb(233, 233, 233);
    --MGColor: rgb(199, 199, 199);
    --TextColor: black;
    --LinkColor: #0000EE;
    --HilietColor: rgb(0, 63, 253);
}

.tactileIMG{transition-duration: 0.22s;}
.tactileIMG:hover{
    transform: rotate(-5deg);
}


body{
    background-color: var(--BGColor);
    overflow: hidden;
}

::selection {
  background: var(--HilietColor);
	color: var(--FGColor);
}

h2{margin-bottom: 5px;}

p, li, details, b{
    font-size: var(--FontsizeDefault);
    color: var(--TextColor);
    padding: none;
    margin: none;
}

a{
  color: var(--LinkColor);
  padding: none;
  }

small{
  color: var(--TextColor);
  font-size: : 20px;
}
em{
    font-size: var(--FontsizeDefault);
    font-style: normal;
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6, em{
    color: var(--HilietColor);
}

.navbutton{
    color: var(--HilietColor);
    background-color: var(--MGColor);
    border: var(--LineWidth) solid var(--HilietColor);
    border-bottom: none;
    transition-duration: 0.5s;
    font-size: var(--FontsizeDefault);
    padding-bottom: var(--LineWidth);
    font-weight: 200;
}

.navbutton:hover{
    color: var(--BGColor);
    font-weight: 300;
    background-color: var(--HilietColor);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
}

.navbutton:active{
    font-size: 19px;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: var(--LineWidth);
        transition-duration: 0.1s;
}

.miscbutton{
    color: var(--HilietColor);
    background-color: var(--MGColor);
    border: var(--LineWidth) solid;
    border-right: none;
    transition-duration: 0.5s;
    font-size: var(--FontsizeDefault);
    font-weight: 100;
}

.miscbutton:hover{
    color: var(--BGColor);
    background-color: var(--HilietColor);
    border-color: var(--HilietColor);
    padding-left: 10px;
    padding-right: 10px;
}

.miscbutton:active{
  padding: none;
  transition-duration: 0.1s;
}

.titletext{
  font-size: 30px;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  color: var(--HilietColor);
  user-select: none;
  }

.navmenu{
  display: flex-inline;
  padding: 0px;
  margin: 0px;
  border: none;
}

.centralpage{
    background-color: var(--FGColor);
    border: 3px solid var(--HilietColor);
    padding: 25px;
    height: 76vmin;
    overflow: scroll;

}

.inline-infobox{
  /*border-left: var(--LineWidth) solid var(--HilietColor);
  */
}


.credit-callout{
  border: var(--LineWidth) solid var(--HilietColor);
  color: var(--HilietColor);
  border-right: none;
  border-bottom: none;
  width: fit-content;
  padding: var(--LineWidth);
  margin: none;
  font-size: 1em;
}

@media only screen and (max-width: 1000px) {
  /* For mobile phones: */
  .titlepage
  {display: none;
    }
  .centralpage{
    height: 50vh;}
  .navmenu{
  display: flex-inline;}
  .navbutton {
    width: 50%; display: block;
  }

}