html {
    background-image: linear-gradient(to bottom, black, #162430ff, #647aa3ff);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;  
}

--light-cyan: #e0fbfcff;
--light-blue: #c2dfe3ff;
--tea-rose: #E8C1C5;
--glaucous: #647aa3ff;
--gunmetal: #162430ff;
--rich-black: #111c22ff;

html, body {
   line-height: initial;
   height: 100%;
}

html,body,div,p,table,tbody {
   margin:  0;
   padding: 0;
   border:  0;
}

html,body,input,button {
   color: #c2dfe3ff;
   font-size: 14px;
   font-family: 'Ubuntu Mono', monospace;
}

input, button {
   background-color: #162430ff;
   border: 2px inset #647aa3ff;
   padding: 0.2rem 0.4rem;
}

input[type=submit], a { cursor: pointer; color: #c6a15b; text-decoration: none; }


section:not(:last-of-type) {
   margin-bottom: 1rem;
}


section {
   border: 2px outset #647aa3ff;
   background-color: #111c22ff;
}

section .title, section .footer {
   padding-left: 1rem;
   padding-right: 1rem;
}
section .title {
   background-image: linear-gradient(to bottom right, #647aa3ff, #162430ff);
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
   color: #C0E6DE;
}
section .content { 
   padding-left: 0.5rem;
   padding-right: 0.5rem; 
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
}
section .content b, 
section .content strong
   { color: white; font-weight: 400; }
section .footer { 
   background-image: linear-gradient(to bottom right, #111c22ff, #162430ff); 
   text-align: right;  
   padding-top: 2px; 
   padding-bottom: 2px; 
}
section .footer span { color: #C0E6DE; }
section .content ul {
   margin: 0.5rem 0;
   padding-left: 2rem;
}
section .content ul li {
   list-style-type: square;
}


#grid {
   min-height: 100%;
   margin: 0 auto;
}

#footer { text-align: center; }

#login form label { display: block; }
#login form input { width: 100%; box-sizing: border-box; }
#login form input[type="submit"] { border: 2px outset #647aa3ff; }
#login form div { margin-top: 0.5rem; } 
#login form { margin-bottom: 0.5rem; }

/* lgog */
#logo { padding: 46px 16px 0px 10px; }

/* donations block */
#donate input {
   border: 0;
   padding: 0;
}
#donate h6 { color: #c2dfe3ff; margin-top: 1rem; }
#donate .summ { float: right; }
#donate .sign { color: #555; }

/* games */
#games span { color: #c2dfe3ff; }

/* footer */
#footer { padding: 1rem; }
#footer span {color: #c2dfe3ff;}

/* utility classes */
.text-center { text-align: center; }

#container {
  width: 1200px;
  margin: auto;
}

.flexbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.flexbox table {
  flex:1;
}

#content {
  padding: 4px; 
  background-color: #162430ff;
  border: 2px outset #647aa3ff;
  height: 100%;
}

#left-pane {
  flex: 4;
  margin-right: 10px;
}
#right-pane {
  flex: 1;
}

.pagerow {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  margin-bottom: 2px;
}

#games, #dumps, #screens {
  flex: 1;
}

#deaths {
  flex: 3;
}

#wins {
  flex: 2;
}

.pagerow > div > section {
  height: 100%;
}

#deaths > section > .content, #wins > section > .content {
  background-color:black;
  outline: 2px inset #162430ff;
  margin: 4px;
  margin-bottom: 0px;
}

#deaths > section {
  color: #800000;
}

#wins > section {
  color: #b220b2;
}

div.locationbar { 
	padding-top: 32px; 
}

div.locationbar a { 
	padding: 12px 16px 1px 16px; 
  background-image: linear-gradient(to bottom right, #162430ff, #111c22ff);
  color: #C0E6DE;
  border: 2px outset #647aa3ff;
	border-bottom: 0px solid black;
	font-weight: bold;
  text-decoration: none;
	font-size: 16px;
	font-family: poppinsregular, Helvetica, Arial, sans-serif;
}

div.locationbar a.akt { 
  background-image: none;
  background-color: #162430ff;
  padding-bottom: 3px;
}

big {
  font-size: 1.2em;
  font-weight: bold;
  color: #e0fbfcff;
}

#wins td, #deaths td, #wins tr, #deaths tr {
  margin: 0px;
  padding: 0px;
  line-height: 0.9;
}

#description p {
  margin: 6px;
  font-family: 'Inconsolata', monospace;
  line-height: 1.2;
}

td {
  padding-left: 6px;
}

#games .content {
  margin: 6px;
}

#description a {
  font-weight: bold;
  color: #e0fbfcff;
}