html {
  background-color: transparent;   
  background-image: url(backrounds.gif);  background-position: center center;
  background-repeat: repeat;

}
body {
     width: auto;  
     margin-left:auto;
     margin-right:auto;
     grid-template-columns: 240px 1000px 240px; 
     background-color: transparent;
     background-image: url(xd.png);     background-position: center center;
     background-repeat: no-repeat;
     background-attachment:fixed;
     background-size:cover; 
     background-size:auto 100%;    
}

header { 
  width: 1480px;  
  height: 700px;  background-position: center center;
  background-repeat: no-repeat;
}

header ul {
   top: 96%;
   left: 50%;
   transform: translate(-50%, -50%);
}


header li a{
  width: 120px;   
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-style:normal;
  text-align:center; 
  text-decoration: none;
  color: #e0ffff;
  background-image: url(button_u.png);  background-position: top left;
  background-repeat: no-repeat;	
}

header li a:hover , header li .selected{
  color: #00ffff; 
  background-image: url(button_hover_u.png);}

nav,aside { 
  color: #e0ffff;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:center; 
}

nav article[name]::before , aside article[name]::before {
  width: 220px;    
  height:40px;
  line-height:45px;      
  color: #e0ffff;
  font-size: 18px;
  font-family:Georgia, serif;
  font-style:oblique;
  text-align:center; 
  font-weight:bolder; 
    background-position: top center;
  background-repeat: no-repeat;	
  border-radius: 15px;
  border: 5px solid transparent;
  background-clip: border-box;
  animation: borderAnimation 10s infinite linear; 
}

/* Keyframes für die Rahmenanimation definieren */
@keyframes borderAnimation {
  0% {
      border-color: rgb(133, 186, 229); /* Anfangsfarbe */
  }
  25% {
      border-color: rgb(147, 111, 231); /* Anfangsfarbe */
  }
  50% {
      border-color: rgb(248, 246, 247); /* Mittelfarbübergang */
  }
  75% {
      border-color: rgb(155, 154, 151); /* Anfangsfarbe */
  }
  100% {
      border-color: rgb(80, 77, 109); /* Endfarbe */
  }

}

nav li a , aside li a{
  width: 150px; 
  height: 24px;
  line-height: 24px;
  font-weight:bold;
  text-decoration: none;
  color: #e0ffff;
    background-position: top center;
  background-repeat: no-repeat;	
}

nav li a:hover , nav li .selected , aside li a:hover , aside li .selected{
  color: #00ffff;
   
}

nav a , aside a{
  font-weight:bold;
  text-decoration: none;
  color: #e0ffff;  
}

nav a:hover , aside a:hover{
color: #00ffff; 
}

nav article[name]::after , aside article[name]::after {
width: 220px;    
height: 40px;
background-image: url(Download__3__W5H0BM89.png);background-position: top center;
background-repeat: no-repeat;	
}

section,main { 
  color: #ffff00;
  font-size: 16px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:left; 
}

section article[name]::before , main article[name]::before {
  width: 1000px;    
  height:35px;
  line-height:35px;      
  color: #ffffff;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:center; 
  font-weight:bold; 
  background-image: url(article.png);  background-position: top center;
  background-repeat: no-repeat;	
}

section a , main a{
  font-weight:bold;
  text-decoration: none;
  color: #fffd88;  
}

section a:hover , main a:hover{
color: #00ffff; 
}

section article[name]::after , main article[name]::after {
width: 1000px;    
height: 35px;
background-position: top center;
background-repeat: no-repeat;	
}

footer { 
  width: 1200px;  
  height: 160px;     
  background-image: url(footer_png.png);  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 20px;
  border: 5px solid transparent;
  background-clip: border-box;
  animation: borderAnimation 10s infinite linear;
  margin: 0 auto; 
}

footer ul {
   top: 30%;
   left: 50%;
   transform: translate(-50%, -50%);
}


footer li a{
  width: 120px;   
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-style:normal;
  text-align:center; 
  text-decoration: none;
  color: #ffffff;
  background-image: url(button_u.png);  background-position: top left;
  background-repeat: no-repeat;	
}

footer li a:hover , header li .selected{
  color: #00ffff; 
  background-image: url(button_hover_u.png);}

footer p {
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff; 
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:center; 
}

footer a {
  font-weight:bold;  
  text-decoration: none;
  color: #ffffff; 
}

footer a:hover{
color: #00ffff; 
}

details#mobil_nav li a{
  background-image: url(box_c_button.png);  
}

details#mobil_nav li a:hover , details#mobil_nav li .selected{
  background-image: url(box_c_button_h.gif);
}
  
button,.button {
  background-color: ghostwhite;
  color: black;
  text-align: center;
}

@media screen and (max-width: 1220px) {
article[name]::before{
  background-image: url(article.png);
}
header , footer{ 
  background-size: 100% 100%;
  width: 100%;
  height: 100px;
}
footer p {top: 35%;}
}
header,footer { 
  background-size: contain;
  background-size: 100% 100%;
}

nav article[name]::after { background-image: url(Favorit_Links_png.png);}
.scrolling_text {	
  width:410px;
  height:35px;   
  top: -5px;
  left: 300px;
}