* { box-sizing: border-box; } body { margin: 0; color: #333; font-family: sans-serif; background-color: #eee; } header { padding: 16px; margin: 0 0 48px; font-size: 1.1em; background-color: #fff; } header .container { display: flex; } nav a { margin-left: 12px; } footer { color: #777; margin: 64px 0; padding: 0 32px; } .container { max-width: 720px; width: 100%; margin: 0 auto; } .content { padding: 16px 32px 32px; background-color: #fff; } .spacer { flex: 1; } .bigBtn { display: inline-block; margin-bottom: 12px; padding: 8px 16px; color: #fff; font-size: 1.2em; text-transform: uppercase; text-decoration: none; background-color: #3f9acc; border: 0; border-radius: 8px; cursor: pointer; } .bigBtn:hover { color: #fff; background-color: #72bde6; } h1 { margin: 0; padding: 16px 32px; background-color: #9dd3f0; text-align: center; } h2, h3 { margin-top: 32px; } p { line-height: 1.3em; } a { color: #3f9acc; } a.bigBtn { margin-right: 8px; } code { display: block; padding: 8px; background-color: #eee; border: solid 1px #ddd; user-select: all; } textarea { width: 100%; height: 128px; resize: vertical; } input[type="text"] { margin: 0 12px 12px 0; width: 45%; } input[type="radio"] { vertical-align: sub; } input[type="submit"] { width: 100%; } .green { color: green; } .red { color: red; } .label { display: inline-block; margin: 0 0 8px; } .container--profile { margin-top: 64px; } .container--profile .content { padding-top: 32px; font-size: 1.2em; } .container--profile footer { text-align: center; } .profileDataItem { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } .profileDataItem--separator { margin-top: 1em; font-weight: bold; } .profileDataItem__label { display: inline-block; position: relative; flex: 1; min-height: 32px; padding: 0 8px; max-width: 20%; color: #777; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profileDataItem__value { display: inline-block; flex: 1; min-height: 32px; max-width: 100%; padding: 0 8px; } .profileDataItem__value a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.proofDisplay { margin-right: 8px; } a.proofUrl { color: #777; } a.proofUrl.proofUrl--verified { color: #499539; } a.proofUrl:hover { text-decoration: underline; } @media (max-width: 680px) { .profileDataItem { flex-direction: column; margin-bottom: 8px; } .profileDataItem__label { max-width: 100%; min-height: 28px; text-align: left; } .profileDataItem__value { min-height: 28px; } .profileDataItem--noLabel .profileDataItem__label { display: none; } }