* { box-sizing: border-box; } .button-bar { display: flex; text-align: center; justify-content: center; margin: 1em 0; } .button { background-color: #fc6fdd; color: #f7f7f7; text-align: center; text-decoration: none; padding: 8px 1.2em; margin: 0 10px; transition: background-color .1s; } .button:hover { background-color: #f444ce; } body { background-color: #f7f7f7; } body p { line-height: 1.6; } #carrd-container { font-size: 90%; } #carrd-container p { line-height: 1.5; } #carrd-container ul { box-sizing: content-box; margin-right: 5%; text-align: left; line-height: 1.5; } [class*=col-] { width: 100%; padding: 0 15px; float: left; } .col-center { width: 100%; } .col-left, .col-right { width: 0; } .col-center header, .col-center main, .col-center footer, .col-center article { padding: 10px auto; } .emphasis { background-color: rgba(144, 144, 144, 0.25); } @media only screen and (min-width: 768px) { .col-left, .col-right { width: 20%; } .col-center { width: 60%; } [class*=col-] { padding: 5px; } #carrd-container { font-size: 100%; } #carrd-container ul { text-align: center; list-style-position: inside; } #dms { margin: 1em; } } footer p { font-size: small; }