@font-face { font-family: 'Spikey'; font-style: normal; font-weight: 300; src: local('schrift'), url('spike.woff') format('woff'); } 

body {
  background: rgba(12, 19, 23, 1.0);
  margin:0; padding:0;
  font-size: 14px; font-family: 'Spikey'; color: rgba(236,240,241);
  background: url('Desktop/002.jpg') no-repeat fixed; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; 
  overflow: hidden; /* Scrollbar verbergen */
}
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}



hr { border: 0.5px solid black; margin:5px; padding:0px; opacity:0.5;}



/* div {border-radius: 5px 5px 5px 5px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.9);} */

.dropup {
 position: relative; 
 display: inline-block;
 z-index: 96;
}

.dropup button {  
 background-color: transparent; /* rgba(22,21,26); */ 
 /* color:  rgba(236,240,241); */
 padding: 0px 0px;
 border: 0px; 
 display: flex; 
 vertical-align: middle;
 cursor: pointer;
 /* font-size: 1.0rem; */
 z-index: 97;
}

.dropup-content { 
 border-radius: 5px 5px 0px 0px;	
 display: none;
 position: absolute;
 bottom: 100%; 
 left: 0;
 background-color: rgba(22,21,26);
 min-width: 160px;
 box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.9);
 z-index: 98;
}

.dropup-content a { 
 color: rgba(236,240,241);
 padding: 5px 5px;
 text-decoration: none;
 display: block;
}

.dropup-content a:hover {
 background-color: rgba(52,51,56);
}


.submenu {
 border-radius: 0px 5px 5px 0px;
 display: none; 
 position: absolute;
 left: 100%; /* Position it to the right of the parent item */
 top: 0;
 background-color: rgba(22,21,26);
 min-width: 160px;
 box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9);
 z-index: 99;
}

.submenu a {
 padding: 5px 5px; 
 background-color: rgba(22,21,26);
}

.submenu a:hover {
 background-color:  rgba(52,51,56);
}

.menu-item:hover .submenu .submenu .submenu {
 display: block;
}

.menu-item { 
  position: relative;
}



div { border: 1px solid #000; }



.container {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}
.div1, .div2 {
    opacity: 0.8;
    /* margin: 0px auto; */
    padding: 5px;
    border: 0px solid #ccc; 
    background-color: rgba(22,21,26);
    
}
.div1 {
    background-color: rgb(52,51,56); 
}
.div2 { text-align: center;
    background-color: rgba(22,21,26); 
}





.Bild {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}





.Link {
 color: rgba(236,240,241);
 margin: 0px; padding: 2px; 
 text-decoration: none;
 display: inline-block;
}
.Link:hover {
 background-color:  rgba(52,51,56);
}






/* Happy Birthday */
.birthday-message {
 white-space: nowrap;
 position: fixed;
 bottom: 33px;
 right: 150px; /* right: 5px; */
 background-color: rgba(22,21,26);
 color: rgba(236,240,241);
 padding: 10px;
 font-size: 30.5px;
 border: 1px solid rgba(30,30,30);
 border-radius: 0px;
 display: none; /* Anfangs unsichtbar */
 /* box-shadow: 0 5px 9px rgba(10, 10, 10, 0.9); */
 z-index: 500;
 width: auto;
 opacity:0.7;
}
/* Für mehrere Nachrichten: untereinander anordnen */
.birthday-message p {
 margin: 5px 0;
}
/* Styling des Schließen-Links */
.close-link {
 color: white;
 text-decoration: underline;
 font-size: 12px;
 cursor: pointer;
 margin: 1px; 
 padding:1px;
 display: block; /* Den Link unterhalb der Nachricht anzeigen */
}
/* Schließen-Link Hover-Effekt */
.close-link:hover {
 color: #ddd;
}






/* xxx */
.xxx {
 white-space: nowrap;
 position: fixed;
 bottom: 35px;
 right: 5px;
 background-color: rgba(22,21,26);
 color: rgba(236,240,241);
 padding: 10px;
 font-size: 14px;
 border: 1px solid rgba(40,40,40);
 border-radius: 10px;
 display: none; /* Anfangs unsichtbar */
 box-shadow: 0 5px 9px rgba(10, 10, 10, 0.9);
 z-index: 500;
 width: auto;
 opacity:0.7;
}
/* Für mehrere Nachrichten: untereinander anordnen */
.xxx p {
 margin: 5px 0;
}
/* Styling des Schließen-Links */
.close-link {
 color: white;
 text-decoration: underline;
 font-size: 12px;
 cursor: pointer;
 margin: 1px; 
 padding:1px;
 display: block; /* Den Link unterhalb der Nachricht anzeigen */
}
/* Schließen-Link Hover-Effekt */
.close-link:hover {
 color: #ddd;
}









input[type="text"] {
  padding: 1px;
  font-size: 14px;
  width: 95%;
  height: 16px;
  border-radius: 3px; 
  border: 0px solid rgba(40,40,40);
  color: rgba(236,240,241); 
  background-color: transparent;
}
input::placeholder {
  color: rgba(236,240,241);
  font-size: 14px;
  opacity:0.3;
}
input:focus { 
    outline: none !important;
    border-color: rgba(40,40,40);
    box-shadow: 0 0 10px rgba(70,70,70);
}


/* Ändert die Breite der Scrollbar */
::-webkit-scrollbar {
  width: 8px;  /* für vertikale Scrollbar */
  height: 8px; /* für horizontale Scrollbar */
}
/* Ändert die Farbe des Scrollbar-Hintergrunds */
::-webkit-scrollbar-track {
  background-color: #000;
}
/* Ändert die Farbe des Scrollbar-Knopfes */
::-webkit-scrollbar-thumb {
  background-color: #000; /* Farbe des Scrollbalkens */
  border-radius: 1px; /* Abgerundete Ecken */
}
/* Ändert die Farbe des Scrollbar-Knopfes im Hover-Zustand */
::-webkit-scrollbar-thumb:hover {
  background-color: #fff; /* Farbe beim Überfahren mit der Maus */
}
/* Für Firefox */
scrollbar-width: thin; /* Schmale Scrollbar */
scrollbar-color: #000 #fff; /* Daumenfarbe und Hintergrundfarbe */
/* Scrollbar komplett ausblenden */
::-webkit-scrollbar {
  display: none;
}