/* 	-------------------------------------------------------------------------------------------------------------- 
	
	◤   ◥	SCRIBBLEMAKES - 95 BOXES THEME
	 SM/C	------------------------------
	◣   ◢	Last updated: 6th May 2024
	
	More widgets, plugins, and themes at: https://scribblemakes.com/code
	
	--------------------------------------------------------------------------------------------------------------

	Welcome to the 95 Boxes Theme style page! This page is a .CSS style page that changes how a .HTML page looks.
	Make sure your .HTML page is correctly connected to this .CSS file. To do that, make sure you have this line 
	of code in the header:
	
		<link href="FILEPATH/scTheme_95Boxes_style.css" rel="stylesheet" type="text/css" media="all">
	
	You can read more about the theme at: https://scribblemakes.com/code#scTheme_95Boxes
	
-------------------------------------------------------------------------------------------------------------- */

/* ----------------- FONTS ------------------ */
@font-face {
  font-family: Atkinson;
  src: url(/assets/fonts/Atkinson-Hyperlegible-Regular-102a.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Atkinson;
  src: url(/assets/fonts/Atkinson-Hyperlegible-Italic-102a.woff2) format('woff2');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: Atkinson;
  src: url(/assets/fonts/Atkinson-Hyperlegible-Bold-102a.woff2) format('woff2');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: Atkinson;
  src: url(/assets/fonts/Atkinson-Hyperlegible-Italic-102a.woff2) format('woff2');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: AGoblinAppears;
  src: url(/assets/fonts/AGoblinAppears.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Monogram;
  src: url(/assets/fonts/monogram-extended.ttf);
  font-weight: normal;
  font-style: normal;
}

/* ------------------------------------------ */
/* ------------- CSS VARIABLES -------------- */
:root {
  
  /* -- General -- */
	--fontBody: Monogram, Sans-Serif;
	--fontSize: 32px;
	
	--colorScrollbar: white;
	--colorScrollBacking: transparent;
	
	--cursorDefault: url("/assets/def.gif");
	--cursorPointer: url("/assets/point.png");
	
  
  /* -- Background -- */
	--colorMainBG: #BFBFBF;
	
	
	/* ------------------------------------------ */
	/* ---------------- Jelly OS ---------------- */
	
	
  /* -- Taskbar -- */
	--taskbarHeight: 50px;
	--taskbarIconSize: 50px;
	
	/* Windows */
	--colorText: #703DD0;
	--colorUI: #FFBAD6;
  --colorBorderLight: #FEF1E4;
  --colorBorderDark: #FF80BD;
  
	--colorMarkText: #FFFFFF;
	--colorMarkUI: #703DD0;
	--colorMarkLighterUI: #784ED9;
  --colorMarkBorderLight: #FDEBF7;
  --colorMarkBorderDark: #5737A5;
  
	--colorBSOD: #4455bb;
  
  --animationOSduration: 0.2s;
	
	/* Minimum Jelly OS screen size */
	--screenAspectRatioWidth: 8;
	--screenAspectRatioHeight: 5;
	--minWidthScreen: 880px; /* The height and width should fit the ratio! */
	--minHeightScreen: 550px;
	--maxWidthScreen: 1328px; /* The height and width should fit the ratio! */
	--maxHeightScreen: 830px;
	/* Space around Jelly OS screen */
	--paddingTop: 140px;
	--paddingBottom: 160px;
	--paddingSides: 200px;
	/* Note:
	The size of jelly-os is set in the script jelly-os-manager.js,
	but the script directly uses the sizes listed above! */
	
	
	/* -- Desktop Background -- */
	--colorDesktopBG: #81AEFF;
	--imageDesktopTop: url("/assets/jelly_os/BG_top.png"); /* Repeats horizontally along top of window */
	--imageDesktopTopSize: 162px;
	--imageDesktopBottom: url("/assets/jelly_os/BG_bottom.png"); /* Repeats horizontally along bottom of window */
	--imageDesktopBottomSize: 210px;
	
  /* -- Icons -- */
	--iconFolder: url("/assets/jelly_os/icon_folder.png");
	--iconComp: url("/assets/jelly_os/icon_comp.png");
	--iconGlobe: url("/assets/jelly_os/icon_globe.png");
	--iconVtube: url("/assets/jelly_os/icon_vtube.png");
	--iconBin: url("/assets/jelly_os/icon_bin.png");
}


/* ------------------------------------------ */
/* --------------- MAIN HTML ---------------- */

* {
	box-sizing: border-box; 
	word-break: break-word;
}

::-webkit-scrollbar {
  cursor: var(--cursorDefault), auto;
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  cursor: var(--cursorPointer), pointer;
  background: #555;
}

html {
	scroll-behavior: smooth; 
	scrollbar-color: red;
}
a, button, input, label {
  color: var(--colorText);
}
p {
  margin-block-start: .5em;
  margin-block-end: .5em;
}
.fill {
	width: 100%;
  height: 100%;
}

/* ------ CURSOR ------ */
body {
	cursor: var(--cursorDefault), auto !important;
	image-rendering: pixelated;
	text-rendering: pixelated;
}
a, button, input, label, div.desktop-icon, .taskbar-window {
	cursor: var(--cursorPointer), pointer;
}


/* ------------------------------------------ */
/* ----------- BODY & BACKGROUND ------------ */

#overall-wrapper {
	margin: 0 !important;
	width: 100%;
  height: 100%;
}
body {
	margin: 0 !important;
	color: var(--colorText);
	width: 100%;
  height: 100%;
	background-color: var(--colorMainBG);
	font-family: var(--fontBody);
	font-size: var(--fontSize);
}
button {
	font-family: var(--fontBody);
	font-size: var(--fontSize);
}


/* ------------------------------------------ */
/* ------------ MONITOR & SCREEN ------------ */

#monitor-inner, #monitor-outer {
  image-rendering: pixelated;
  position: absolute;
  border-image-slice: 13;
  border-image-width: 26px;
  border-image-outset: 22px;
  box-sizing: content-box;
  pointer-events: none;
  z-index: -1;
}
#monitor-inner {
  width: 100%;
  height: 100%;
  border-image-source:url('assets/jelly_os/monitor_inner.png');
  background-color: #A46861;
}
#monitor-outer {
  width: calc(100% + 240px);
  height: calc(100% + 180px);
  left: -120px;
  top: -80px;
  border-image-source:url('assets/jelly_os/monitor_outer.png');
  background: #FCE3B0;
}
#jelly-os {
  position: relative;
  margin: 0 auto;
  min-width: var(--minWidthScreen);
  min-height: var(--minHeightScreen);
}
/* Note: The width and height of jelly-os is set in the script jelly-os-manager.js */

