@import url('https://fonts.googleapis.com/css?family=Dosis:100,200,300,400,500,600,700,800,900%7CIBM+Plex+Sans:100,200,300,400,500,600,700,800,900%7CTitillium+Web:100,200,300,400,500,600,700,800,900%7CShare+Tech+Mono:100,200,300,400,500,600,700,800,900%7CRouge+Script:100,200,300,400,500,600,700,800,900');

/* =======================================
            COLOR DEFINITIONS
======================================== */

/* Base Colors */
:root {
    --defined: 'yes';
    --pri: #ffffff; /* For backgrounds */
    --pri-50: #ffffff80; /* 50% opacity */
    --pri-75: #ffffffbf; /* 75% opacity */
    --sec: #304a68; /* For alternate backgrounds */
    --sec-50: #304a6880; /* 50% opacity */
    --sec-75: #304a68bf; /* 75% opacity */
    --heading-color: #154376;
    --heading-color-50: #15437680;
    --heading-color-75: #154376bf;
    --font-color: #424242;
    --font-color-10: #42424216;
    --font-color-50: #42424280;
    --font-color-75: #424242bf;
}

/* Color Palette */
:root {
	--color-1: #335a87;
	--color-2: #3c7759;
	--color-3: #a43820;
	--color-4: #5c3c7c;
	--color-5: #377d95;
}

/* By Hue */
:root {
    --yellow: #e4b600;
    --orange: #de7321;
    --red: #a43820;
    --purple: #5c3c7c;
    --blue: #335a87;
    --cyan: #377d95;
    --green: #3c7759;
}

/* =======================================
            FONT DEFINITIONS
======================================== */

:root {
    --heading-family: 'Titillium Web', sans-serif; 
    --font-family: 'IBM Plex Sans', sans-serif;
    --code-family: 'Share Tech Mono', monospace;
    --signature-family: 'Rouge Script', sans-serif;
}

/* =======================================
            FONT HEADINGS
======================================== */

/* Spacing between Fonts */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Font Styles */
h1, h2, h3, h4 {
    font-family: var(--heading-family);
    color: var(--heading-color);
    font-weight: 300;
}

h5, h6 {
    font-family: var(--font-family);
    color: var(--heading-color);
    font-weight: 400;
}

p, body, ul, ol {
    font-family: var(--font-family);
    color: var(--font-color);
    font-weight: 400;
}

code {
  font-size: inherit;
  font-weight: inherit;
  font-family:  var(--code-family);
  color: inherit;
}

.signature {
  font-family: var(--signature-family);
  font-size: 4em;
  line-height: 1.1;
}

/* Font Sizes */
body { font-size: 14px; }
h1 { font-size: 4em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 1.0em; font-style: italic; }
p { font-size: 1.0em;}

/* Font Colors */
.yellow-text { color:var(--yellow) !important ; }
.orange-text { color:var(--orange) !important ; }
.red-text { color:var(--red) !important ; }
.purple-text { color:var(--purple) !important ; }
.blue-text { color:var(--blue) !important ; }
.cyan-text { color:var(--cyan) !important ; }
.green-text { color:var(--green) !important ; }
.color-1-text { color:var(--color-1) !important ; }
.color-2-text { color:var(--color-2) !important ; }
.color-3-text { color:var(--color-3) !important ; }
.color-4-text { color:var(--color-4) !important ; }
.color-5-text { color:var(--color-5) !important ; }