html { font-size: 16px; } body { font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 500; } h1 { font-size: 2.3rem; line-height: 2.7rem; display: block; margin-bottom: 2rem; hyphens: inherit; @include media-breakpoint-up(sm) { font-size: 2.7rem; line-height: 3.3rem; margin-bottom: 0; } } h3 { color: #ff5800; font-size: 1.3rem; line-height: 1.6rem; @include media-breakpoint-up(sm) { font-size: 1.6rem; line-height: 1.9rem; } } p { margin: 0 0 1rem 0; font-size: 1rem; line-height: 1.5rem; break-inside: avoid; @include media-breakpoint-up(sm) { font-size: 1.2rem; line-height: 1.6rem; } @include media-breakpoint-up(xl) { font-size: 1rem; line-height: 1.4rem; } &.right { text-align: right; } &.box { padding: 7px; margin: -7px -7px 2rem; background: $alternate-bg; color: #333; border-radius: 5px; a { box-shadow: 0 2px 0 #FFF; } &.green { background: $donationCounter_dark; color: white; } } } em { font-style: italic; } strong { font-weight: 700; } a { color: #FFF; text-decoration: none; box-shadow: 0 2px 0 #ff5800; .even & { box-shadow: 0 2px 0 #FFF; } } ol { list-style-type: none; list-style-position: outside; counter-reset: li; margin: 0 0 2rem; li { line-height: 1.4rem; counter-increment: li; &::before { content: counter(li, decimal-leading-zero); font-family: 'Roboto Mono', monospace; font-weight: 500; color: $color-international-orange; display: inline-block; width: 2rem; margin-left: -2.5rem; text-align: right; padding-right: .5rem; } @include media-breakpoint-up(sm) { font-size: 1.2rem; line-height: 1.6rem; } @include media-breakpoint-up(xl) { font-size: 1rem; line-height: 1.4rem; } } ol { margin: 0 0 0 .5rem; } } ul { line-height:1.5rem; } table { td:first-child { font-weight: bold; text-align: right; line-height: 1.4rem; padding-right: .5rem; word-break: keep-all; } @include media-breakpoint-up(sm) { font-size: 1.2rem; line-height: 1.6rem; } @include media-breakpoint-up(xl) { font-size: 1rem; line-height: 1.4rem; } }