#jelly-wrapper, #jelly-sub-wrapper {
  display: flex;
}
#jelly-wrapper {
  width: round(calc(100vw - 20px), 4px);
  height: round(calc(100vh - 20px), 4px);
  min-width: calc(var(--minWidthScreen) + var(--paddingSides) + var(--paddingSides));
  min-height: calc(var(--minHeightScreen) + var(--paddingTop) + var(--paddingBottom));
  padding: var(--paddingTop) 0 0 0;
}
#jelly-sub-wrapper {
  width: 100%;
  height: 100%;
}


/* ------------------------------------------ */
/* ---------------- DESKTOP ----------------- */

#desktop {
  position: relative;
	height: calc(100% - var(--taskbarHeight));
	clip-path: border-box;
}

/* Desktop Background */
.desktop-bg {
  background: var(--colorDesktopBG);
  position: absolute;
	width: 100%;
  height: 100%;
  display: inline-grid;
  align-content: space-between;
}
.desktop-bg-top, .desktop-bg-bottom {
	background-repeat: repeat-x;
	background-position: center;
}
.desktop-bg-top {
  height: var(--imageDesktopTopSize);
	background-image: var(--imageDesktopTop);
}
.desktop-bg-bottom {
  height: var(--imageDesktopBottomSize);
	background-image: var(--imageDesktopBottom);
}
.desktop-jellyfish {
  position: absolute;
  right: 20px;
}

