:root {
    /* Theming */
    --dark: #141414;
    --light: white;
    --background-color: var(--light);
    --foreground-color: var(--dark);

    /* Basic Styleguide */
    --col-primary: #0ac798;
    --col-primary-shade: #069672;
    --col-primary-shade2: ;
    --col-primary-tint: #09E3AC;
    --col-primary-tint2: rgba(92,229,192,1);

    --col-secondary: #232C58;
    --col-secondary-tint: #323f7f;
    --col-secondary-tint2: rgba(73,87,145,1);

    --dark-blue: #232C58;
    --dark-blue__tint: #323f7f;
    --dark-blue__tint2: rgba(73,87,145,1);
    --dark-blue__tint3: rgba(58,116,149,1); 

    /* Greyscale */
    --white: var(--light);
    --grey-100: #fafdff;
    --grey-200: #E4E4E4;
    --grey-300: #d8d8d8;
    --grey-400: #A4A5A6;
    --grey-500: #7b7c7d;
    --grey-600: #494A4D;
    --grey-700: #3f4043;
    --grey-800: #3d3e41;
    --grey-900: #27282a;
    --black: var(--dark);

    /* Fonts */
    --primary-font: 'Raleway', sans-serif;
    --secondary-font: ;

    /* Miscellaneous */
    --link-color: var(--col-primary);
    --link-color-hover: var(--col-primary-tint);
    --link-color-visited: var(--col-primary);
}

:root.dark-mode {
  --background-color: var(--dark);
  --foreground-color: var(--light);

  /* Greyscale */
  --white: var(--dark);
  --grey-100: #27282a;
  --grey-200: #3d3e41;
  --grey-300: #3f4043;
  --grey-400: #A4A5A6;
  --grey-500: #7b7c7d;
  --grey-600: #A4A5A6;
  --grey-700: #d8d8d8;
  --grey-800: #E4E4E4;
  --grey-900: #F6F6F6;
  --black: var(--light);

  /* Miscellaneous */
  --link-color: var(--col-primary-tint);
  --link-color-hover: var(--col-primary);
  --link-color-visited: var(--col-primary-tint);
}

/* CSS Prefix & Basics*/

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-family: var(--primary-font);
}



body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  /* Theming */ 
  background: var(--background-color);
  color: var(--foreground-color);
}

img {
  margin: 0;
  max-width: 100%;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover);
}

a:visited {
  color: var(--link-color-visited);
}

/******************************************************************************/
/* Colors */

/* Primary */ 

.bg-primary {
  background-color: var(--col-primary) !important;
}

.bg-primary-tint {
  background-color: var(--col-primary-tint);
}

.bg-primary-tint2 {
  background-color: var(--col-primary-tint2);
}

.bg-primary-shade {
  background-color: var(--col-primary-shade);
}

.bg-primary-shade2 {
  background-color: var(--col-primary-shade2);
}

/* Secondary */ 

.bg-secondary {
  background-color: var(--col-secondary) !important;
}

.bg-secondary-tint {
  background-color: var(--col-secondary-tint);
}

.bg-secondary-tint2 {
  background-color: var(--col-secondary-tint2);
}

.bg-secondary-shade {
  background-color: var(--col-secondary-shade);
}

.bg-secondary-shade2 {
  background-color: var(--col-secondary-shade2);
}

/* Dark Blue */ 

.bg-darkB{
  background-color: var(--dark-blue);
}

.bg-darkB_tint{
  background-color: var(--dark-blue__tint);
}

/* Greyscale */ 
  
.bg-white {
    background-color: var(--white)
}
  
.bg-grey-100 {
  background-color: var(--grey-100);
}
  
.bg-grey-200 {
  background-color: var(--grey-200);
}
  
.bg-grey-300 {
  background-color: var(--grey-300);
}
  
.bg-grey-400 {
  background-color: var(--grey-400);
}
  
.bg-grey-500 {
  background-color: var(--grey-500);
}
  
.bg-grey-600 {
  background-color: var(--grey-600);
}
  
.bg-grey-700 {
  background-color: var(--grey-700);
}
  
.bg-grey-800 {
  background-color: var(--grey-800);
}
  
.bg-grey-900 {
  background-color: var(--grey-900);
}

.bg-black {
  background-color: var(--black);
}

.bg-background-color {
  background-color: var(--background-color);
}

.bg-foreground-color {
  background-color: var(--foreground-color);
}

/* Primary */

.col-primary {
  color: var(--col-primary);
}

.col-primary-tint {
  color: var(--col-primary-tint);
}

.col-primary-tint2 {
  color: var(--col-primary-tint2);
}

.col-primary-shade {
  color: var(--col-primary-shade);
}

.col-primary-shade2 {
  color: var(--col-primary-shade2);
}

/* Secondary */ 

.col-secondary {
  color: var(--dark-blue)
}

/* Greyscale */

.col-white {
  color: var(--white);
}
  
.col-grey-100 {
  color: var(--grey-100);
}
  
.col-grey-200 {
  color: var(--grey-200);
}
  
.col-grey-300 {
  color: var(--grey-300);
}
  
.col-grey-400 {
  color: var(--grey-400);
}
  
.col-grey-500 {
  color: var(--grey-500);
}
  
.col-grey-600 {
  color: var(--grey-600);
}
  
.col-grey-700 {
  color: var(--grey-700);
}
  
.col-grey-800 {
  color: var(--grey-800);
}
  
.col-grey-900 {
  color: var(--grey-900);
}

.col-black {
  color: var(--black)
}

/*********************************/

/* Button Styles */

.btn {
  text-decoration: none;
  font-weight: 500;
  border-radius: 3px;
  border: 2px solid var(--col-primary);

  
  transition-duration: .15s !important;
  transition-property: all !important;
}

.btn:hover {
  box-shadow: -5px 5px 0px 1px var(--dark-blue__tint);
  opacity: 0.8;
  text-decoration: none;
  transform: translate(5px, -5px)
}

.btn-primary {
  color: white !important;
  background-color: var(--col-primary) !important;
}

.btn-primary:hover {
  background: var(--col-primary-tint);
  border-color: var(--col-primary-tint);
  color: white !important;
}

.btn-secondary {
  color: var(--col-primary) !important;
  border-color: var(--col-primary) !important;
  background-color: transparent;
}

.btn-secondary:hover {
background-color: var(--col-primary-tint) !important;
border-color: var(--col-primary-tint) !important;
color: var(--white) !important;
}

.btn-white {
  color: var(--light);
  background-color: transparent;
  border-color: white;
}

.btn-white:hover {
  color: var(--light) !important;
}

/******************************************************************************/
/* Navigation */

.nav-link {
  font-weight: 600;
  color: var(--grey-800) !important;
}

.nav-link:hover {
  color: var(--col-primary-tint) !important;
}

.nav-item .active {
  color: var(--col-primary-tint) !important;
}

/******************************************************************************/
/* Backgrounds */

.dottedBackground {
  background-image: url('/images/dot.png');
}

.dark-mode .dottedBackground {
  background-image: url('/images/dot_darkmode.png');
}