/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
  Rhman
*/

:root {
  
  /* Black
  */

  --bl-1: #000000;
  --bl-2: #1a1a1a;
  --bl-3: #333333;
  --bl-4: #4d4d4d;

  /* White
  */

  --wh-1: #ffffff;
  --wh-2: #f7f7f7;
  --wh-3: #efefef;
  --wh-4: #e5e5e5;
  
  /* Accent
  */

  --ac-1: #003568; /* Dark blue */
  --ac-2: #1a4977; /* Mid-dark blue */
  --ac-3: #2f6f91; /* Teal-blue */
  --ac-4: #7abed9; /* Light aqua */
  
  /* Danger
  */

  --dn-1: #d64242;
  --dn-2: #da5555;
  --dn-3: #de6868;
  --dn-4: #e27b7b;
  
  /* Warning
  */

  --wr-1: #fa9f47;
  --wr-2: #fba959;
  --wr-3: #fbb26c;
  --wr-4: #fcbc7e;
  
  /* Info
  */
  --in-1: #0090e0;
  --in-2: #1a9be3;
  --in-3: #33a6e6;
  --in-4: #4db1e9;
  
  /* Success
  */
  --su-1: #34c240;
  --su-2: #48c853;
  --su-3: #5dce66;
  --su-4: #71d479;

  /* Sets the font size will be 100% of the browser’s default font size,
    it's usually 16px unless the user changed it in their settings.
  */

  font-size: 100%;

  /* Nav */

  --i-width: 54px;
  --l-width: 280px;
  --t-width: calc((var(--i-width) + var(--l-width)) * -1);

}

html,
html[data-theme=light] {

  /*  Primary (Light)
  */

  --pr-1: var(--wh-1);
  --pr-2: var(--wh-2);
  --pr-3: var(--wh-3);
  --pr-4: var(--wh-4);

  /*  Secondary
  */

  --sc-1: var(--bl-1);
  --sc-2: var(--bl-2);
  --sc-3: var(--bl-3);
  --sc-4: var(--bl-4);

}

html[data-theme=dark] {

  /*  Primary (Dark)
  */

  --pr-1: var(--bl-1);
  --pr-2: var(--bl-2);
  --pr-3: var(--bl-3);
  --pr-4: var(--bl-4);
  
  /*  Secondary
  */

  --sc-1: var(--wh-1);
  --sc-2: var(--wh-2);
  --sc-3: var(--wh-3);
  --sc-4: var(--wh-4);

}

html[lang=ar] {
  direction: rtl;
}

body {
  background: var(--pr-1);
  color: var(--sc-1);
}

button, input, output, select, textarea, a {
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}