html {
  background-color: transparent;   
  background-image: url(hintergrund_games.jpg);
  background-position: center center;
  background-repeat: repeat;
  background-attachment: fixed;
}
body {
     grid-template-columns: 240px 1000px 240px; 
     background-color: transparent;   
     background-image: url(none); 
     background-position: center center;
     background-repeat: no-repeat;
}

header { 
  width: 98%;  
  height: 300px;     
  background-image: url(header_games_.jpg);
  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: #ffffff;
  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: #ffffff;
  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:60px;
  line-height:65px;      
  color: #ffffff;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:center; 
  font-weight:bold; 
  background-image: url(box_header.png);
  background-position: top center;
  background-repeat: no-repeat;	
}

nav li a , aside li a{
  width: 150px; 
  height: 24px;
  line-height: 24px;
  font-weight:bold;
  text-decoration: none;
  color: #ffffff;
  background-image: url(box_c_button.png);  
  background-position: center center;
  background-repeat: no-repeat;	
}

nav li a:hover , nav li .selected , aside li a:hover , aside li .selected{
  color: #00ffff;
  background-image: url(box_c_button_h.gif);  
}

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

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

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

section,main { 
  color: #ffffff;
  font-size: 14px;
  font-family:Arial, sans-serif;
  font-style:normal;
  text-align:center; 
}

section article[name]::before , main article[name]::before {
  width: 740px;    
  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: #ffffff;  
}

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

section article[name]::after , main article[name]::after {
width: 740px;    
height: 35px;
background-image: url(none);
background-position: top center;
background-repeat: no-repeat;	
}

footer { 
  width: 1220px;  
  height: 160px;     
  background-image: url(none);
  background-position: center center;
  background-repeat: no-repeat;
  
}

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 { 
  background-size: contain;
  background-size: 100% 300px;
}
.scrolling_text {	
  width:470px;
  height:35px;   
  top: 19px;
  left: 130px;
}