body {
margin : 0.5em auto;
max-width : 90em;
font-family : sans-serif;
background : #ccffff;
background : #0e0e0e;
color : #333333;
color : #c9c9c9;
}
header, nav, main, article, section, aside, footer {
border-radius : 0 0.5em 0.5em;
border : solid 1px;
padding : 0.5em;
margin : 0.5em;
}
header {
background : #fdfcf3;
border-color : #0000ff;
}
#logo {
display : inline-block;
text-shadow : none;
color : transparent;
background : url(../img/monogramm.svg);
background-size : contain;
width : 4em;
height : 4em;
}
nav {
background : #e6f2f7;
border-color : #0000ff;
}
section {
background : #ffebe6;
border-color : #0000ff;
}
a.gamebutton {
	text-decoration: none;
	background: #2b2b2b;
	color : #c9c9c9;
	border: 1px solid #1e1c1c;
	padding: 6px;
}
a.gamebutton:hover {
	background: white;
	color : black;
}
main {
display : block;
background : #e4ebf2;
background: #2b2b2b;
border-color : #0000ff;
border-color: #373737;
}
article {
background : #ebf5d7;
background: #3c3b3b;
border-color : #0000ff;
border-color: #1e1c1c;
}
aside {
background : #f1f3f4;
border-color : #0000ff;
}
footer {
background : #fdfcf3;
border-color : #0000ff;
}
address {
text-align : center;
}
.bodydark {
background : #111111;
}
.headerdark {
background : #8a9da8;
}
.navdark {
background : #e6f2f7;
}
.sectiondark {
background : #ffebe6;
}
.maindark {
background : #5d7380;
}
.articledark {
background : #ebf5d7;
}
.asidedark {
background : #f1f3f4;
}
.footerdark {
background : #8a9da8;
}
.logocontainer {
display : flex;
flex-direction : row;
flex-wrap : wrap;
}
.logoitem:nth-of-type(1) {
flex : 50%;
text-align : left;
}
.logoitem:nth-of-type(2) {
flex : 50%;
text-align : right;
font-weight : bolder;
font-size : 2em;
}
.switchcontainer {
display : flex;
flex-direction : row;
flex-wrap : wrap;
}
.switchitem:nth-of-type(1) {
flex : 75%;
text-align : left;
}
.switchitem:nth-of-type(2) {
flex : 25%;
text-align : right;
}
nav {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : flex-start;
align-content : flex-start;
align-items : flex-start;
}
nav img {
width : 2em;
height : 2em;
min-width : 3em;
}
@media screen and (max-width: 60em) {
.overviewcontainer {
flex-wrap : wrap;
}
}
.overviewcontainer {
display : flex;
flex-direction : row;
}
.overviewitemred {
flex : auto;
text-align : left;
border-radius : 0 0.5em 0.5em;
border : solid 1px;
margin : 0.5em;
padding : 0.5em;
box-shadow : 0 4px 10px 0 red;
}
.overviewitemyellow {
flex : auto;
text-align : left;
border-radius : 0 0.5em 0.5em;
border : solid 1px;
margin : 0.5em;
padding : 0.5em;
box-shadow : 0 4px 10px 0 yellow;
}
.overviewitemgreen {
flex : auto;
text-align : left;
border-radius : 0 0.5em 0.5em;
border : solid 1px;
margin : 0.5em;
padding : 0.5em;
box-shadow : 0 4px 10px 0 green;
}
.gamecontainer {
overflow-x : auto;
}
#gametable {
width : auto;
border-collapse : collapse;
background-color : #f0ffff;
}
#gametable th, #gametable tr, #gametable td {
border : black solid 1px;
text-align : center;
vertical-align : middle;
height : auto;
padding : 1px;
}
#tetris {
width : 320px;
}
#tetriscanvas {
display : inline-block;
vertical-align : top;
background-color : #f0ffff;
box-shadow : 0 4px 10px 0 grey;
border : black solid 1px;
width : 150px;
height : 300px;
}
#tetrismenu {
display : inline-block;
vertical-align : top;
position : relative;
width : 150px;
height : 300px;
}
#tetrismenu p {
margin : 0.5em 0;
text-align : center;
}
#tetrisupcoming {
display : block;
margin : 0 auto;
background-color : #f0ffff;
width : 75px;
height : 75px;
}
#tetrisscore {
color : red;
font-weight : bold;
vertical-align : middle;
}
#tetrisrows {
color : blue;
font-weight : bold;
vertical-align : middle;
}