#page-fade {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
transition: opacity 2.5s ease;
background: var(--yellow);
}

#page-fade.fade-out {
opacity: 0;
}

main {
min-height: 0;
display: grid;
grid-template-columns:250px 1fr 200px;
}

#left,
#center,
#right {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.widget {
width: 100%;
flex: 0 0 auto;
overflow: hidden;
}


.widget p,
.widget ul {
padding: 5px 9px; 
}

.widget ul {
margin: 0;
font-size: 13px;
list-style: none;
}

.art{
height: 260px;
}

.art img{
width:100%;
height:100%;
object-fit:cover; 
display:block;
}

.elsewhere a {
color: var(--cyan);
font-weight: bold;
text-decoration: none;
}

.elsewhere a:hover {
color: var(--lime);
} 

.elsewhere a:hover::after{
content: " ↗";
}

.song-card{
display:flex;
gap:10px;
font-size: 13px;
color: var(--white);
text-decoration:none;
}

.song a:hover{
color: var(--lime); 
}

.song-card img{
width:50px;
height:50px; 

object-fit:cover;
}

.meta{
display:flex;
flex-direction:column;
justify-content:center;
}

#album-list{
height: 174px;
display:grid;
grid-template-columns:repeat(3,1fr);
background-color: var(--lime);
}

.album img{
width:100%;
height:100%;
aspect-ratio:1;

object-fit:cover;
filter: saturate(115%);
image-rendering: pixelated;
}

.album img:hover{
mix-blend-mode: difference;
}

.linkme{
display: flex;
align-items: center;
flex: 1; 
padding: 5px;
text-align: center;
color: var(--black);
background-color: var(--yellow);
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
}

.linkme h1 {
max-height:60px;
padding: 0 5px 5px 10px; 
font-family: Kobata;
font-size: 25px;
font-weight: normal;
border-top: 3px dotted var(--black);
border-right: 3px dotted var(--black);
border-bottom: 4px solid var(--black);
border-left: 4px solid var(--black);
background-color: var(--yellow);
}

.linkme h2{
font-family: MS GOTHIC,monospace;
font-size: 20px;
padding: 0;
}

.linkme a {
color: var(--magenta);
text-decoration: none;
}

.linkme a:hover {
color: var(--cyan); 
text-decoration: none;
}

.linkme span{margin-left: 11px;}

#center {
overflow: hidden;
border-left: 1px solid var(--yellow);
border-right: 1px solid var(--yellow);
}

.terminal{
display:flex;
height:62px;
align-items:stretch;
}

.life{
aspect-ratio:1/1;
border-right:1px solid var(--yellow);
border-bottom:1px solid var(--yellow);
background:var(--black);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-sizing:border-box;
}

#life{
display:block;

width:99%;    
height:100%;
image-rendering:pixelated;
}

.scope{
flex-grow:1;
min-width:0;
border-bottom:1px solid var(--yellow);
display:flex;
flex-direction:column;
overflow:hidden;
}

.scope-screen{
flex:1;
min-height:0;
}

#scope{
display:block;
width:100%;
height:100%;
}

.mnemonicbox{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
grid-auto-rows:minmax(0, 1fr);
height:355px;
gap:3px;
overflow:hidden; 
border: 5px solid var(--black); 
}

.mnemonicbox-entry{
display:flex;
flex-direction:column;
min-width:0;
min-height:0;
padding:5px;
overflow-y:scroll;
color:var(--black);
background:var(--yellow);
}

.mnemonicbox-entry-type{
display:inline-block;
width:max-content;
max-width:100%;
padding:1px 2px;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
line-height:1;
border:1px solid var(--black);
}

.mnemonicbox-entry-title{
font-family:MS Gothic, monospace;
font-size:20px;
font-weight:bold;
text-transform:uppercase;
word-break:break-word;
}

.mnemonicbox-entry-reason{
margin-top:3px;
font-size:13px;
}

.mnemonicbox-entry-footer{
display:flex;
justify-content:space-between;
margin-top:auto;
padding-top:5px;
}

.mnemonicbox-entry-user{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-transform:uppercase;
font-size:10px;
font-weight: bold;
}

.mnemonicbox-entry-user::before{
content:"USER: ";
}

.mnemonicbox-entry-link{
padding: 0 3px ;
font-size:10px;
font-weight:bold;
white-space:nowrap;
text-decoration:none;
text-transform:uppercase;

color:var(--yellow);
background-color: var(--black);
}

.mnemonicbox-loading{
grid-column:
1 / -1;
display:flex;
justify-content:center;
align-items:center;
font-size:20px;
text-transform:uppercase;
color: var(--black);
background:var(--yellow);
}

#right {
overflow-y: auto;
}

#calendar{
display:grid;
grid-template-columns:repeat(7,1fr);
padding: 5px;
gap:5px;
}

.day{
aspect-ratio:1;
padding: 3px;
font-size:10px;
color: var(--grey);
border:1px solid var(--mute); 
background: var(--black);
}

.day.today{
font-size:11px;
font-weight: bold;
color:var(--black);
background:var(--cyan);
}

.field{font-size: 13px;}

.buttons{
display:grid;
grid-template-columns:repeat(2,1fr);
max-height: 533px;
gap: 5px; 
padding: 5px 5px 0 5px;
justify-items: center;
overflow-y:auto;
}

.buttons img{
width:88px;
height:31px;
}