.blue-screen-of-death {
  background: var(--colorBSOD);
  color: var(--colorMarkText);
  align-content: center;
}
.bsod-title {
  width: max-content;
  background: var(--colorMarkText);
  color: var(--colorBSOD);
  border-bottom: 2px solid var(--colorMarkText);
  border-inline: 6px solid var(--colorMarkText);
}
.bsod-text {
  margin: auto 100px;
}
.bsod-link {
  margin: auto;
  width: max-content;
}
.bsod-link a, .bsod-link a:link, .bsod-link a:visited {
  color: var(--colorMarkText);
}
.bsod-link a:hover, .bsod-link a:active, .bsod-link a:focus {
  color: var(--colorMarkText);
  outline: 2px dashed var(--colorMarkText);
  padding: 2px 4px 4px 4px;
}
/* ------------------------------------------ */
/* ---------------- JELLY OS ---------------- */



.v-line, .h-line {
  background-color: var(--colorText);
  margin: auto;
}
.v-line {
  height: calc(100% - 8px);
  width: 2px;
}
.h-line {
  height: 2px;
  width: calc(100% - 8px);
}

/* ------ NORMAL ------ */
.os-ui-outset, .os-ui-inset, .taskbar-window {
	background-color: var(--colorUI);
  border: 2px solid;
}
.taskbar-window, .os-ui-outset {
  /* Border Outset */
	border-color: var(--colorBorderLight) var(--colorBorderDark) var(--colorBorderDark) var(--colorBorderLight);
}
.os-ui-inset {
  /* Border Inset */
	border-color: var(--colorBorderDark) var(--colorBorderLight) var(--colorBorderLight) var(--colorBorderDark);
}

/* ------ HOVER ------ */
.desktop-icon:hover span, input:hover, #taskbar a:hover, .taskbar-window:hover, .os-ui-hover:hover {
  color: var(--colorMarkText);
}
.desktop-icon:hover span, #desktop-icons .os-ui-hover:hover {
  background-color: var(--colorMarkUI);
  /* Border Outset */
  border-color: var(--colorMarkBorderLight) var(--colorMarkBorderDark) var(--colorMarkBorderDark) var(--colorMarkBorderLight);
}
input:hover, #taskbar a:hover, .taskbar-window:hover, #taskbar .os-ui-hover:hover {
  background-color: var(--colorMarkLighterUI);
  /* Border Outset */
  border-color: var(--colorMarkBorderLight) var(--colorMarkBorderDark) var(--colorMarkBorderDark) var(--colorMarkBorderLight);
}

/* ------ FOCUS ------ */
.desktop-icon:focus {
  outline: none;
}
.desktop-icon:focus > .desktop-icon-text, #taskbar a:focus, button.start-menu-button:focus {
  outline: 2px dashed var(--colorMarkUI);
}
.desktop-icon:focus > .desktop-icon-text, #taskbar a:focus {
  outline-offset: -2px;
}
button.start-menu-button:focus {
  outline-offset: -6px;
}


.taskbar-focus {
  /* Border Inset */
	border-color: var(--colorBorderDark) var(--colorBorderLight) var(--colorBorderLight) var(--colorBorderDark) !important;
}
.taskbar-focus:hover {
  /* Border Inset */
	border-color: var(--colorMarkBorderDark) var(--colorMarkBorderLight) var(--colorMarkBorderLight) var(--colorMarkBorderDark) !important;
}


/* ------ DESKTOP ICONS ------ */

