:root 
{
	--win95-bg: #008080; 
	--win95-gray: #c0c0c0;
	--win95-dark: #808080;
	--win95-black: #000000;
	--win95-white: #ffffff;
	--win95-blue: #000080;
}

body, html 
{
    margin: 0; padding: 0; height: 100%;
	font-family: "MS Sans Serif", Arial, sans-serif;
	background-color: var(--win95-bg);
	overflow: hidden;
}


.win95-border 
{
	border: 2px solid;
	border-color: var(--win95-white) var(--win95-dark) var(--win95-dark) var(--win95-white);
}

.win95-border-inset 
{
	border: 2px solid;
	border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
}
    
#desktop 
{ 
	width: 100vw; 
	height: calc(100vh - 30px); 
	position: relative; 
}

.icon 
{
	width: 75px; 
	height: 75px; 
	position: absolute;
	display: flex; 
	flex-direction: column; 
	align-items: center;
	justify-content: center; 
	color: white; 
	text-align: center;
	cursor: pointer; 
	user-select: none;
}

.icon img 
{ 
	width: 32px; 
	height: 32px; 
	image-rendering: pixelated; 
}

.icon-label
{ 
	font-size: 11px; 
	margin-top: 5px; 
	padding: 2px; 
}

.window 
{
	position: absolute; 
	background: var(--win95-gray);
	width: 400px; 
	height: 300px; 
	display: none; 
	flex-direction: column;
	padding: 2px; 
	z-index: 500;
}

.window-title 
{
	background: var(--win95-blue); 
	color: white;
	padding: 3px 5px; 
	display: flex; 
	justify-content: space-between;
	align-items: center; 
	font-weight: bold; 
	font-size: 13px;
}

.title-controls 
{ 
	display: flex; gap: 2px; 
}

.win-btn 
{
	width: 16px; 
	height: 14px; 
	background: var(--win95-gray);
	border: 1px solid; 
	border-color: white black black white;
	font-size: 9px; 
	font-weight:bold;
	display: flex; 
	align-items: center;
	justify-content: center; 
	cursor: pointer; 
	color: black;
}

.window-content 
{ 
	flex-grow: 1; 
	padding: 5px;
	display: flex; 
}

#notepad-text 
{
	width: 100%;
	border: 2px solid;
	border-color: var(--win95-dark) var(--win95-white) var(--win95-white) var(--win95-dark);
	background: white; 
	color: black; 
	outline: none;
	font-family: 'Courier New', monospace; 
	resize: none;
}


  
#taskbar 
{
	height: 30px; background: var(--win95-gray);
	position: fixed; bottom: 0; width: 100%;
	border-top: 2px solid white; display: flex; align-items: center;
	padding-left: 2px; z-index: 1000;
}

.taskbar-start 
{
	height: 22px; padding: 0 5px; font-weight: bold;
	display: flex; align-items: center; gap: 5px;
	cursor: pointer; font-size: 12px;
}

#start-menu 
{
	position: absolute; bottom: 28px; left: 2px;
	width: 180px; background: var(--win95-gray);
	border: 2px solid; border-color: white black black white;
	display: none; flex-direction: column; z-index: 999;
}

.menu-item 
{ 
	padding: 8px 10px; 
	font-size: 12px; 
	cursor: pointer;
	color: black; 
}

.menu-item:hover 
{ 
	background: var(--win95-blue); 
	color: white; 
}

.taskbar-clock 
{
	margin-left: auto; 
	margin-right: 10px; 
	font-size: 12px;
	padding: 2px 10px; 
	color: black;
}

#window-notepad {
    position: absolute;
    display: none;
    flex-direction: column;
    min-width: 300px;
    max-width: 95vw;
    background: var(--win95-silver);
    z-index: 1000;
}

@media (max-width: 600px) {
    #window-notepad {
        width: 90% !important;
        height: 70vh !important;
        left: 5% !important;
        top: 10% !important;
    }

    .window-content textarea {
        font-size: 16px;
    }
}

.window-content {
    flex-grow: 1;
    padding: 2px;
}

#notepad-text {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    resize: none;
}