/* 	-------------------------------------------------------------------------------------------------------------- 
	
	◤   ◥	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;
}


   @font-face {
    font-family: OpenDyslexic;
    src: url(/assets/fonts/OpenDyslexic-Regular.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: OpenDyslexic;
    src: url(/assets/fonts/OpenDyslexic-Bold.otf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: OpenDyslexic;
    src: url(/assets/fonts/OpenDyslexic-Italic.otf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: OpenDyslexic;
    src: url(/assets/fonts/OpenDyslexic-BoldItalic.otf);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: IntelOneMono;
    src: url(/assets/fonts/IntelOneMono-Regular.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: IntelOneMono;
    src: url(/assets/fonts/IntelOneMono-Bold.otf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: IntelOneMono;
    src: url(/assets/fonts/IntelOneMono-Italic.otf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: IntelOneMono;
    src: url(/assets/fonts/IntelOneMono-BoldItalic.otf);
    font-weight: normal;
    font-style: italic;
}

/* ------------------------------------------ */
/* ------------- CSS VARIABLES -------------- */
:root {
  
  /* -- General -- */
	--fontBody: Monogram, Sans-Serif;
	--fontSize: 24pt;
	
	--colorScrollbar: white;
	--colorScrollBacking: transparent;
	
	--cursorDefault: url("/assets/def.png");
	--cursorPointer: url("/assets/point.png");
	
  
  /* -- Background -- */
	--colorMainBG: #BFBFBF;
	
	
	/* ------------------------------------------ */
	/* ---------------- Jelly OS ---------------- */
	
	
  /* -- Taskbar -- */
	--taskbarHeight: 50px;
	--taskbarIconSize: 50px;
	--taskbarMinWidth: 12px;
	--taskbarMaxWidth: 200px;
	
	/* Windows */
	--colorText: #703DD0;
	--colorUI: #FFBAD6;
  --colorBorderLight: #FEF1E4;
  --colorBorderDark: #FF80BD;
  
	--colorMarkText: #FFFFFF;
	--colorMarkUI: #703DD0;
	--colorMarkLighterUI: #784ED9;
  --colorMarkBorderLight: #FDEBF7;
  --colorMarkBorderDark: #5737A5;
  
}

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


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

/* ------------------------------------------ */
/* ---------------- 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 {
	background-color: var(--colorUI);
  border: 2px solid;
}
.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);
}