* {
    box-sizing: border-box;
}
body {
    background-color: #101010;
    color: #ddd;
    color: rgba(255, 255, 255, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    padding: 1em;
}
.logo {
    max-width: 500px;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
input[type=text] {
    display: block;
    width: 100%;
    font-size: 1em;
    color: inherit;
    background: #292929;
    border: 0.16em solid #292929;
    border-radius: 0.2em;
    padding: 0.6em 0.8em;
    font-family: inherit;
}
input[type=text]:focus {
    border-color: #00a4dc;
    outline: none;
}
input[type=text]::placeholder {
    color: #666;
    color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

button {
    width: 100%;
    color: #fff;
    background: #00a4dc;
    border: none;
    border-radius: 0.2em;
    font-size: 1em;
    padding: 0.75em 1.5em;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    outline: none;
    font-family: inherit;
}
button:hover:not(:disabled) {
    background: #0cb0e8;
}
button:disabled {
    background-color: #292929;
    cursor: default;
    opacity: 0.6;
}
#container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo {
    max-width: 500px;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#title {
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 1.5em;
    font-weight: 400;
    color: #ddd;
    color: rgba(255, 255, 255, 0.8);
    min-height: 1.5em;
    height: 1.5em;
    max-width: 450px;
    width: 100%;
    text-align: left;
    visibility: hidden;
}
#connect-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}
#address {
    margin-bottom: 1em;
    max-width: 450px;
    height: 2.5em;
    visibility: hidden;
}
#address.connecting {
    visibility: hidden;
}
#spinner {
    border: 6px solid #292929;
    border-top: 6px solid #00a4dc;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    display: none;
    position: absolute;
    top: calc(1em + 1.5em + 1.25em);
    left: 50%;
    margin-left: -40px;
}
#connect-button {
    max-width: 450px;
    min-height: 2.5em;
    visibility: hidden;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#connect-button.cancel {
    background: #cb272a;
}
#connect-button.cancel:hover:not(:disabled) {
    background: #d93134;
}