:root {
    --primary_bg: #f4f4f4;
    --primary_color: #111111;
    --default-link_color: #00a7ca;
    --default-font_size: 24px;
    --default-font_family: arial;
    --title-font_size: 2em;
    --title-font-variant_caps: small-caps;
    --line-spacing: calc(var(--default-font_size) * 1.4);
    --paragraph-spacing: calc(var(--default-font_size) * 1);
    --title-spacing: calc(var(--default-font_size) * 2);
}
body, html, h1, h2, h3, h4, p, ul, li {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

header {
    grid-column-start: 1;
    margin-bottom: var(--title-spacing);
}

header a {
    color: black;
    background-color: transparent;
    text-decoration: none;
    text-transform: none;
    margin: 0;
}

header h1 {
    font-size: var(--title-font_size);
    font-variant-caps: var(--title-font-variant_caps);
}

header p {
    font-size: 0.8em;
    font-variant-caps: var(--title-font-variant_caps);
}

.BOX svg {
    max-width: 2em;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    align: right;
}

.point {
    stroke: black;
    stroke-width: 1;
}


header img {
    max-width: 1em;
    height: auto;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 100px;
}

body {
    background: var(--primary_bg);
    color: var(--primary_color);
    font-family: var(--default-font_family);
    font-size: var(--default-font_size);
}

p#demo img {
    max-width: 100%;
}


p#disclaimer {
    font-size: 0.8em;
    color: red;
    text-align: center;
    padding: 0;
    margin-top: 0;
}


a {
    color: var(--default-link_color);
    text-decoration: none;
    border-bottom: 1px dotted;
}


article a:hover {
    color: violet;
    background-color: white;
    text-decoration: none;
}

p {
    line-height: var(--line-spacing);
    margin-bottom: var(--paragraph-spacing); 
}
h2 {
    margin-bottom: var(--paragraph-spacing);
}

section#sidebar {
    grid-column-start: 1;
    font-variant-caps: var(--title-font-variant_caps);
    font-size: 0.8em;
}

section#sidebar ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    margin-right: 3em;
    padding: 0 0 0.3em 0;
}

section#sidebar ul a {
    color: #00a7ca;
    background-color: transparent;
    text-decoration: none;
    text-transform: none;
    margin: 0;
    padding: 0.35em 1ex 0.35em 2mm;
    display: block;
    font-weight: bold!important;
    border-left: black solid 0.2em;
}

section#sidebar ul a:hover {
    color: violet;
    background-color: white;
    border-left: black solid 0.2em;
    text-decoration: none;
}

.sideBarTitle {
    color: black;
    font-weight: bold;
    margin: 0 0 0.5em 2mm;
    padding: 1em 0 0 0;
}


li ul {
  padding-left: 1.0em !important;
}

section#sponsors {
    grid-column-start: 3;
    font-variant-caps: var(--title-font-variant_caps);
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.2em;
}

section#sponsors img {
    width: 150px;
}

article {
}

p#abstract {
    font-style: italic;
    font-size: 1.5em;
    line-height: calc(var(--line-spacing) * 1.5);
    margin-bottom: 1.4em;
}

footer {
    grid-column-start: 3;
    text-align: right;
    margin: auto;
}

footer img {
    vertical-align: middle;
}

footer .utf8power {
    text-decoration: underline;
    margin: auto;
}

footer .utf8power a {
    color: black;
    background-color: transparent;
    text-decoration: none;
    text-transform: none;
    margin: 0;
}

footer img#circle8 {
    max-width: 1em;
    height: auto;
}


footer .ccbysa img {
    max-width: 1.2em;
    height: auto;
}


main {
    display: grid;
    max-width: 100%;
    margin-left: 2em;
    grid-template-columns: 25% 50% 25%;
}

@media (max-width: 667px) {
    main {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
  main { display: flex; flex-flow: column;}
}

main {
    padding: 1em;
}
main article {
    grid-column-start: 2;
    max-width: 900px;
    margin: auto;
    margin-top: 1em;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  margin: auto;
  font-size: calc(var(--default-font_size) * 0.8);
  line-height: calc(var(--line-spacing) * 0.8);
  font-style: normal;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}