@font-face {
	font-family: "Hansief";
	src: url('../Assets/Fonts/Hansief.otf') format("opentype");
	/* src: url('https://drive.google.com/uc?id=1Ot9Xg1rVe2TlIOizCh2nk8oXFeA2eZ6q') format("opentype"); */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Raleway";
	src: url("../Assets/Fonts/Raleway-ExtraBold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Roboto";
	src: url("../Assets/Fonts/Roboto-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Gilroy Medium";
	src: url("../Assets/Fonts/Gilroy-Medium.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Gilroy Bold";
	src: url("../Assets/Fonts/Gilroy-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Gilroy Heavy";
	src: url("../Assets/Fonts/Gilroy-Heavy.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Graduate";
	src: url("../Assets/Fonts/graduate-regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Frista";
	src: url("../Assets/Fonts/FRISTARegular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Bohemian Soul";
	src: url("../Assets/Fonts/Bohemian-Soul.otf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Meditative";
	src: url("../Assets/Fonts/Meditative.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Linux_Libertine";
	src: url("../Assets/Fonts/LinLibertine_RZ.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: "Linux_Libertine_Bold";
	src: url("../Assets/Fonts/LinLibertine_RB.ttf") format("truetype");
	font-weight: bolder;
	font-style: normal;
}

:root{
	--Margin-Left: 12%;
	--Margin-Right: 12%;
	--Full-Width-Marginned: calc(100% - var(--Margin-Left) - var(--Margin-Right));
	--UI-Pallete-Level-1: #5390d9;
	--UI-Pallete-Level-2: #5e60ce;
	/* --English-Blue-Level-1: #0936af;
	--English-Blue-Level-2: #0e35a1;
	--English-Blue-Level-3: #06257a;
	--English-Blue-Level-4: #06194d; */
	
	--English-Blue-Level-3L: #0057ff;
	--English-Blue-Level-2L: #003ffe;
	--English-Blue-Level-1L: #0132cc;
	--English-Blue-Base: #0936af;
	--English-Blue-Level-1D: #0e35a1;
	--English-Blue-Level-2D: #06257a;
	--English-Blue-Level-3D: #06194d;

	--English-Orange-Level-3L: #fbe5d9;
	--English-Orange-Level-2L: #f6c7b2;
	--English-Orange-Level-1L: #f0a281;
	--English-Orange-Base: #e76740;
	--English-Orange-Level-1D: #e34f2c;
	--English-Orange-Level-1D: #d53821;
	--English-Orange-Level-1D: #b1281d;


	--Home-Featured-Image-0: url("../Assets/Images/Home/Latest/1.png");
	--Home-Featured-Image-1: url("../Assets/Images/Home/Latest/2.png");
	--Home-Featured-Image-2: url("../Assets/Images/Home/Latest/3.png");
	--Home-Featured-Image-3: url("../Assets/Images/Home/Latest/4.png");
	--Home-Featured-Image-4: url("../Assets/Images/Home/Latest/5.png");

	--Debug-ElementOutline: none;
	/* Root values. This will be loaded when loadSettings() is triggered. */
	--BGColor: rgb(255, 255, 255);
	--Header-Thumbnail-Fade-Color: rgba(255,255,255,100);
	--Header-Title-Color: #171717;
	--Header-Details-Color: #171717;
	--Header-Content-Text-Color: #171717;
	--Article-BGColor: #ffffff;
	/*--BG-WallpaperImg: url(../Assets/Background/default_New.png);*/
	--BG-WallpaperImg: none;
	
	--Element-Transition-Delay: 0.3s; /*Delay on transition */
	--Element-BoxShadow: 0cm 0cm 0.28218705792108cm 0.03527338224013cm rgb( 0, 0, 0, 0.50); /*Box shadow property */
	--Element-Icon-Brightness: brightness(1);
	--Element-Icon-Brightness-Focus: brightness(0);
	--Element-BackdropBlur: blur(20px);
	
	--Text-Color: black; /* Global text color */
	--Text-Font-BranchNavigation: Gilroy Heavy;
	--Text-Font-Primary: Gilroy Medium; /* Titles */
	--Text-Font-Secondary: Raleway; /* Paragraphs, list items */
	--Text-Font-Paragraph: Roboto;
	--Text-Font-Numbers: Roboto; /* For elements mostly composed of numbers */
	
	
	--Accent-Color: #2a9d8f; /* Page's accent color Old: #9f4f52*/ 
	--Accent-Color-Hover: #a03d13; /* Accent color when hovered Old: #9f4f52*/
	--BGColor-General: #171010; /* BG color for everything that does not fall on the categories below */
	--BGColor-Hover: #242424; /* BG color for hovered items */
	--BGColor-Menus: #171010; /* Sidebar, Header */
	--BGColor-Subwindows: #292929; /* Add item, wallpaper selection */
	--BGColor-Dropdowns: #171010; /* Page Navigation, internet status, dropdown inputs */
	--BGColor-Opacitated: rgba(19, 19, 19, 0.5); /* For elements with blur effects */
	--BGColor-ShortcutButtons: #0d0d0d; /* Shortcut buttons */
	--BGColor-Buttons: #1E1E24; /* General buttons, subwindow buttons */
	--BGColor-Input: #121212; /* Input textboxes, dropdowns */
	--Color-Dividers: #282830; /* Divider colors */
}

@media only screen and (max-width: 1300px){
    :root{
        --Margin-Left: 0%;
        --Margin-Right: 0%;
    }
}

:darkmode{
	/* Root values. This will be loaded when loadSettings() is triggered. */
	--BG-WallpaperImg: url(../Assets/Background/gardenofwords.jpg);
	--Element-BackdropBlur: blur(10px);
	--Element-Transition-Delay: 0.3s; /*Delay on transition */
	--Element-BoxShadow: 0cm 0cm 0.28218705792108cm 0.03527338224013cm rgb( 0, 0, 0, 0.50); /*Box shadow property */
	--Element-Icon-Brightness: brightness(1);
	--Element-Icon-Brightness-Focus: brightness(0);
	
	--Text-Color: white; /* Global text color */
	--Text-Font-Primary: Raleway; /* Titles */
	--Text-Font-Secondary: Roboto; /* Paragraphs, list items */
	--Text-Font-Numbers: Roboto; /* For elements mostly composed of numbers */
	
	
	
	--Accent-Color: #9f4f52; /* Page's accent color */
	--Accent-Color-Hover: #9f4f52; /* Accent color when hovered */
	--BGColor-General: #171010; /* BG color for everything that does not fall on the categories below */
	--BGColor-Hover: #242424; /* BG color for hovered items */
	--BGColor-Menus: #171010; /* Sidebar, Header */
	--BGColor-Subwindows: #292929; /* Add item, wallpaper selection */
	--BGColor-Dropdowns: #171010; /* Page Navigation, internet status, dropdown inputs */
	--BGColor-Opacitated: rgba(28, 28, 28, 0.5); /* For elements with blur effects */
	--BGColor-ShortcutButtons: #1E1E24; /* Shortcut buttons */
	--BGColor-Buttons: #1E1E24; /* General buttons, subwindow buttons */
	--BGColor-Input: #121212; /* Input textboxes, dropdowns */
	--Color-Dividers: #282830; /* Divider colors */
}

:lightmode{
	/* Root values. This will be loaded when loadSettings() is triggered. */
	/*--BG-WallpaperImg: url(../Assets/Background/lightmode.jpg);*/
	
	--Element-Transition-Delay: 0.3s; /*Delay on transition */
	--Element-BoxShadow: 0cm 0cm 0.28218705792108cm 0.03527338224013cm rgb( 0, 0, 0, 0.50); /*Box shadow property */
	--Element-Icon-Brightness: brightness(1);
	--Element-Icon-Brightness-Focus: brightness(0);
	--Element-BackdropBlur: blur(10px);
	--Text-Color: white; /* Global text color */
	--Text-Font-Primary: Raleway; /* Titles */
	--Text-Font-Secondary: Roboto; /* Paragraphs, list items */
	--Text-Font-Numbers: Roboto; /* For elements mostly composed of numbers */
	
	
	
	--Accent-Color: #4287f5; /* Page's accent color */
	--Accent-Color-Hover: #4287f5; /* Accent color when hovered */
	--BGColor-General: #9ec3ff; /* BG color for everything that does not fall on the categories below */
	--BGColor-Hover: #80b0ff; /* BG color for hovered items */
	--BGColor-Menus: #f5f5f5; /* Sidebar, Header */
	--BGColor-Subwindows: #6a89bd; /* Add item, wallpaper selection */
	--BGColor-Dropdowns: #6e6e6e; /* Page Navigation, internet status, dropdown inputs */
	--BGColor-Opacitated: rgba(122, 157, 214, 0.5); /* For elements with blur effects */
	--BGColor-ShortcutButtons: #629af5; /* Shortcut buttons */
	--BGColor-Buttons: #629af5; /* General buttons, subwindow buttons */
	--BGColor-Input: #445b80; /* Input textboxes, dropdowns */
	--Color-Dividers: #454545; /* Divider colors */
}