:root {
    --background: #202030;
    --color: #e0e0ff;
    --color-emph: #e6e6fe;

    --game-ui-color:#202020;
    --game-ui-background: #e0e0e050;
    --game-ui-background-solid: #e0e0e0a0;
}

body {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--background);
}

.header a {
    color:var(--color);
}

.header a:hover {
    color:var(--color-emph);
    text-decoration: none;
}

.header, .footer {
    padding-right: 15px;
    padding-left: 15px;
}
  
.header {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
}

.header h3 img {
    height: 40px;
    width: 40px;
    display: inline-block;
    margin-right: 10px;
}

.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
    margin-top:20px;
}

.card+.card {
    margin-top:20px;
}

#root {
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    z-index:1000;
    display:block;
    position:absolute;
    background:var(--background);
}
  
@media (min-width: 768px) {
    .container {
        max-width: 730px;
    }
}
  
@media screen and (min-width: 768px) {
    .header,
    .footer {
        padding-right: 0;
        padding-left: 0;
    }
}