body {
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 95vw;
  color: white;
  background-color: #00004d;
}

div.header {
  display: flex;
  margin: 2vmin;
  height: 4vh;
  background: linear-gradient(rgb(13, 139, 19), rgb(2, 41, 4));
  justify-content: center;
  align-items: center;
  color: #fefefe;
  font-family: sans-serif;
  font-size: 5vmin;
  border: 3px solid #004000;
  padding: 10px;
  border-radius: 20px;
  
}

div.content {
    margin: 2vmin;
    font-family: sans-serif;
    font-size: 3vmin;
    padding: 10px;
}

div.footer {
  display: flex;
  margin: 2vmin;
  height: 5vh;
  align-items: center;
  padding: 2px;
  justify-content: flex-end;
  font-size: 2vmin;
  padding: 10px;
  color: white;
  font-family: sans-serif;
  border-top: 1px solid white;
}

div.spacer
{
    display: block;
    height: 1vh; 
    
}

table.simple
{
	font-family: verdana,arial,sans-serif;
  font-size: 3vmin;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
  border-collapse: collapse; 
}

table.simple th 
{
  border-width: 1px;
  padding: 2vmin;
	color: white;
	border-style: solid;
  border-color: #666666;
}


table.simple td 
{
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
  background-color: #ffffff;
  text-align: left;
}


table.matrix 
{
	font-family: verdana,arial,sans-serif;
  font-size: 3vmin;
	color:#000000;
  border:5px solid white; 
  border-spacing: 4px;
}

table.matrix th 
{
  padding: 1vmin;
	color: white;
  background-color: #07A317; background-image: -webkit-gradient(linear, left top, left bottom, from(#07A317), to(#023307));
}


table.matrix td 
{
	padding: 1vmin;
  background-color: #ffffff;
  text-align: center;
}

table.matrix tr:nth-of-type(odd) td 
{
  background-color: rgb(33, 185, 46);
} 


.field-wrap {
  position: relative;
  margin-bottom: 40px;
}


.form {
  background: rgba(19, 35, 47, 0.9); 
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.login-button {
  display:block;
  /* width:20vw; */
  height:5vh;
  line-height:5vh;
  border: 1px solid #f5f5f5;
  /* border-radius: 40%; */
  color:#f5f5f5;
  text-align:center;
  text-decoration:none;
  background: #464646;
  box-shadow: 0 0 3px gray;
  font-size: 4vmin;
  font-weight:bold;
  float: right;
  padding: 1vh;
}

.login-button:hover {
  background: #262626;
}

.regeln-button {
    display:block;
    /* width:20vw; */
    height:5vh;
    line-height:5vh;
    border: 1px solid #f5f5f5;
    /* border-radius: 40%; */
    color: linear-gradient(to right, red , yellow);
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size: 4vmin;
    font-weight:bold;
    float: left;
    padding: 2%;
  }
  
  .regeln-button:hover {
    background: #262626;
  }


.button_spielregeln
{
    border:1px solid #3D6A2D;-webkit-box-shadow: #B7B8B8 0px 1px 0px ;-moz-box-shadow: #B7B8B8 0px 1px 0px ; box-shadow: #B7B8B8 0px 1px 0px ; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:3vmin;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #07A317; background-image: -webkit-gradient(linear, left top, left bottom, from(#07A317), to(#023307));
    background-image: -webkit-linear-gradient(top, #07A317, #023307);
    background-image: -moz-linear-gradient(top, #07A317, #023307);
    background-image: -ms-linear-gradient(top, #07A317, #023307);
    background-image: -o-linear-gradient(top, #07A317, #023307);
    background-image: linear-gradient(to bottom, #07A317, #023307);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#07A317, endColorstr=#023307);
}

.button_login
{
    float: right;
    border:1px solid #A65621;-webkit-box-shadow: #B7B8B8 0px 1px 0px ;-moz-box-shadow: #B7B8B8 0px 1px 0px ; box-shadow: #B7B8B8 0px 1px 0px ; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:3vmin;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #FF8457; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF8457), to(#7D3207));
    background-image: -webkit-linear-gradient(top, #FF8457, #7D3207);
    background-image: -moz-linear-gradient(top, #FF8457, #7D3207);
    background-image: -ms-linear-gradient(top, #FF8457, #7D3207);
    background-image: -o-linear-gradient(top, #FF8457, #7D3207);
    background-image: linear-gradient(to bottom, #FF8457, #7D3207);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF8457, endColorstr=#7D3207);
}

.button_logout
{
    float: right;
    border:1px solid #A65621;-webkit-box-shadow: #B7B8B8 0px 1px 0px ;-moz-box-shadow: #B7B8B8 0px 1px 0px ; box-shadow: #B7B8B8 0px 1px 0px ; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:3vmin;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #FF8457; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF8457), to(#7D3207));
    background-image: -webkit-linear-gradient(top, #FF8457, #7D3207);
    background-image: -moz-linear-gradient(top, #FF8457, #7D3207);
    background-image: -ms-linear-gradient(top, #FF8457, #7D3207);
    background-image: -o-linear-gradient(top, #FF8457, #7D3207);
    background-image: linear-gradient(to bottom, #FF8457, #7D3207);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF8457, endColorstr=#7D3207);
}