* {
    margin:0;
    padding:0;
}

html {
    --size: min(95dvh, 95dvw);
    --pix: calc(var(--size) / 128);
    --font-size: calc(var(--pix) * 10);
}

body {
    background-color: gray;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    align-content: center;
}

p {
    display: inline-block;
}

#item p:last-child {
    float:right;
    margin-right: 0;
}

#item p:first-child {
    margin-left:0;
}

#item p {
    margin: 0 auto;
}

#item {
    border: var(--pix) solid;
}

#main {
    width: var(--size);
    height: var(--size);
    margin: 0 auto;
    background-color: black;
    font-family: monospace;
    font-size: var(--font-size);
    color: white;
    position: relative;
}

#header > *, #footer > * {
    display: inline-block;
    padding: var(--pix);
}

#clock {
    float: right;
}

#footer {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: inherit;
}

#battery #life #remaining {
    background-color: white;
    /*
    height: calc(var(--font-size) * 0.5);
    display: inline-block;
    width: inherit;
    margin-top: calc(var(--font-size) * 0.5);
    */
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
}

#battery #life {
    display: inline-block;
    /*margin: calc(var(--pix) * 2);*/
    margin-right: var(--pix);
    width: calc(var(--pix) * 4);
    height: var(--font-size);
    border: var(--pix) solid;
    box-sizing: border-box;
    position: relative;
}

#battery p {
    vertical-align: top;
}

#header {
    border-bottom: var(--pix) solid;
}

#footer {
    border-top: var(--pix) solid;
}

#header #border {
    box-sizing: border-box;
    border: var(--pix) solid;
}

#userdrag {
    position: absolute;
    z-index: 9;
    background-color: silver;
    border: 1px solid black;
    top:0;
    width:12em;
}

#userdrag #text {
    cursor: move;
    z-index: 10;
    background-color:cornflowerblue;
}

#userdrag #text div {
    #width: 85%;
    display: inline-block;
}

#userdrag #text a {
    width: 1em;
    display: inline-block;
    text-align: center;
}

#userdrag #input {
    display: flex;
    flex-direction: column;
    visibility: visible;
}

#userdrag #input div {
    text-wrap:nowrap;
    display: flex;
    flex-direction: row;
}

#userdrag #input input {
    min-width:0;
    width:60%;
    margin-left: auto;
}

#expand::before {
    content:"▼";
}

#screen_size {
    margin: 0.2em;
    float:right;
}

#checkbox_expand:checked ~ #text #expand::before {
    content:"⏵";
    display: contents;
}

#checkbox_expand:checked ~ #input {
    visibility: collapse;
}

#checkbox_expand {
    display: none;
}