body {
    margin: 0px;
/*    padding: 0px;*/
/*    line-height: 1.25;*/
/*    text-align: center;*/
    width:100%;
    height:100%;
}
#page
{
    margin: 16px auto 16px auto;
    padding: 16px;
    text-align: left;
    width: 640px;
    background: #fff;
    box-shadow: 4px 4px 8px 0px #888;
}

h1 {
    font-size: 120%;
    margin: 0.5ex;
}
h2 {
    font-size: 110%;
    margin: 0.5ex;
}
h3 {
    font-size: 100%;
    margin: 0.5ex;
}

ul {
    margin: 0.5ex;
}

input {
    font-size:100%;
}

button {
    font-size:100%;
}
  
.panel_caption_caption {
    margin: 0px;
    padding: 4px;
    word-break: break-word;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.panel_caption_caption > span:hover {
    border: solid 2px #808080;
    margin: -2px;
}
.panel_caption_caption_while_typing {
    border-top: 1px solid #808080;
    font-size: 75%;
    line-height: 1.4;
    opacity: 0.75;
    margin: 2px 0px 0px 0px;
    padding: 4px;
    word-break: break-word;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.panel_caption_terminal-symbol {
    background-color: #808080;
    border: solid 1px #808080;
    margin: 0px 2px 0px 2px;
    padding: 0px 2px 0px 2px;
    opacity: 0.67;
}

/* animation */
@keyframes keys_ready_to_start {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.ready_to_start {
    animation: keys_ready_to_start 0.5s ease-in-out 0s 1 alternate;
}