/* 
dana.css
20250823
*/
:root {
    --text-color: silver;
    --background-color: rgb(12,12,12,0.0);
    --monitor-width: 840px;
    --monitor-height: 576px;
    --monitor-border: 24px;
    --monitor-font-height: 24px;
    --monitor-text-color: #c0c0c0;
    --monitor-background-color: #0c0c0c;
}

@font-face { font-family: Apple; src: url('/fonts/Motter Tektura Normal.ttf'); } 
@font-face { font-family: Apple; font-weight: bold; src: url('/fonts/Motter Tektura Normal.ttf'); } 

@font-face { font-family: AppleII; src: url('/fonts/PrintChar21.ttf'); } 
@font-face { font-family: AppleII; font-weight: bold; src: url('/fonts/PrintChar21.ttf'); } 

@font-face { font-family: AppleIIe; src: url('/fonts/PRNumber3.ttf'); } 
@font-face { font-family: AppleIIe; font-weight: bold; src: url('/fonts/PRNumber3.ttf'); } 

html {
    font-family: "Arial", "Helvetica", san-serif;
    margin: 0 auto;
    width: 100%;
    background: var(--background-color) url("/images/dn.png");
    background-repeat: repeat;
    border-color: var(--background-color);
    filter: brightness(150%);
}

body {
    margin: 2px auto;
    padding: 0;
    width: calc(var(--monitor-width) + (var(--monitor-border) * 2));
    background-color: var(--background-color);  
    color: var(--text-color);
    font-family: inherit;
    font-size: var(--monitor-font-height);
    line-height: var(--monitor-font-height);
    filter: brightness(66.7%);
}

#monitor-container {
    position: relative;
    display: block;    
    overflow: hidden;
    margin: 8px auto 0 auto;
    border: 1px solid #404040;
    border-radius: var(--monitor-border);
    padding: var(--monitor-border);
    width: var(--monitor-width);
    height: var(--monitor-height);
    min-height: var(--monitor-height);
    background-color: var(--monitor-background-color);
    color: var(--monitor-text-color);
}

.text_mode {
    position: relative;
    display: block;
    margin: 0 auto;
    border: 0;
    padding: 0;
    overflow: hidden;
    width: var(--monitor-width);
    height: var(--monitor-height);
    min-height: var(--monitor-height);
    max-height: var(--monitor-height);
    background-color: var(--monitor-background-color);
    color: var(--monitor-text-color);
    font-size: var(--monitor-font-height);
    line-height: var(--monitor-font-height); 
    font-family: "AppleII";
    text-transform: uppercase;
}
.text_mode a:hover {
    background-color: var(--monitor-text-color);
    color: var(--monitor-background-color);
    filter: brightness(100%)
}

b, i {
    text-decoration: none;
    background-color: var(--monitor-text-color);
    color: var(--monitor-background-color);    
    font-style: normal;
}

@keyframes flash {
    0%      {background: var(--monitor-text-color); color: var(--monitor-background-color);}
    49%     {background: var(--monitor-text-color); color: var(--monitor-background-color);}
    50%     {background: var(--monitor-background-color); color: var(--monitor-text-color);}
    99%     {background: var(--monitor-background-color); color: var(--monitor-text-color);}
    100%    {background: var(--monitor-text-color); color: var(--monitor-background-color);}
}
b {  /* blink / flash */
  animation: flash 1s infinite;
}

u, txt, pre { 
    margin: 0; padding: 0;
    text-decoration: none;
    white-space: pre;
    font: inherit;
    font-style: normal;
}

center {
    line-height: 1;
}

.nav_bar {
    margin: 0 0 4px 0;
    padding: 1px;
    width: 100%;
    font-size: 10pt;
}
#header_title {
    color: #0058b0;
    font-family: Apple;
    font-size: 14pt;
    text-transform: lowercase;
}
.button {
    display: inline-block; 
    margin: 0 4px;
    border: none;
    padding: 1px;
    align-content: center;
    text-align: left;
    color: var(--text-color);
    background-color: var(--background-color);
    filter: brightness(75%);
    font-size: 16px;
    line-height: 1.0;
}

table {
    margin: 0;
    padding: 0;
    width: 100%;
    font: inherit;
    color: inherit;
}

td {
    margin: 0;
    padding: 0;
    vertical-align: top;
    white-space: nowrap;
    text-align: left;
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    background-color: inherit;  
    color: inherit;
    filter: brightness(200%)
}

img {
    margin: 0;
    padding: 0;
    border: none;
}
.cursor {
    display: inline-block;
    vertical-align: top;
    margin: 6px 0 0 6px;
    transform: scale(3.0);
    line-height: 1.0;
}
.hgr {
    position: relative; 
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    width: var(--monitor-width);
    height: var(--monitor-height);
}
.hgr_text {
    position: relative; 
    z-index: 2;
    margin-top: -100px;
    height: 100px;
    width: 100%;
    background-color: var(--monitor-background-color);
    text-overflow: none;
}
#disk_ii {
    filter: brightness(120%);    
    scale: 2.0; 
    margin-top: 10px; margin-right: 4px;
}

footer {
    margin: 2px;
    width: 100%;
    height: 10px;
    color: grey;
    font-size: 8px;
}
#timestamp {
    text-align: right;
    font-family: sans-serif;
    text-transform: none;
}

#disk_drive {
    position: relative;
    display: block; 
    vertical-align: middle; 
    margin: 0 auto; 
    border-radius: 16px;
    width: 700px; height: 480px; 
    filter: brightness(75%);
}

#file_list {
    visibility: hidden;
    display: block;
    position: absolute; 
    z-index: 2; 
    top: 0; 
    left: 70px;
    width: 700px; height: 480px; 
    margin: 0 auto;
    border: 1px solid black;
    background-color: black; color: var(--monitor-text-color);
    opacity: 0.8;
    columns: 2;
    column-width: 33em;
    font-family: Apple; font-size: 36pt; 
    text-align: center;
    text-transform: lowercase;
    line-height: 1.125;
}
#file_list ul {
    display: block;
    max-height: 360px;
    overflow: auto;
    overflow-y: scroll;
    margin: 20px 100px;
    padding: 0;
}
#file_list li {
    list-style: none;
    text-align: left;
}
#file_list li:before {
    content: "🖬";
    margin: 0 12px 0 0;
    font-size: 16pt;
}

noscript {
    position: relative;
    min-height: var(--monitor-height);
    height: var(--monitor-height);
}

eof{}