html,body{ margin:0; padding:0; background:#000; color: #bfbfbf; } hr{ border-top: 1px solid rgba(255, 253, 253, 0.1); } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #bfbfbf; } .table { color:#bfbfbf; } .wrap{ max-width: 1500px; margin: 0 auto; padding: 0 10px; } .wrap > .content{ min-height: 850px; } .codes .code-wrap{ margin-bottom: 15px; } .codes .code-wrap a.btn{ margin-bottom: 5px; } .numbers a{ margin-left: 3px; white-space: nowrap; } @media only screen and (max-width:480px) { /* Smartphone view: 1 tile */ .h1, h1 { font-size: 1.5rem; } .numbers a{ font-size: 1.5rem; } #numbers{ height:500px; overflow:auto; } } @media only screen and (max-width:650px) and (min-width:481px) { /* Tablet view: 2 tiles */ .h1, h1 { font-size: 1.8rem; } #numbers{ height:500px; overflow:auto; } } @media only screen and (max-width:767px) and (min-width:651px) { /* Small desktop / ipad view: 3 tiles */ .h1, h1 { font-size: 2rem; } } @media only screen and (max-width:991px) and (min-width:768px) { /* Small desktop / ipad view: 3 tiles */ } @media only screen and (max-width:1050px) and (min-width:992px) { /* Small desktop / ipad view: 3 tiles */ } @media only screen and (max-width:1290px) and (min-width:1051px) { /* Medium desktop: 4 tiles */ }