/* this file is loaded by index.html and styles the page */ * { box-sizing: border-box; } body { font-family: sans-serif; margin: 2em 1em; line-height: 1.5em; text-align: center; } h1 { font-style: italic; color: #373fff; line-height: 1.1; } form { background-color: #eee; display: grid; grid-gap: 1em; padding: 1em; max-width: 40ch; margin: 0 auto; } input { border: 1px solid silver; display: block; font-size: 16px; margin-bottom: 10px; padding: 5px; width: 100%; } form button { background-color: #bbbbf2; border: 2px solid currentColor; border-radius: .25em; cursor: pointer; font-size: inherit; line-height: 1.4em; padding: 0.25em 1em; } form button:hover { background-color: lavender; } footer { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid lightgrey; } #buzzer { width: 500px; height: 500px; margin: 0 auto; border-radius: 500px; background: red; border: 4px solid black; box-shadow: 4px 4px 4px rgba(0,0,0,.5); font-size: 4em; color: white; text-shadow: 2px 2px 2px black; } h2 img { max-height: 40px; } figure.participant { display: inline-block; } figure.participant img { max-height: 150px; } figure.participant figcaption { font-weight: bold; font-size: 1.3em; }