body{
margin:0;
font-family:Tahoma,Verdana,sans-serif;
background:linear-gradient(#d7ecff,#a8d0ff);
min-height:100vh;
color:#003366;
overflow:hidden;
}

/* DESKTOP ICON GRID */

#desktop{
position:fixed;
top:2rem;
left:2rem;
right:2rem;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
gap:1.5rem;

max-width:700px;
}

/* ICON */

.desktopicon{
width:100%;
text-align:center;
cursor:pointer;
}

.desktopicon img{
width:48px;
height:48px;
image-rendering:pixelated;
}

.desktopicon div{
font-size:12px;
margin-top:4px;
font-family:Tahoma;
}

.desktopicon:hover{
background:rgba(255,255,255,0.4);
}

.desktopicon a{
text-decoration:none;
color:#003366;
}

/* WINDOWS */

.window{
position:absolute;
top:120px;
left:260px;
width:520px;
height:420px;

background:white;
border:2px solid #5a8bd6;
box-shadow:0 0 12px rgba(0,0,0,0.3);
display:none;

transform:scale(0.95);
opacity:0;
transition:transform 0.15s ease, opacity 0.15s ease;
}

/* MINIMIZED WINDOW FIX */

.window.minimized{
height:auto;
}

.window.minimized .windowcontent{
display:none;
}

.window.active{
transform:scale(1);
opacity:1;
}

.titlebar{
background:linear-gradient(#7db9ff,#3a7bd5);
color:white;
padding:6px;
display:flex;
justify-content:space-between;
cursor:move;
}

.controls{
display:flex;
align-items:center;
}

.controls button{
width:22px;
height:22px;
margin-left:4px;
font-size:12px;
}

.windowcontent{
padding:10px;
height:calc(100% - 32px);
overflow:hidden;
display:flex;
flex-direction:column;
box-sizing:border-box;
}

/* BLOG */

#layout{
display:flex;
flex:1;
overflow:hidden;
}

#sidebar{
flex:0 0 28%;
min-width:150px;
max-width:190px;

background:#f4f9ff;
border:1px solid #8fb4e8;
padding:12px;
overflow-y:auto;
box-sizing:border-box;
}

#content{
flex:1;
padding:15px;
overflow-y:auto;
box-sizing:border-box;
}

.post{
border:1px solid #8fb4e8;
margin-bottom:12px;
background:white;
}

.postheader{
background:linear-gradient(#e5f2ff,#cfe6ff);
padding:6px 10px;
font-weight:bold;
font-size:14px;
}

.postbody{
padding:10px;
font-size:14px;
word-wrap:break-word;
overflow-wrap:break-word;
}

/* EXPLORER */

.explorerbar{
display:flex;
gap:10px;
margin-bottom:10px;
}

.addressbar{
flex:1;
border:1px solid #8fb4e8;
background:#eef6ff;
padding:4px 6px;
font-family:monospace;
font-size:13px;
}

.folder{
padding:6px;
cursor:pointer;
font-family:monospace;
}

.folder:hover{
background:#e8f3ff;
border:1px solid #8fb4e8;
}

.file{
display:flex;
align-items:center;
gap:10px;
padding:5px;
cursor:pointer;
border:1px solid transparent;
}

.file:hover{
background:#e8f3ff;
border:1px solid #8fb4e8;
}

.file img{
width:32px;
height:32px;
object-fit:cover;
image-rendering:pixelated;
}

.file span{
font-family:monospace;
font-size:13px;
}

/* VIEWER */

#viewerWindow{
width:70vw;
height:70vh;
max-width:900px;
max-height:700px;
}

#viewerImage,
#viewerVideo{
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
margin:auto;
}

/* BOOT SCREEN */

#bootscreen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
color:#00ff66;
font-family:monospace;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

#boottext{
font-size:14px;
text-align:left;
}

/* MOBILE */

@media (max-width:700px){

#desktop{
grid-template-columns:repeat(3,1fr);
}

.window{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
border:none;
}

.titlebar{
cursor:default;
}

.controls button{
width:36px;
height:36px;
font-size:16px;
}

.windowcontent{
overflow-y:auto;
}

}

/* TOUCH DEVICES */

@media (hover:none) and (pointer:coarse){

.window{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
border:none;
}

#viewerWindow{
width:100%;
height:100%;
}

}

@media (max-height: 420px) and (orientation: landscape){

#desktop{
gap:10px;
padding:12px;
}

.desktopicon img{
width:38px;
height:38px;
}

.desktopicon div{
font-size:13px;
}

}

@media (hover:hover) and (pointer:fine){

#viewerWindow{
width:45vw;
height:70vh;
max-width:40vw;
max-height:80vh;
}

}

.hidden{
display:none;
}

.mono{
font-family:monospace;
}

.viewerimg{
width:100%;
}