@import url("normalize.css");
@import url("misc.css");
@import url("layout.css");
@import url("colors.css");
@import url("buttons.css");
@import url("forms.css");
@import url("tables.css");
@import url("lists.css");
@import url("text.css");
@import url("dropdown.css");
@import url("utils.css");

/* Fill these variables with your own settings */

:root {
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100vh;

  /* Sets the original font-size to 14 px (14/16; Default font-size is 16) */
  /*font-size: 0.875em;*/
  font-size: calc(0.4em + 1vh);

  /* Base Font-sizes */

  --font-300: 3rem;
  --font-275: 2.75rem;
  --font-250: 2.5rem;
  --font-225: 2.25rem;
  --font-200: 2rem;
  --font-175: 1.75rem;
  --font-150: 1.5rem;
  --font-125: 1.25rem;
  --font-100: 1rem;
  --font-075: 0.75rem;
  --font-050: 0.5rem;

  /* Font Family */
  font-family: "Helvetica Neue";

  --default-template: var(--template-a);
  --small-screen-template: var(--template-a);

  --template-a: "header header header"
    "main main main"
    "footer footer footer";

  --template-b: "header header header"
    "aside main main"
    "footer footer footer";

  --template-c: "header header header"
    "navbar navbar navbar"
    "aside main main"
    "footer footer footer";

  --template-d: "header header header"
    "navbar navbar navbar"
    "main main main"
    "footer footer footer";

  --template-e: "header header header"
    "main main main"
    "main main main";

  /* *** Template Elements Sizes *** */
  --gap-size: 0.25vh;
  --header-h: 15vh;
  --navbar-h: 0vh;
  --footer-h: 5vh;
  --aside-w: auto;
  --main-w: auto;
  --main-h: calc(100vh - calc(var(--gap-size) * 3) - var(--header-h) - var(--navbar-h) - var(--footer-h));

  /* For non-rounded elements set to 0 */
  --border-radius: 0.2em;



  /* The color used in selected elements and colored buttons */
  --primary-color: var(--blue);
  --primary-color-dimmed: var(--blue-dimmed);

  /* Text color */
  --text-color: var(--grey-3);

  /* The layout colors */
  --header-color: var(--white);
  --navbar-color: var(--white);
  --main-color: var(--white);
  --aside-color: var(--white);
  --footer-color: var(--white);

  --background-color: var(--grey-c);

  --contrast-color: var(--grey-c);
  --border-color: var(--grey-3);
  --table-head-color: var(--primary-color);
  --table-row-color: var(--grey-3);
  --table-row-hovered-color: var(--grey-9);
  --shadow-color: var(--grey-5);


  /* Default button */
  --main-button: var(--primary-color);

  /* Warning and danger buttons */
  --warning-color: var(--orange);
  --danger-color: var(--red);
  --success-color: var(--green);
}