*, *:before, *:after { box-sizing: border-box; } html { font-size: 62.5%; } html, body { margin: 0; height: 100%; widows: 100%; } body { background-color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.6rem; color: #FFFFFF; } label { display: block; margin-bottom: .8rem; font-size: 1.4rem; font-weight: 500; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1.2rem; font-weight: 500; } .container { display: block; margin: auto; max-width: 35em; padding: 2.4rem; } .section { background-color: #FFFFFF; padding: 2.4rem; color: #333; } .choices { margin-bottom: 2.4rem; position: relative; } .choices__inner { background-color: #f9f9f9; padding: .75rem .75rem .375rem; border: 1px solid #DDDDDD; border-radius: .25rem; font-size: 1.4rem; } .choices__inner:focus { outline: 1px solid #00BCD4; outline-offset: -1px; } .choices__list { margin: 0; padding-left: 0; list-style-type: none; } .choices__list--items { display: inline; } .choices__list--items .choices__item { display: inline-block; border-radius: .8rem; padding: .4rem .8rem; font-size: 1.2rem; margin-right: .375rem; margin-bottom: .375rem; background-color: #00BCD4; border: 1px solid #00a5bb; color: #FFFFFF; cursor: pointer; } .choices__list--items .choices__item.is-selected { background-color: #00a5bb; } .choices__input { background-color: #f9f9f9; font-size: 1.4rem; padding: 0; margin-bottom: .5rem; display: inline-block; vertical-align: baseline; border: 0; border-radius: 0; max-width: 100%; padding: .4rem 0 .4rem .2rem; } .choices__input:focus { outline: 0; }