:root {
    /* || Colors */

    --medium-blue: hsl(219, 100%, 26%);
    --medium-blue2: rgb(39, 60, 130);

    --medium-blue-alpha: hsla(219, 100%, 26%, 0.7);
    --medium-blue2-alpha: hsla(226, 54%, 33%, 0.8);

    --light-blue: hsl(192, 100%, 44%);
    --light-blue-rgb: rgb(0, 90, 112);
    --light-blue-alpha: hsla(192, 100%, 44%, 0.7);

    --lime-green: #909a34;
    --lime-green-alpha: hsl(66, 50%, 40%, 0.8);

    --purple: #6c658e;
    --purple-alpha: hsl(250, 17%, 48%, 0.8);

    --teal: #007681;
    --teal-alpha: hsl(185, 100%, 25%, 0.8);

    --dark-teal: #5f7687;
    --dark-teal-alpha: hsl(206, 17%, 45%, 0.8);

    --cool-grey-7: #98999b;
    --cool-grey-7-alpha: hsl(220, 1%, 60%, 0.8);

    --cool-grey: #ccc;

    --yellow: #e9b008;
    --magenta: #d9017a;
    --orange: #f1592a;
    --bright-green: #01ff66;
    --bright-red: #ff0101;

    /* || Box Properties */

    --box-radius-2: 2px;
    --box-radius-3: 3px;
}

html {
    font-family: "aktiv-grotesk", arial, verdana, sans-serif;
    font-size: 20px;
    font-style: normal;
    color: #444;
    scroll-behavior: smooth;
}

/* || Basic Styling */

*,
*::after,
*::before {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

body {
    box-sizing: border-box;
    font-size: 0.8rem;
    background-color: var(--medium-blue2);
    padding: 0 1rem;
    margin: 0;
}

#root {
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    color: #444;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* || Typography */
/* https://typescale.com -- Minor Second -- Base Font 20px*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "museo-sans", sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 2.488rem;
}

h2 {
    margin-bottom: 1rem;
    font-size: 2.074rem;
    line-height: 1.3;
    letter-spacing: -2px;
}

h3 {
    font-size: 1.728rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

h4 {
    font-size: 1.44rem;
    margin-bottom: 1rem;
}

h5 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
    font-family: "aktiv-grotesk", Arial, Helvetica, sans-serif;
    font-size: 0.833rem;
    font-weight: 400;
    line-height: 1.3;
}

sup {
    font-size: 0.75em;
}

strong {
    font-weight: 700;
}

ul.fa-ul {
    margin: 0 0 1rem 2rem;
    font-size: 0.833rem;
    line-height: 1.4;
}

.fa-li {
    top: 5px;
    left: -1.5em !important;
    line-height: 1.4;
}

small,
.fine-print {
    font-size: 0.579rem;
    line-height: 1.3;
}

a,
a:visited {
    text-decoration: none;
    cursor: pointer;
}

a:focus,
a:hover {
    text-decoration: underline;
}

/* || Display */

.hidden {
    display: none;
}

/* || Link Labels */

.label {
    margin-left: 5px;
    padding: 3px;
    border-radius: 2px;
    font-size: 0.5rem;
    font-weight: 500;
    color: #fff;
}

.label-magenta {
    background-color: var(--magenta);
}

.label-orange {
    background-color: var(--orange);
}