body { width: 100%; height: 100%; background: white no-repeat center center fixed; background-size: cover; tab-size: 4; -moz-tab-size: 4; } .card-header { background-color: #FEA63C; color: white; font-size: 16px; font-weight: 600; height: 32px; padding-top: 4px; } .list-group-item { height: 32px; padding-top: 4px; } .card, .btn { border: 0px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .navbar { background: transparent !important; } /* Move the navbar contents onto the same line as the toggler */ #navbarCollapse { margin-top: -3rem !important; margin-right: 50px; } /* set the width of the main container based on element width */ @media (max-width: 34em) { #wrapper { width: 90%; } } @media (min-width: 34em) { #wrapper { width: 60%; } } /* change the number of columns in card-columns */ @media (min-width: 34em) { .card-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } @media (min-width: 48em) { .card-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } @media (min-width: 62em) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media (min-width: 75em) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } }