@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 400;
    src: url(/font/ms_sans_serif.woff2) format("woff2")
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 700;
    src: url(/font/ms_sans_serif_bold.woff2) format("woff2")
}

@font-face {

	font-family: 'padomela-ldr';

	src: url('/font/padomela-ldr.ttf'); /* Replace with your font file path */

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: 'hypik';

	src: url('/font/hypik.otf'); /* Replace with your font file path */

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: 'GAU_pop_magic';

	src: url('/font/GAU_pop_magic.TTF'); /* Replace with your font file path */

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: 'matrix';

	src: url('/font/matrix.ttf'); /* Replace with your font file path */

	font-weight: normal;

	font-style: normal;

}



.matrixCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	animation: flash 0.25s;
	animation-iteration-count: 8;
	background: url(/life-is-art/NetworkSpirit/NS_wavy4.png) !important;
	background-size: cover !important;
	background-size: auto;
    background-position: center center !important;
    touch-action: none;

}


.desktop {
	background: var(--background)
	
}

/*.desktop {
	background: url(/images/leo7.jpg) !important;
	background-size: cover !important;
	background-size: auto;
    background-position: center center !important;
    touch-action: none;
}*/

.context-menu {
	position: absolute;
	min-width: 180px;
	background: #f0f0f0;
	border: 2px outset #fff;
	box-shadow: 2px 2px 0 #0003;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	font-family: sans-serif;
	z-index: 9999;
}
.context-menu li {
	padding: 4px 12px;
	cursor: default;
}
.context-menu li:hover {
	background: #0a246a;
	color: #fff;
}



.taskbar {
	outline: 1px solid var(--ButtonLight);
	border-top: 1px solid var(--ButtonHilight);
	background: var(--ButtonFace);
	color: var(--ButtonText);
}
.taskbar-divider {
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
}
.taskbar-time {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 12px;
}
.start-menu-titlebar {
	color: white;
    font-weight: 900;
    position: absolute;
    transform: rotateZ(-90deg);
    width: 26rem;
    font-size: 1.35rem;
    font-family: "Pixelated MS Sans Serif";
    background: rgb(1,18,125);
	background: linear-gradient(90deg, rgba(1,18,125,1) 0%, rgba(8,151,209,1) 3%, rgba(0,212,255,1) 5%, rgba(38,72,224,1) 50%, rgba(10,10,163,1) 63%, rgba(1,21,144,1) 79%, rgba(1,14,97,1) 100%);
	background-blend-mode: color-burn;
    left: 0;
    transform-origin: 0 0;
    top: 26rem;
    box-sizing: border-box;
    padding: 0.125rem 0.75rem;
	z-index: 999;
}

.start-menu-titlebar span{
	font-weight: 200;
    font-family: "MS Sans Serif";
    font-size: small;
}

.start-menu li a,
.start-menu .back-link {
	display: block;
	padding: 5px 0;
	color: blue !important; /* regardless of :visited */
}
.start-menu li a:before,
.start-menu .back-link:before,
.the-thing-heading:before {
	content: "»";
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
}
.start-menu .back-link:before {
	content: "«"
}

a[href="LogOff/"]::before {
    content: none !important;
}



.start-menu label {
    height: 4rem;
    float: left;
    cursor: pointer;
    padding: 0 0.5rem 0 0.5rem;
    margin: 0 2.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    width: calc(100% - 3rem);
}

/* ---------- Start Menu Items ---------- */
.start-menu-items {
	/*list-style: none;*/
	margin: 0;
	/*padding: 0;*/
  }
  
  .start-menu-item {
	display: flex;
	align-items: center;
	font-size: 13px;
	line-height: 20px;
	padding: 2px 6px 0px 12px;
	cursor: default;
	white-space: nowrap;
	user-select: none;
  }
  
  /* Optional hover effect for highlight (classic Windows 98 style) */
  .start-menu-item:hover {
	background-color: #0A246A;
	color: white;
  }
  
  /* ---------- Horizontal Dividers ---------- */
  .start-menu-divider {
	display: block;
    height: 1px;
    margin: 5px 6px 3.5px 0px;
    background-color: #dcdcdd;
    height: var(--r95-space-1);
    border-top-style: solid;
    border-top-width: var(--r95-space-1);
    border-top-color: darkgray;
    border-bottom-width: var(--r95-space-1);
    border-bottom-style: solid;
    border-bottom-color: lightgray;
    width: 98%;
    margin-left: var(--r95-space-2);
  }

  .start-menu-item #text{

	margin-left: 10px;
  }
  
  /* ---------- Submenu Arrow ---------- */
  .submenu-arrow {
	margin-left: auto;
	margin-right: 0;
	font-size: 10px;
  }
  
  .has-submenu {
	position: relative; /* So the submenu can be absolutely positioned */
  }
  
  .submenu-list {
	position: absolute;
	top: 0;          /* Aligns with the top of the parent menu item */
	left: 86%;      /* Appear to the right of the parent item */
	display: none;   /* Hidden by default; shown on hover */
	min-width: 150px; /* Adjust as needed */
	z-index: 9999;   /* Make sure it appears on top */
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
    white-space: nowrap;
    user-select: none;
	transform: translateX(20px); /* Off-screen */
  	animation: slide-in 0.3s forwards;
  }

  /* Set submenu image size */
.submenu-item img {
	width: 24px; /* Adjust to desired size */
	height: 24px;
	margin-right: 8px; /* Space between image and text */
  }
  
  /* Set height of each submenu item */
  .submenu-item {
	height: 28px;
	display: flex;
	align-items: center; /* Center the items vertically */
  }

  .submenu-item:hover {
	background-color: #0A246A;
	color: white;
  }
  

  
  .has-submenu:hover > .submenu-list {
	display: block;
	animation: slide-in 0.3s forwards;
	
  }

  #onlineServices {
	top: -55px;
  }

  @keyframes slide-in {
	0% {
	  opacity: 0;
	  transform: translateX(20px); /* Start from off-screen */
	}
	100% {
	  opacity: 1;
	  transform: translateX(0); /* Slide into place */
	}
  }

  .iframe-scale-wrapper {
	/* The wrapper can have a "normal" size that fits in your window */
	position: relative;
                            width: 100%;
                            height: 620px; 
	/* Hide any overflow so you don't see scrollbars for the unscaled content */
	
	/* The transform can scale the content to e.g. 60% size: */
	
  }

  .iframe-scale-wrapper-aim {
	/* The wrapper can have a "normal" size that fits in your window */
	position: relative;
                            width: 100%;
                            height: 640px; 
	/* Hide any overflow so you don't see scrollbars for the unscaled content */
	
	/* The transform can scale the content to e.g. 60% size: */
	
  }

  .iframe-scale-wrapper-aim iframe {
	width: 127%;
                            height: 370px;
                            border: 0;
                            transform: scale(0.8); /* Scale down the iframe content */
                            transform-origin: top left; /* Scale from the top left corner */
  }
  
  /* Because we scaled the wrapper down, we need to make the iframe itself 
	 effectively "bigger" so it fills the wrapper's scaled space. 
	 We do that by setting the iframe to be bigger than 100% in unscaled terms. */
  .iframe-scale-wrapper iframe {
	width: 127%;
                            height: 730px;
                            border: 0;
                            transform: scale(0.8); /* Scale down the iframe content */
                            transform-origin: top left; /* Scale from the top left corner */
  }

  .iframe-scale-wrapper-gif iframe {
	width: 127%;
    height: 730px;
    border: 0;
    transform: scale(0.8); /* Scale down the iframe content */
    transform-origin: top left; /* Scale from the top left corner */
  }
  

.the-thing-heading {
	/* font-size: 1em; */
}
.windows-cant-do-it-you-can {
	margin-top: 2em;
	/* background: white;
	padding: 5px;
	border: inset 1px; */
}
.task.selected {
	font-weight: bold;
}
.desktop-icon {
	position: absolute;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.folder-view:focus {
	outline: none;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]):not([data-view-mode="THUMBNAILS"]) .desktop-icon {
	display: flex;
	flex-direction: row;
	width: 150px;
	height: 17px;
    align-items: center;
}

.folder-view[data-view-mode="DESKTOP"] .desktop-icon,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon,
.folder-view[data-view-mode="THUMBNAILS"] .desktop-icon {
	width: 75px;
	height: 75px;
}
.desktop-icon .title {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	/*font-size: 10px;*/
	font-size: 8pt;
	background: var(--Background);
	color: white;
	position: relative;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
}
.folder-view[data-view-mode="DESKTOP"] .desktop-icon .title,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon .title,
.folder-view[data-view-mode="THUMBNAILS"] .desktop-icon .title {
	margin-top: 5px;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]):not([data-view-mode="THUMBNAILS"]) .desktop-icon .title {
	text-align: start;
    justify-content: start;
	white-space: nowrap;
	height: 17px;
	line-height: 17px;
	padding-right: 2px;
	padding-left: 3px;
}

.folder-view:focus-within .desktop-icon.selected:not(.renaming) .title {
	background: var(--Hilight);
	color: var(--HilightText);
}
.folder-view:focus-within .desktop-icon.focused:not(.renaming) .title::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
}
.folder-view .desktop-icon.renaming .title {
	border: 1px solid var(--ButtonText); /* @TODO: is this the right theme color? */
}
.desktop-icon .title input {
	font: inherit;
	outline: none;
	border: none; /* using border of the .title */
	height: 17px; /* @TODO: auto-size */
	line-height: 13px; /* 17px-4px so the selection highlight doesn't abut the border (height is also important) */
	box-sizing: border-box;
	background: var(--Window);
	color: var(--WindowText);
	text-align: inherit;
	padding: 0;
	align-self: center;
}
.desktop-icon .icon-wrapper .selection-effect {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	mask-image: var(--icon-image);
	-webkit-mask-image: var(--icon-image);
	background: var(--Hilight);
	opacity: 0.5;
}
.folder-view:focus-within .desktop-icon.selected .icon-wrapper .selection-effect {
	display: block;
}
.desktop-icon .icon-wrapper {
	position: relative;
}
.desktop-icon.shortcut .icon-wrapper:after {
	content: var(--shortcut-icon, url("images/icons/shortcut-32x32.png"));
	position: absolute;
	left: 0;
	top: 0;
}
.folder-view .marquee {
	border: 1px dotted #ffffff;
	box-sizing: border-box;
	mix-blend-mode: exclusion;
	/* TODO: fallback for browsers that don't support mix-blend-mode (something like #FF7F7F)... Edge doesn't support @supports either :/ */
	z-index: 1;
}

.help-window .item {
	font-family: 'Segoe UI', sans-serif;
	font-size: 12px;
	padding: 0 2px;
	position: relative; /* for ::after */
}
.help-window .item:hover {
	text-decoration: underline;
	color: #0000FF;
	cursor: pointer;
}
.help-window li:before {
	background-image: url("/images/help-icons.png");
}
.help-window:not(.focused) .item.selected {
	background-color: var(--ButtonFace);
	color: var(--ButtonText); /* ?? */
}
.help-window.focused .item.selected {
	background-color: var(--Hilight);
	color: var(--HilightText);
	/* @TODO: separate focus state of the item */
	outline: 1px dotted black;
	outline-offset: -1px;
}
/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
/* .help-window.focused .item.selected::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px dotted white;
	mix-blend-mode: difference;
} */

.window-switcher {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 350px;
	z-index: 1000;
	user-select: none;
}
.window-switcher * {
	pointer-events: none;
}
.window-switcher-list {
	display: flex;
    margin: 0;
    padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: start;
	max-width: calc(43px * 7);
	margin-top: 17px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
.window-switcher-item {
	display: flex;
	width: 43px;
	height: 43px;
	box-sizing: border-box;
	border: 2px solid transparent;
	padding: 0;
	outline: none;
}
.window-switcher-item.active {
	border: 2px solid var(--Hilight);
}
.window-switcher-item img {
	margin: 3px;
}
.window-switcher-window-name {
    align-self: stretch;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 10pt; /* not sure about the font-size/line-height */
	line-height: 16px;
	font-weight: bold;
	height: 24px; /* should be 25px, but the border is getting screwed up if this isn't an even number */
	box-sizing: border-box;
	padding: 2px;
	margin: 8px 12px;
	margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}



* {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.menu-hotkey {
	/* TODO: remove once this is in os-gui */
	text-decoration-skip: none;
    text-decoration-skip-ink: none;
}

.start-menu li a.no-chevron::before {
	content: "" !important;
	text-decoration: none !important;
	color: black;
  }

  .start-menu-item li a.no-chevron {
	color: black !important; /* or any color you want */
  }
  
  /* 3) Hover color for .no-chevron links 
	 to match the rest of the hovered row (white) */
  .start-menu-item:hover li a.no-chevron {
	color: white !important;
  }

  @property --wipe-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

.wipe {
    --wipe-position: 100%;
    --gradient-length: 20%;
    -webkit-mask-image: linear-gradient(
      to bottom right,
      black var(--wipe-position),
      transparent calc(var(--wipe-position) + var(--gradient-length)),
      transparent
    );

    transition: --wipe-position 600ms cubic-bezier(0, 0.55, 0.45, 1);
}

.wipe:hover {
    --wipe-position: calc(-1 * var(--gradient-length));
}