cover.css

 a, a:focus, a:hover {
     color: #fff;
}
 .btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
     color: #333;
     text-shadow: none;
     background-color: #fff;
     border: .05rem solid #fff;
}
 html, body {
     height: 100%;
     background-color: #333;
}
 body {
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: center;
     justify-content: center;
     color: #fff;
     text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
     box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
 .container {
     max-width: 84em;
     margin-top: 24px;
}
 .masthead {
     margin-bottom: 2rem;
}
 .masthead-brand {
     margin-bottom: 0;
}
 .nav-masthead .nav-link {
     padding: .25rem 0;
     font-weight: 700;
     color: rgba(255, 255, 255, .5);
     background-color: transparent;
     border-bottom: .25rem solid transparent;
}
 .nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus {
     border-bottom-color: rgba(255, 255, 255, .25);
}
 .nav-masthead .nav-link + .nav-link {
     margin-left: 1rem;
}
 .nav-masthead .active {
     color: #fff;
     border-bottom-color: #fff;
}
 @media (min-width: 48em) {
     .masthead-brand {
         float: left;
    }
     .nav-masthead {
         float: right;
    }
}
 .cover {
     padding: 0 1.5rem;
}
 .cover .btn-lg {
     padding: .75rem 1.25rem;
     font-weight: 700;
}
 .mastfoot {
     position: absolute;
     color: rgba(255, 255, 255, .5);
     bottom: 0;
     right: 0;
     margin-right: 16px;
}
 canvas#board{
     background-color: #01579B;
     width: 50%;
     box-shadow: 0 0 300px #01579B;
     border-radius: 16px;
     z-index: 400;
}
 #title{
     z-index: 500;
}