:root {
  --low-contrast: 0.25;
  --medium-contrast: 0.5;
  --high-contrast: 0.75;
  --gray-color: rgb(128, 128, 128);
}
body
{
  margin: 0;
  padding: 0;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
  z-index: 999;

  border-style: ridge;
  border-color: var(--fg-color);
  background-color: var(--bg-color);
}
.center
{
  display: flex;
  justify-content: center; /*horizontal*/
  align-items: center;
  height: 100vh;
}
.center2
{
  display: flex;
  justify-content: center; /*horizontal*/
  align-items: center;
  height: 100%;
}
.center3{
  vertical-align: middle;
}
.style, th, td, li, h1, a, span
{
  font-family: monospace;
}
h1
{
  text-transform: uppercase;
}
ol
{
  list-style-position: inside;
}
table, th, td
{
  border-style: solid;
  border-color: var(--gray-color);
}
table
{
  width: 100%;
}
th:nth-child(1)
{
  width: 25%;
}
input
{
  border-radius: 999px;
  border-style: solid;
}
/*
button
{
  border-radius: 999px;
  border-style: solid;
}
*/
a, button {
  cursor: pointer;
  color: var(--bg-color);
  text-decoration: none;
  background:
    linear-gradient(to right, var(--fg-color), var(--fg-color)),
    linear-gradient(to right, rgb(128, 128, 128), rgb(128, 128, 128));
  background-size:
    0 100%,
    100% 100%;
  background-position:
    100% 100%,
    0 100%;
  background-repeat: no-repeat;
  border-style: none;
  transition: color .3s linear, background-size .3s;

  -webkit-touch-callout: none;/* iOS Safari */
  -webkit-user-select: none;  /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none;   /* Firefox */
  -ms-user-select: none;    /* Internet Explorer/Edge */
  user-select: none;      /* Non-prefixed version, currently not supported by any browser */
}
a:hover, button:hover {
  background-size:
    100% 100%,
    100% 100%;
  background-position:
    0 100%,
    0 100%;
}
.ban
{
  -webkit-touch-callout: none;/* iOS Safari */
  -webkit-user-select: none;  /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none;   /* Firefox */
  -ms-user-select: none;    /* Internet Explorer/Edge */
  user-select: none;      /* Non-prefixed version, currently not supported by any browser */
}
header
{
  left: 0px;
  top: 0px;
  width: 100%;
  position: fixed;
  z-index: 100;

  backdrop-filter: blur(16px);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .3s ease;
}
header.hide
{
  transform: translateY(-100%);
}
#panel
{
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  position: fixed;
  z-index: 100;

  backdrop-filter: blur(16px);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .3s ease;
}
#panel.hide
{
  transform: translateY(+100%);
}
header>div>div, header>div>a
{
  font-family: MontserratMedium;
}
.headerPlace
{
  width: 100%;
}
.headerCorner
{
  height: 100%;
}
.headerCenter
{
  flex: 3 0 auto;
  height: 100%;
}
/*
a
{
  text-decoration: none;
}
*/
@font-face {
  font-family: MontserratMedium;
  src: url(/ttf/MontserratMedium.ttf);
}
/*
Mode and Version:
*/
header
{
  background-color: transparentize(var(--bg-color), 0.75);
}
/*
font-size
*/
.style, th, td, li, h1, a, span
{
  font-size: var(--font-size);
}
/*
bg-color
*/
body
{
  background-color: var(--bg-color);
}
::selection
{
  color: var(--bg-color);
}
input
{
  background-color: var(--bg-color);
}
/*
button
{
  color: var(--bg-color);
}
*/
/*
fg-color
*/
.text, th, td, li, h1, span
{
  color: var(--fg-color);
}
::selection
{
  background-color: var(--fg-color);
}
input
{
  color: var(--fg-color);
  border-color: var(--fg-color);
}
/*
button
{
  background-color: var(--fg-color);
  border-color: var(--fg-color);
}
*/
.info
{
  text-align: center;
}
@media all and (orientation:portrait)
{
  header, .headerPlace
  {
    height: 10vw;
  }
  .headerCorner
  {
    width: 10vw;
  }
  #panel
  {
    padding: 1vw;
  }
  .center, .center2
  {
    gap: 3vw;
  }
  img
  {
    height: 5vw;
  }
  header>div>div, header>div>a
  {
    font-size: 5vw;
  }
  .gap
  {
    height: 5vw;
  }
  .tooltip:hover span
  {
    border-width: 1vw;
    border-radius: 2vw;
    padding: 2vw;
  }
  table, th, td
  {
    border-width: 0.5vw;
  }
  table
  {
    padding: 3vw;
  }
  th td
  {
    border-radius: 1.5vw;
    padding: 2vw;
  }
}
@media all and (orientation:landscape)
{
  header, .headerPlace
  {
    height: 10vh;
  }
  .headerCorner
  {
    width: 10vh;
  }
  #panel
  {
    padding: 1vh;
  }
  .center, .center2
  {
    gap: 3vh;
  }
  img
  {
    height: 5vh;
  }
  header>div>div, header>div>a
  {
    font-size: 5vh;
  }
  .gap
  {
    height: 5vh;
  }
  .tooltip:hover span
  {
    border-width: 1vh;
    border-radius: 2vh;
    padding: 2vh;
  }
  table, th, td
  {
    border-width: 0.5vh;
  }
  table
  {
    padding: 3vh;
  }
  th td
  {
    border-radius: 1.5vh;
    padding: 2vh;
  }
}