* {
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    color: #fff;
    background-color: #000;
    line-height: 25px;
    font-size: 16px;
    font-style: normal;
    font-family: 'Victor Mono', Consolas, 'Liberation Mono', Menlo, 'Courier New', Courier, monospace;
    font-optical-sizing: auto;
    font-feature-settings: 'ss07' 1;
}

.container {
    width: 100%;
    height: 100%;
    border: 0;
    border-spacing: 0;
    z-index: 10;
}

.box {
    width: 100%;
    height: 25%;
    border: 0;
}

.box .wrap {
    border: 0;
}

.box.addr      { color: #fff; }
.box.addr.v4   { color: #cfe1b1; }
.box.addr.v6   { color: #c3b1e1; }
.box.addr.busy { color: #888; }

.box.back .shade {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 1;
    transition: opacity .2s;
}
.box.back.done .shade {
    opacity: 0;
}

.box.addr .label {
    font-size: 1.125em;
    line-height: 1.5em;
    margin: 0 6em;
    margin: 0 14vw;
    margin: 0 14dvw;
}

.box.addr .value {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.box.addr.v4 .value {
    font-size: 3em;
    font-size: 5vw;
    font-size: 5dvw;
    line-height: 1.5em;
}
.box.addr.v6 .value {
    font-size: 2em;
    font-size: 3.5vw;
    font-size: 3.5dvw;
    line-height: 1.5em;
}

.box.addr .value .sep     { color: #fff; }
.box.addr .value .sep.off { color: #444; }

.box.addr      .value .num .p { color: #444; }
.box.addr      .value .num .v { color: #888; }
.box.addr.done .value .num .v { color: #fff; }

.box.addr .copy {
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-size: .75em;
    line-height: 1.5em;
}
.box.addr .copy .text {
    border-bottom: 1px solid;
}
.box.addr .copy.off {
    color: #444;
    cursor: default;
}

.info {
    font-size: .75em;
    line-height: 1.5em;
    background-color: #222;
    padding: 5px 10px;
    box-shadow: 0 0 10px #888;
    border: 0 solid #e1c3b1;
    border-bottom-width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.info a {
    color: inherit;
    text-decoration: underline;
}

@supports (writing-mode: sideways-lr) {
    body { display: flex; }
    .container { flex: 1 0; }
    .info {
        flex: 0 0;
        writing-mode: sideways-lr;
        border-bottom-width: 0;
        border-right-width: 2px;
        padding: 10px 5px;
        position: relative;
        top: initial;
        left: initial;
        right: initial;
    }
}