body {
    margin: 0px;
    padding: 32px;
    font-size: 16px;
    font-family: "Consolas", "Andale Mono", monospace;
    /* white-space: pre-wrap; */
}
code {
    display: block;
    font-size: inherit;
    font-family: inherit;
    white-space: pre-wrap;
}

.banner {
    opacity: 0.75;
    position:fixed;
    right: 32px;
    top: 32px;
}

span.number {
    color: rgb(11, 103, 20);
}

span.key {
    color: rgb(22, 32, 110);
}

span.string {
    color: rgb(16, 115, 105);
}

span.boolean {
    color: rgb(91, 9, 0);
}

span.keyword {
    color: rgb(2, 83, 67);
}

.network {
    color: rgb(11, 103, 20);
}

a, .link {
    color: rgb(0, 156, 117);
    text-decoration: none;
}

a:hover, .link:hover {
    color: rgb(80, 121, 111);
    text-decoration: none;
    cursor: pointer;
}
.link:disabled{
    opacity:0.5;
    cursor:not-allowed
}

input.address {
    font-size: 14px;
    font-family: "Consolas", "Andale Mono", monospace;
    clear: both;
    width : 600px;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgb(0, 156, 117);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

input::placeholder {
    font-size: 14px;
    font-family: "Consolas", "Andale Mono", monospace;
}

div.button {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: 15.2px;
    height: 2.5rem;
    line-height: 2.5rem;
    width:fit-content;
    padding: 0 1.5rem;
    text-align: center;
    border: 1px solid rgb(0, 156, 117);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

@media (prefers-color-scheme: dark) {
    body {
        background: rgb(34, 35, 39);
        color: rgb(223, 227, 246);
    }

    span.number {
        color: rgb(151, 222, 132);
    }

    span.key {
        color: rgb(150, 190, 255);
    }

    span.string {
        color: rgb(108, 222, 205);
    }

    span.boolean {
        color: rgb(255, 147, 125);
    }

    span.keyword {
        color: rgb(255, 205, 123);
    }

    .network {
        color: rgb(106, 234, 184);
    }

    a, .link {
        color: rgb(96, 229, 198);
    }

    a:hover, .link:hover {
        color: rgb(166, 245, 225);
    }

    input.address {
        background: rgb(31, 32, 36);
        color: rgb(223, 227, 246);
        border-color: rgb(96, 229, 198);
        box-shadow: rgba(0, 0, 0, 0.34) 0px 3px 6px, rgba(0, 0, 0, 0.4) 0px 3px 6px;
    }

    input::placeholder {
        color: rgb(143, 148, 179);
        opacity: 1;
    }

    div.button {
        color: rgb(223, 227, 246);
        border-color: rgb(96, 229, 198);
        background: rgba(96, 229, 198, 0.08);
        box-shadow: rgba(0, 0, 0, 0.34) 0px 3px 6px, rgba(0, 0, 0, 0.4) 0px 3px 6px;
    }

    .wallet {
        border-color: rgb(84, 88, 116);
        background: rgba(255, 255, 255, 0.03);
    }
}

.wallet{
    padding:10px;
    border:1px solid #DDD;
    border-radius: 5px;
    margin:2px;
    display: inline-flex;
    align-items: center;
    cursor:pointer;
}
.wallet .title{
    font-size:16px;
    margin-left:10px;
}
.wallet .icon{
    width:50px;
    height:50px;
}

@media (max-width: 640px) {
    body {
        padding: 10px 20px 20px;
        font-size: 15px;
    }

    .banner {
        right: 20px;
        top: 10px;
    }

    input.address {
        width: 100%;
        box-sizing: border-box;
    }
}