-body {
- background-color: #333738;
- font-family: sans-serif;
- line-height: 1.5;
-}
-
-#page {
- margin-top: 36px;
- margin-bottom: 36px;
- padding-top: 30px;
- padding-bottom: 30px;
- padding-left: 10px;
- padding-right: 10px;
- background-color: white;
- margin-left: auto;
- margin-right: auto;
-}
-
-/* For a wide screen, just use the center of the window for content. */
-@media screen and (min-width: 500px) {
- #page {
- max-width: 720px;
- padding-left: 50px;
- padding-right: 50px;
- }
-}
-
-/* And when the screen is narrow, let's kill the wasted vertical space
- above it too. */
-@media screen and (max-width: 499px) {
- body {
- background-color: white;
- }
- #page {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
- }
-}
-
h1 {
color: #333738;
- font-size: 150%;
- font-weight: bold;
}
h2 {
color: #333738;
- font-size: 110%;
- font-weight: bold;
}
p,dl,dd {
margin-bottom: 1em;
}
-/* Default message severity is "info" but can be overriden. */
-.message {
- padding: 1em;
- background-color: #44c7ef;
- color: white;
- transition: 0.3s;
- margin-bottom: 0.5em;
- font-weight: bold;
-}
-
-.success {
- background-color: #44c7ef;
-}
-
-.warning {
- background-color: #ffa92a;
-}
-
-.danger {
- background-color: #f56257
-}
-
-.hide-button {
- color: white;
- font-weight: bold;
- float: right;
- font-size: 150%;
- cursor: pointer;
-}
-
-.hide-button:hover {
- color: black;
-}
-
.show-state-join {
display:none;
}
}
input {
- width: 100%;
-}
-
-input {
- box-sizing: border-box;
-
height: 40px;
-
- padding: 10px 12px;
-
- border: 1px solid #287789;
- border-radius: 4px;
-}
-
-input:focus {
- border: 2px solid #44c7ef;
-}
-
-button {
- display: inline-block;
- border-radius: 4px;
- background-color: #287789;
- border: none;
- color: white;
- text-align: center;
- font-size: 125%;
- margin-top: .25em;
- padding-top: 0.25em;
- padding-bottom: 0.25em;
- width: 200px;
- transition: all 150ms ease;
-}
-
-button:hover {
- transform: translateY(-1px);
- background-color: #44c7ef;
-}
-
-:focus {
- outline: none;
-}
-::-moz-focus-inner {
- border: 0;
}
#character-reveal {