* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { font-size: calc(16px + 6 * ((100vw - 320px) / 1200)); height: 100%; background: $color-background; } body { min-height: 100%; margin: 0; padding: 2.5rem 0 0; background: $color-background; color: $color-text; font-family: $sans-serif; line-height: 1.6; letter-spacing: 0.02rem; } main { background: $color-white; color: $color-black; } section { padding: 2rem 2rem 6rem; @media (max-width: $media-s) { padding: 1rem 1rem 3rem; } } a { color: $color-link; &:hover { color: $color-hover; } } p { max-width: $width-m; margin: 0 auto 2rem; &.lead { font-size: 1.3rem; text-align: center; line-height: 1.3; margin-bottom: 4rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 auto 1rem; } h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } h3 { font-size: 1.6rem; } img { max-width: 100%; height: auto; } figure { margin: 2rem 0; } button, .button { display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05rem; color: $color-black; background: $color-orange; width: 100%; max-width: $width-m; padding: 0.6rem 2rem; margin-bottom: 1rem; transition: all .1s ease-in-out; &:hover { color: $color-black; background: $color-yellow; } } .table-wrap { max-width: 100%; overflow: scroll; } table, td, th { line-height: 1.3; border: 1px solid black; } td, th { padding: 0.6rem 0.8rem; } .iframe-wrap { width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } input, textarea { font-size: 1rem; font-family: inherit; border: 2px solid $color-black; background: $color-white; color: $color-black; padding: 0.4rem 0.6rem; &:focus { outline: none; border-color: $color-yellow; } } label { font-weight: 700; }