tdf-webseite/style/style.css

* {
 box-sizing: border-box;
}
html {
 font-family: "IBM Plex Mono", "Sometype Mono", "Office Code Pro", "Cousine",
  "Courier New", "Courier", monospace;
 font-size: 1.3vw;
 background: #2d95ab;
 background-image: url("/style/bg.png");
 min-height: 100%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 color: #FFFFFF;
}
body {
 width: 80%;
 min-height: 100%;
 margin: 0% auto;
}
header {
 width: 100%;
 text-align: center;
}
header img {
 width: 50%;
 margin: 1%;
 border: none;
}
nav {
 width: 100%;
 text-align: center;
 z-index: 1;
 background: #000000;
 color: #FFFFFF;
 text-wrap: balance;
 position: sticky;
 top: 0px;
 padding:0.2rem;
}
main {
 width: 100%;
}
article {
 padding: 1rem;
 background: rgba(0, 0, 0, 0.7);
}
footer {
 width: 100%;
 text-align: center;
 background: #000000;
 color: #FFFFFF;
}
div.cont{
 white-space: break-spaces;
}
div.h-box {
 display: flex;
 flex-wrap: wrap;
}
div.h-2items,li.pagefind-ui__result {
 width: 48%;
 display: inline-block;
 margin: 2.5% 1%;
 text-align: center;
 border: solid 1px;
 background: rgba(0, 0, 0, 0.5);
}
div.box{
 border: solid 1px;
 background: rgba(0, 0, 0, 0.5);
 margin: 1%;
 padding: 0% 0.5% 0.5% 0.5%;
 img{
  max-height:15rem; max-width:15rem;
 }
}
h1 {
 text-align: center;
 color: yellow;
}
h2{
 color: yellow;
 font-weight: bold;
 font-size: unset;
}
img {
 display: inline;
}
p.desc{
 text-align: center;
}
p.bar, a.pagefind-ui__result-link{
 display: block;
 text-align: center;
 background: darkblue;
 font-size: smaller;
 margin: 0px 1px;
}
small{
 text-align: center;
 display: block;
}
a {
 color: #FFFFFF;
}
nav a {
 text-decoration: none;
}
a:hover {
 color: #808080;
}
a.current {
 color: #808080;
}
a.btn{
 border: 1px solid;
 border-radius: 0.2rem;
 padding: 0.25rem;
 margin: 0.25rem;
 text-decoration: none;
}
a.btn:hover{
 color: #808080;
}
@media (max-width: 1250px) {
 html {
  font-size: 16px;
 }
 body, nav {
  width: 100%;
 }
}
@media (max-width: 600px) {
 html {
  font-size: 16px;
 }
 html,body,nav {
  max-width: 100%;
  min-width: 100%;
  width: 100%;
 }
 div.h-2items,li.pagefind-ui__result {
  width: 98%;
 }
}
@media print {
 * {
  box-sizing: border-box;
  color: #000000 !important;
  background: #FFFFFF !important;
 }
 a {
  text-decoration: underline !important
 }
}
form.pagefind-ui__form{
 text-align: center;
 white-space: initial;
}
img.pagefind-ui__result-image{
 display: none;
}
div.tt{
 position: relative;
 height: 7600px;
 div{
  padding: 0% 0.5% 0.5% 0.5%;
  position: absolute;
  width: 20%;
  border: solid 1px;
  overflow: hidden;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
 }
 div.loc1{
  left:0%;
 }
 div.loc2{
  left:20%;
 }
 div.loc3{
  left:40%;
 }
 div.loc6{
  left:80%;
 }
 div.loc7{
  left:60%;
 }
  div.loc8{
  display:none;
 }

 #marker{
  display:none;
  color: red; 
  padding-top: 20px;
  background:none;
  background-image: url("/style/fire.gif");
  background-repeat: repeat-x;
  background-position-y: bottom;
  font-size: 2rem;
  width: 100%;
  height: 3.5rem;
  max-height: 3.5rem;
  border: none;
  border-bottom: solid 3px;
  opacity: 0.7;
 }
}
#status{
 position: fixed; 
 top: 5%;
 left:5%; 
 width:90%; 
 height: 90%;
 background: black;
 border: solid 5px;
 margin: 1%;
 padding: 0% 0.5% 0.5% 0.5%;
 display: none;
 overflow: hidden;
 white-space: break-spaces;
 font-size: 1.5rem;
 z-index:888;
 img{
  max-height:15rem;
  margin: 0.5%;
 }
}
#touchBlocker{
 position: fixed;
 top:0%;
 left:0%;
 width:100%;
 height:100%;
 z-index:999;
}
canvas{
 background: unset !important;
}
.invisible{
 display: none;
}