@font-face {
font-family:'OffBitBold';
src: url('/fonts/OffBit-101Bold.woff2') format('woff2'),
url('/fonts/OffBit-101Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-weight:bold;
font-style:normal;
}
@font-face {
font-family:'OffBit101';
src: url('/fonts/OffBit-101.woff2') format('woff2'),
url('/fonts/OffBit-101.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-style:normal;
}
.taskbar {
position:fixed;
bottom:0;
left:0;
width:100%;
height:32px;
color: #2f2f2f;
background-color:#ada8a0;
border-top:4px solid #f2eade;
border-bottom:4px solid #2f2f2f;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
}
.win-icon {
display:none;
}
#win-port img {
width:34px;
}
html, body {
font-family:'OffBit101';
text-transform:lowercase;
letter-spacing:.16cap;
margin:0;
padding:0;
width:100%;
height:100%;
background-color:#f2eade;
cursor:default;
}
.desktop {
background-color:#e0d9ce;
background-size:cover;
background-position:0 0;
background-repeat:no-repeat;
height:100%;
width:100%;
}
.icon {
position:absolute;
width:100px;
text-align:center;
user-select:none;
border-radius:2.5px;
cursor:pointer;
}
.icon img {
width:64px;
height:64px;
margin-bottom:4px;
pointer-events:none;
}
.icon-label {
font-family:'OffBitBold';
font-size:14px;
color:#2f2f2f;
text-transform:uppercase;
padding-top:10px;
}
.icon.selected {
background-color:rgba(255, 255, 255, 0.15);
padding:5px;
}
.window-header {
text-transform:uppercase;
font-family:'OffBitBold';
padding:10px;
background-color:#ada8a0;
border-bottom:4px solid #2f2f2f;
display:flex;
justify-content:space-between;
align-items:center;
user-select:none;
cursor:move;
}
.window-header  h2 {
text-transform:uppercase;
font-family:'OffBitBold';
font-weight:normal;
font-size:18px;
color:#2f2f2f;
}
.close-btn {
text-transform:uppercase;
font-family:'OffBitBold';
font-size:18px;
color:#2f2f2f;
z-index:999;
}
a {
color:#2f2f2f;
text-decoration:underline;
}
.icon-mini {
position:static; /* flow inside container */
width:100px;
margin: 10px;
font-size:12px;
text-align:center;
color:#2f2f2f;
user-select:none;
border-radius:0;
cursor:pointer;
}
.icon-mini img {
width:48px;
height:48px;
}
.icon-mini.icon-label {
margin-top:10px;
font-size:12px;
color:#2f2f2f;
text-shadow:none;
}
.window-content::-webkit-scrollbar {
width:20px;
background:#f2eade;
}
.window-content::-webkit-scrollbar-track {
background:#ada8a0;
border:4px solid #2f2f2f;
border-radius:0;
}
.window-content::-webkit-scrollbar-thumb {
background-color:#f2eade;
border:4px solid #2f2f2f;
border-radius:0;
}
.window-content::-webkit-scrollbar-thumb:hover {
background-color:#2f2f2f;
}
html, body {
overflow-x:hidden;
overflow-y:auto;
padding:0;
margin:0;
width:100%;
height:100%;
color:#f2eade;
cursor:default;
}
.window.open {
overflow-x:hidden;
overflow-y:auto;
display:flex;
}
.window-header {
text-transform:uppercase;
font-family:'OffBitBold';
background-color:#ada8a0;
border-top:4px solid #f2eade;
border-bottom:4px solid #2f2f2f;
display:flex;
justify-content:space-between;
align-items:center;
user-select:none;
cursor:move;
flex-shrink:0;
}
.window-content {
overflow-x:hidden;
overflow-y:auto;
margin:10px;
font-size:12px;
padding-right:18px; /* or adjust as needed */
box-sizing:border-box; /* ensure padding doesn’t increase overall width */
}
.window {
position:absolute;
top:20%;
left:20%;
background:#f2eade;
color:#2f2f2f;
border:4px solid #2f2f2f;
box-sizing:border-box;
flex-direction:column;
display:none;
overflow-x:hidden;
overflow-y:auto;
box-shadow:8px 8px 0 #2f2f2f;
}
#portfolio-icon img {
width:80px;
}
#flwrs, #hello {
width: 25vw;
height: 50vh;
overflow:hidden;
flex-direction:column;
resize:none !important;
}
#flwrs .window-content *, #hello .window-content *, .window #flwrs *, .window #hello *, #flwrs *, #hello *  {
resize:none !important;
overflow: hidden;   
}
#flwrs .window-content {
overflow:hidden;
padding:0;
margin:0;
}
#flwrs .window-content img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.square {
width:100%;
overflow:hidden;
border:4px solid #2f2f2f;
}
.square img {
width:100%;
height:100%;
object-fit:contain; /* Or use 'contain' depending on effect */
display:block;
}
@media (max-width: 399px) {
.window-content {
font-size:10px !important;
}
.icon,
.icon-mini {
font-size:10px !important;
}
.window-header h2,
.taskbar-date,
.taskbar p,
.icon-label {
font-size:12px !important;
}
}
.window-content::-webkit-scrollbar {
width:24px;
}
.window.sticky-note {
background-color:#ada8a0;
border-color:#2f2f2f;
box-shadow:8px 8px 0 #2f2f2f;
}
.window.sticky-note > .close-btn {
align-self:flex-end;
}
.window.sticky-note > .window-header {
border-top:4px solid #f2eade;
background:transparent;
cursor:grab;
user-select:none;
display:flex;
justify-content:flex-end;
border-bottom:none;
}
.taskbar {
font-family:'OffBitBold';
position:fixed;
bottom:0;
left:0;
width:100%;
height:45px;
padding-left: 20px;
padding-right: 20px;
background:#ada8a0;
box-shadow:0px -4px 0px #2f2f2f;
border-top:4px solid #f2eade;
border-bottom:4px solid #2f2f2f;
display:flex;
align-items:center;
box-sizing:border-box;
z-index:999;
}
@media (max-width: 399px) {
.icon img, .icon-mini img {
width:42px;
height:42px;
}
}
a:hover, .icon:hover, .icon-mini:hover {
cursor:url('imgs/misc/click.cur'), auto !important;
}
.taskbar-date {
font-family:'OffBitBold';
text-transform:uppercase;
font-size:15px;
color:#2f2f2f;
user-select:none;
margin-top:2px;
}
.taskbar p {
margin-top:14px;
font-family:'OffBitBold';
text-transform:uppercase;
font-size:15px;
color:#2f2f2f;
}
html, body, .desktop, .desktop *, .taskbar, .taskbar *, * {
cursor:url('imgs/misc/point.cur'), pointer !important;
}
html, body, .desktop, .desktop *, .taskbar, .taskbar * {
cursor:url('imgs/misc/point.cur'), pointer !important;
}
a:hover, .icon:hover, .icon-mini:hover, .icon-mini img:hover, .close-btn:hover {
cursor:url('imgs/misc/click.cur'), pointer !important;
}
html, body, .desktop, a, button {
-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
-webkit-touch-callout:none!important;
-webkit-user-select:none!important;
}
html, body, ul, .window, .window-content {
list-style-type:square;
}