/* ======================== Global Styling ======================== */

:root {
    --light-page-background-color: #fff;
    --dark-page-background-color: #000;
    --light-header-background: #f2f3f4;
    --dark-header-background: #1b1b1b;
    --light-header-border-color: #ddd;
    --dark-header-border-color: #222;
    --light-font-color: #dbdbdb;
    --dark-font-color: #000;
    --primary-font-family: 'Mona Sans', sans-serif;
    --secondary-font-family: 'Satoshi', sans-serif;
    --no-padding: 0px;
    --no-margin: 0px;
    --auto-margin: auto;
    --container-width: 95%;
    --display-flex: flex;
    --align-items-center: center;
    --justify-content-space-between: space-between;
}

html,
body {
    background-color: var(--light-page-background-color);
    font-family: var(--secondary-font-family);
    padding: var(--no-padding);
    margin: var(--no-margin);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font-family);
}

p,
a,
li {
    font-family: var(--secondary-font-family);
}

a {
    font-family: var(--secondary-font-family);
}

/* ======================== Container Styling ======================== */

.nexure-container {
    margin-left: var(--auto-margin);
    margin-right: var(--auto-margin);
    width: var(--container-width);
}

.nexure-nav-container {
    display: var(--display-flex);
    align-items: var(--align-items-center);
    justify-content: var(--justify-content-space-between);
}

/* ======================== Button Styling ======================== */

.nexure-button {
    padding:6px 20px;
    font-size: 13px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--primary-font-family);
    color: var(--dark-font-color);
}

.nexure-button.primary {

}

.nexure-button.secondary {
    
}

/* ======================== Header Styling ======================== */

.nexure-header {
    width: 100%;
    background-color: var(--light-header-background);
    border: 1px solid var(--light-header-border-color);
    padding: var(--no-padding);
}

.nexure-branding {
    width: 125px !important;
}

.nexure-branding a {
    padding: var(--no-padding);
    margin: var(--no-margin);
}

.nexure-logo {
    width:100%;
}

.nexure-logo.dark {
    display: none;
}

.nexure-navigation-cluster {
    display: var(--display-flex);
    align-items: var(--align-items-center);
}

.nexure-navigation-menu ul {
    display: var(--display-flex);
    align-items: var(--align-items-center);
    list-style: none;
}

.nexure-link-item {
    padding:6px 20px;
    font-family: var(--primary-font-family);
}

.nexure-link-item a {
    text-decoration: none;
    font-size: 13px;
    font-family: var(--primary-font-family);
    color: var(--dark-font-color);
}