body,a,h1,h2,h3 {
 font-family: stencil, Tahoma, Times;
 font-style: normal;
 /*font-weight: 100;*/
 /*background-color: #000000;*/
 color: #eeeeee;
}

body,a {
 font-size: 150%;
 font-variant: small-caps;
}
/*
body,a {
 font-size: 100%;
}
*/
a:link {
  color: #dddddd;
}
/* visited link */
a:visited {
  color: #bbbbbb;
}

/* mouse over link */
a:hover {
  color: #ffffff;
}

/* selected link */
a:active {
  color: #ffffff;
}

div.bgimage {
  border: 0px;
  position: absolute;
  right: -60px;
  top: -200px;
  name: "bgimage";
}
div.logo {
  border: 0px;
  position: absolute;
  left: 20px;
  top: 32px;
  name: "logo";
}
div.rat {
  border: 0px;
  width: 140px;
  position: absolute;
  left: 130px;
  bottom: 0px;
  name: "rat";
  overflow: hidden;
}
div.bottom {
  border: 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  name: "bottom";
}
div.foto {
  border: 0px;
  position: fixed;
  top: 10;
  right: 0;
  width: 45%;
  name: "foto";
}
div.animal {
  border: 0px;
  position: fixed;
  bottom: 0;
  left: 105px;
  name: "animal";
}
div.links {
  display: grid;
  border: 0px;
  width: 220px;
  height: 70%;
  position: fixed;
  top: 20;
  right: 0;
  name: "links";
}
div.linksv {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 33% 33% 33%;
  grid-auto-flow: row;
  border: 10px;
  height: 220px;
  width: 75%;
  font-size: 180%;
  position: fixed;
  top: 160px;
  left: 20px;
  name: "linksv";
}
div.impressum {
  border: 0px;
  width: 200px;
  height: 50px;
  position: fixed;
  bottom: 20;
  right: 0;
  name: "impressum";
}


div.backgrnd {
  border: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  name: "backgrnd";
}

div.container {
  display: grid;
}

div.flex-container {
  display: flex;
  flex-wrap: wrap;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.scroller {
	scrollbar-color: black red; 
}

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

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 20px;
  font-family: verdana;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 85%;
  left: 40%;
  margin-left: -60px;

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

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

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


/* Buttons */

.linkbutton {
  background-color: #000000;
  color: #eedddd;
  font-family: stencil, Tahoma, Times;
  font-size: 20px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.linkbutton:hover {
  background-color: #222222;
}


.linkbuttonv {
  background-color: #00000000;
  color: #eedddd;
  font-family: stencil, Tahoma, Times;
  font-size: 40px;
  padding: 22px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.linkbuttonv:hover {
  background-color: #222222;
}


.contentbutton {
  background-color: #000000;
  color: #eedddd;
  font-family: stencil;
  font-size: 15px;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contentbutton:hover {
  background-color: #222222;
}

/* close button  overlay */
.closebutton {
  position: absolute;
  right: 00px; 
  top: 0px; 
  width: 40px;
  height: 40px
  background-color: #000000;
}

/* focus overlay */
.focuscontainer {
  position: absolute;
  left: 0px; 
  top: 0px; 
  width: 100%;
  height: 100%;
  background-color: #00000000;
}