@media (min-width: 992px) {  
    #navbar {
        display: none;
    }
    .playerCard {
        width: 13rem;
        min-height: 14rem;
    }
    #blackCard {
        float: right;
    }
    #footerButtons {
        display: none;
    }
    #gameBoard {
        min-height: 17rem;
    }
    .candidateCardHolder {
        margin-right: 5px;
    }
}
@media (max-width: 992px) {  
    body {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 20px;
    }
    .candidateCardHolder {
        width: 100%;
    }
    #infoRow {
        display: none;
    }
    #playerRow {
        display: none;
    }
    #footerButtons {
        opacity: 1;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
    .btn {
        padding: 10px;
    }
    .wc_wrapper {
        width: 100%;
    }
    #whiteHand {
        margin-bottom: 40px;
    }
}

body {
    background-color: #121212;
}

hr {
    border-top: 1px solid black;
}
hr.white-hr {
    border-top: 1px solid white;
}

.btn.disabled, .btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

body, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif;
}
.whiteCard:hover {
    -webkit-filter: brightness(85%);
    -moz-filter: brightness(85%);
    -o-filter: brightness(85%);
    -ms-filter: brightness(85%);
    filter: brightness(85%);
    cursor: pointer;
}
#submittedWhiteCards {
    padding: 0px 10px 20px 10px;
}
.whiteCard {
    color: #121212;
    
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.whitePaper {
    background-color: #f0f0f0;
    background-image: url("groovepaper.png");
}

.bluePaper {
    background-color: #375a7f;
    background-image: url("groovepaper.png");
}

.blackPaper {
    background-color: #303030;
    background-image: url("binding-dark.png");
}