#desktop-icons {
  display: flex;
  position: absolute;
	width: 100%;
  height: 100%;
  padding: 50px 30px 0px 30px;
  gap: 19px;
  line-height: 0.5em;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
.desktop-icon {
  display: grid;
  height: 117px;
  width: 117px;
  justify-items: center;
  align-content: start;
  gap: 2px;
}
.desktop-icon-text {
  background-color: white;
  padding: 4px 4px;
  text-align: center;
}



/* ------ WINDOWS ------ */

.ui-hidden {
	display: none !important;
  visibility: hidden;
}
#window-container {
  pointer-events: none;
  position: absolute;
}
.window {
  display: flex;
  left: 0%;
	width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  padding: 10px;
  flex-direction: column;
  background-color: var(--colorUI);
  border-image-source: url('assets/jelly_os/windows/win_outer.png');
  border-image-repeat: repeat;
  border-image-slice: 4;
  border-image-width: 4px;
  transition-property: width, height, left, padding, visibility, display;
  transition-duration: var(--animationOSduration);
  transition-delay: var(--animationOSduration);
}
.window-focus {
	z-index: 1;
}
.window-minimised {
	width: 0%;
  height: 0%;
  left: 50%;
  padding: 0px;
  visibility: hidden;
}
.window-minimised .window-top, .window-minimised iframe {
  display: none !important;
  visibility: hidden;
}
.window .window-top, .window iframe {
  transition-property: visibility;
  transition-duration: var(--animationOSduration);
  transition-delay: var(--animationOSduration);
}
.window-top {
  display: flex;
  justify-content: space-between;
	height: 30px;
}
.window-title {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


/* -- Window buttons -- */
.window-buttons {
  display: flex;
  align-items: center;
}
.window-buttons input {
  display:none;
}
.window-buttons input + label, .window-buttons input:checked + label {
  height: 22px;
  width: 22px;
  display: inline-block;
  padding: 0 0 0 0px;
}
.window-btn-minimise input + label {
	background-image: url("assets/jelly_os/windows/btn_min.png");
}
.window-btn-size input + label {
	background-image: url("assets/jelly_os/windows/btn_max.png");
}
.window-btn-close input + label {
	background-image: url("assets/jelly_os/windows/btn_x.png");
}
.window-btn-size input:checked + label {
  background-image: unset;
}


/* -- iframe -- */
.window iframe {
  height: 100%;
  margin: 2px 0;
}
.window iframe {
  scrollbar-color: var(--colorScrollbar) var(--colorScrollBacking);
}
.window iframe::-webkit-scrollbar-track {
  background: var(--colorScrollBacking);
}
.window iframe::-webkit-scrollbar-thumb {
  background-color: var(--colorScrollbar);
}



/* ------ TASKBAR ------ */

#taskbar {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content auto max-content;
  justify-content: stretch;
	height: var(--taskbarHeight);
	width: 100%;
	background-color: #FFBAD6;
  padding: 4px;
  gap: 8px;
}

/* -- Start Menu -- */
button.start-menu-button {
	min-width: 100px;
  padding-bottom: 2px;
  text-decoration: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#window-start-menu, #window-guestchat {
  position: absolute;
  bottom: 0;
}
#window-start-menu {
  display: grid;
  gap: 8px;
  padding: 12px;
  width: 350px;
}
#window-guestchat {
  right: 206px;
}

/* -- Open Windows -- */
#taskbar-open-windows {
  display: flex;
  justify-content: start;
  height: 100%;
  grid-auto-flow: column;
  gap: 4px;
}
.taskbar-window {
  max-width: 200px;
  padding: 4px 6px;;
}

#taskbar-right {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}
#icon-area {
  display: flex;
  align-items: center;
}
#icon-area a {
  height: 34px;
  width: auto;
  aspect-ratio: 1 / 1;
  font-size: 24px;
  align-content: center;
}
#os-clock {
  min-width: 60px;
  line-height: 24px;
  margin: auto 4px;
}


/* --------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}