:root {
    /**** COLORS *****/
    /* Base */
    --singularity: #030303;
    --asteroid: #333333;
    --moonrock: #5c5c5c;
    --spacedust: #919191;
    --missioncontrol: #c2c2c2;
    --neutronstar: #f8f8f8;
    --northernlights: #1AC5B1;
    --jwst: #F6AA00;
    --stellardwarf: #D94949;
    --neptune: #50A0FE;

    /* Backgrounds */
    --bg-primary: var(--singularity);
    --bg-secondary: var(--asteroid);
    --bg-tertiary: var(--moonrock);
    --bg-quaternary: var(--spacedust);
    --bg-quinary: var(--missioncontrol);
    --bg-inverse: var(--neutronstar);

    /* Text */
    --text-primary: var(--neutronstar);
    --text-secondary: var(--missioncontrol);
    --text-tertiary: var(--spacedust);
    --text-inverse: var(--singularity);
    --text-disabled: var(--asteroid);

    --text-positive: var(--northernlights);
    --text-positive-hover: #93F1E4;
    --text-positive-pressed: #BFF6EF;
    
    --text-warning: var(--jwst);
    --text-warning-hover: #FFDF99;
    --text-warning-pressed: #FFECC0;
    
    --text-negative: var(--stellardwarf);
    --text-negative-hover: #EA9A9A;
    --text-negative-pressed: #F8DDDD;
    
    --text-accent: var(--neptune);
    --text-accent-hover: #9AC9FE;
    --text-accent-pressed: #C2DEFF;

    /* Buttons */
    --btn-primary: var(--neutronstar);
    --btn-primary-hover: var(--missioncontrol);
    --btn-primary-pressed: var(--spacedust);

    --btn-secondary: var(--missioncontrol);
    --btn-secondary-hover: var(--spacedust);
    --btn-secondary-pressed: var(--moonrock);

    --btn-inverse: var(--singularity);
    --btn-inverse-hover: var(--asteroid);
    --btn-inverse-pressed: var(--moonrock);

    --btn-disabed: var(--asteroid);

    /* Surfaces */
    --surface: var(--neutronstar);
    --surface-hover: var(--missioncontrol);
    --surface-pressed: var(--spacedust);
    --surface-disabled: var(--asteroid);

    /* Outlines / Borders */
    --outline-primary: var(--neutronstar);
    --outline-secondary: var(--missioncontrol);
    --outline-tertiary: var(--spacedust);
    --outline-disabled: var(--asteroid);
    --outline-focused: var(--neptune);

    /* Inputs */
    --input-surface-primary: #141414;

    /***** FONTS *****/
    /* Base */
    --font-family-primary: "Figtree", sans-serif;

    --font-style-italic: italic;
    --font-style-uppercase: uppercase;
    --font-style-underline: underline;

    --font-letter-spacing: 16px;
    --font-line-height: 125%;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-core-94: 94px;
    --font-core-92: 92px;
    --font-core-75: 75px;
    --font-core-60: 60px;
    --font-core-48: 48px;
    --font-core-40: 40px;
    --font-core-32: 32px;
    --font-core-24: 24px;
    --font-core-20: 20px;
    --font-core-16: 16px;
    --font-core-14: 14px;
    --font-core-12: 12px;

    /* Headings */
    --heading-tagline: var(--font-core-92);
    --heading-3xlarge: var(--font-core-60);
    --heading-2xlarge: var(--font-core-48);
    --heading-xlarge: var(--font-core-40);
    --heading-large: var(--font-core-32);
    --heading-midsize: var(--font-core-24);
    --heading-small: var(--font-core-20);
    --heading-xsmall: var(--font-core-16);

    /* Body */
    --body-xlarge: var(--font-core-24);
    --body-large: var(--font-core-20);
    --body-midsize: var(--font-core-16);
    --body-small: var(--font-core-14);
    --body-xsmall: var(--font-core-12);

    /***** SPACING *****/
    /* Base */
    --spacing-core-80: 80px;
    --spacing-core-60: 60px;
    --spacing-core-48: 48px;
    --spacing-core-36: 32px;
    --spacing-core-24: 24px;
    --spacing-core-16: 16px;
    --spacing-core-8: 8px;
    --spacing-core-4: 4px;

    /* Spacing */
    --spacing-2xlarge: var(--spacing-core-80);
    --spacing-xlarge: var(--spacing-core-48);
    --spacing-large: var(--spacing-core-36);
    --spacing-midsize: var(--spacing-core-24);
    --spacing-small: var(--spacing-core-16);
    --spacing-xsmall: var(--spacing-core-8);
    --spacing-2xsmall: var(--spacing-core-4);

    /* Border Radius */
    --border-radius-midsize: var(--spacing-core-24);
    --border-radius-none: 0;

    /* Card Spacing */
    --spacing-card: 44px;
}

/*--------------------------------------------*/
/******************* GENERAL ******************/
/*--------------------------------------------*/
/***** CORE CSS UTILITIES *****/
/* Font Weights */
.weight-light {
    font-weight: var(--font-weight-light);
}

.weight-regular {
    font-weight: var(--font-weight-regular);
}

.weight-medium {
    font-weight: var(--font-weight-medium);
}

.weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.weight-semibold {
    font-weight: var(--font-weight-bold);
}

/* Font Styles */
.font-underline {
    text-decoration: var(--font-style-underline);
}

.weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.weight-heavy {
    font-weight: var(--font-weight-heavy);
}

/* Headings */
.heading-tagline {
    font-size: var(--heading-tagline);
}

.heading-3xlarge {
    font-size: var(--heading-3xlarge);
}

.heading-2xlarge {
    font-size: var(--heading-2xlarge);
}

.heading-xlarge {
    font-size: var(--heading-xlarge);
}

.heading-large {
    font-size: var(--heading-large);
}

.heading-midsize {
    font-size: var(--heading-midsize);
}

.heading-small {
    font-size: var(--heading-small);
}

.heading-xsmall {
    font-size: var(--heading-xsmall);
}

.text-align-justify {
    text-align: justify;
    text-align-last: justify;
}

.text-align-justify.last {
    text-align-last: left;
}

/***** Inputs *****/
.input-form {
    /*margin: 0px 160px 48px 160px;*/
    margin-bottom: 48px;
}

.input-form label {
    margin-bottom: 12px;
}

.input-form input, .input-form textarea {
    background-color: var(--input-surface-primary);
    padding: 16px 24px;
    font-size: var(--body-large);
    border-radius: 8px;
    border-color: var(--outline-disabled);
}

.input-form input:focus, .input-form textarea:focus {
    background-color: var(--input-surface-primary);
    border: 1px solid var(--outline-focused);
}

/***** Layouts *****/
body {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--body-large);
    line-height: var(--font-line-height);
    background-color: var(--bg-primary);
}

.main-layout {
    margin-top: var(--spacing-2xlarge);
    margin-bottom: 0;
}

.main-content {
    margin-bottom: var(--spacing-xlarge);
    margin-left: var(--spacing-midsize);
    margin-right: var(--spacing-midsize);
}

header {
    margin-bottom: 60px;
}

.sub-header {
    margin-bottom: 80px;
}

.quote {
    margin-top: 100px;
    margin-bottom: 100px;
}

.footer {
    font-size: var(--body-small);
}

/***** Placeholders *****/
.image-placeholder {
    width: 100%;
    background-color: var(--bg-secondary);
    height: 600px;
}

/***** Headings *****/
h1 {
    font-size: var(--heading-3xlarge);
    font-weight: var(--font-weight-semibold);
}

h1.tagline, h2.tagline {
    font-size: var(--heading-tagline);
    font-weight: var(--font-weight-bold);
    letter-spacing: 15px;
    text-transform: var(--font-style-uppercase);
    margin-right: var(--spacing-midsize);
}

h1.tagline span {
    font-weight: var(--font-weight-light);
}

h2.card-title.large {
    font-size: var(--heading-xlarge);
    font-weight: var(--font-weight-medium);
}

h5 {
    font-weight: var(--font-weight-bold);
}

.sub-header h2 span {
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
}

/***** Headings Descriptions *****/
p.header-text {
    font-size: var(--body-large);
    margin-top: var(--spacing-small);
}

/***** Links *****/
a {
    color: var(--text-accent);
}

a:hover {
    color: var(--text-accent-hover);
}

header a  {
    display: block;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding: 0;
    text-decoration: none;
}

header a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

p {
    line-height: var(--font-line-height);
}

/***** Buttons *****/
.btn {
    border-radius: var(--border-radius-midsize);
    padding: 8px 16px;
}

.btn.btn-primary {
    background-color: var(--bg-inverse);
    border: 0px;
    color: var(--text-inverse);
}

.btn.btn-primary:hover {
    background-color: var(--bg-quinary);
    border: 0px;
    color: var(--text-inverse);
}

.btn.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--outline-primary);
    color: var(--text-primary);
}

.btn.btn-secondary:hover {
    background-color: transparent;
    border: 1px solid var(--outline-secondary);
    color: var(--text-secondary);
}

.btn.btn-tertiary {
    background-color: transparent;
    border: 0px;
    color: var(--text-primary);
}

/***** Background Images *****/
#resume {
    background-image: url('./assets/images/backgrounds/kup-dallas-reunion.png');
    background-size: cover;
    background-attachment: fixed;
}

#articles {
    background-image: url('./assets/images/backgrounds/loc-winspear.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#contact {
    background-image: url('./assets/images/backgrounds/gt-dallas-hwy.jpg');
    background-size: cover;
    background-attachment: fixed;
}

/*--------------------------------------------*/
/****************** BOOTSTRAP *****************/
/*--------------------------------------------*/
/***** Badge *****/
.badge.primary {
    font-weight: var(--font-weight-light);
    font-size: var(--body-midsize);
    background-color: transparent;
    border: 1px solid var(--outline-tertiary);
}

/***** Global Header *****/
.navbar {
    padding: var(--spacing-small) var(--spacing-midsize);
}

.navbar .nav-item .nav-link {
    padding: var(--spacing-xsmall) 0;
    margin: var(--spacing-xsmall);
}

.navbar .nav-item .nav-link.active {
    border-bottom: 1px solid var(--outline-primary);
}

.navbar.navbar-custom {
    background-color: rgba(3, 3, 3, .9) ;
}

.navbar ul li {
    padding: 0 var(--spacing-xsmall);
}

.navbar ul li a:hover {
    border-bottom: 1px solid var(--outline-primary);
}

.navbar-brand {
    font-family: "Midnight Motion", sans-serif;
    font-size: var(--body-xlarge);
    font-weight: var(--font-weight-medium);
    text-transform: var(--font-style-uppercase);
}

/**** Card *****/
.card {
    justify-content: flex-end;
    position: relative;
}

.card, .card-img-top, .card img {
    border-radius: var(--border-radius-none);
    border: 0;
}

.card .card-title {
    font-size: var(--heading-large);
    font-weight: var(--font-weight-medium);
}

.card .card-text {
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
}

.card .card-text.large {
    font-size: var(--body-xlarge);
}

.card .card-content {
    padding: 16px 0 0 0;
}

.card-image-hover {
    display: none;
}

.card:hover .card-image-hover {
    display: block;
}

.card:hover .card-image {
    display: none;
}

.main-content .card {
    background-color: transparent;
}

.card-collection h3 {
    margin-bottom: 16px;
}

.card-collection .card {
    padding-bottom: 48px;
}

.card-collection .row {
    margin-bottom: 48px;
}

.card-colletion .card .card-text.category {
    text-transform: var(--font-style-uppercase);
    font-size: var(--body-midsize);
}

/*--------------------------------------------*/
/****************** HOME PAGE *****************/
/*--------------------------------------------*/
/***** Hero *****/
.hero {
    margin-bottom: var(--spacing-2xlarge);
}

.hero p {
    font-size: var(--body-large);
    font-weight: var(--font-weight-light);
    margin-bottom: var(--spacing-midsize);
}

.content-home .card .card-content {
    padding: var(--spacing-card);
}

.content-home .card .card-title {
    font-size: var(--heading-midsize);
    font-weight: var(--font-weight-medium);
}

/*--------------------------------------------*/
/*********** PROJECT DETAILS PAGE *************/
/*--------------------------------------------*/
.project-info {
    margin-top: 24px;
    margin-bottom: 0;
}

.project-info label {
    font-weight: var(--font-weight-bold);
    font-size: var(--body-small);
    text-transform: var(--font-style-uppercase);
    margin-bottom: 8px;
}

.project-info .description {
    font-size: var(--body-midsize);
}

.project-details {
    margin-bottom: 48px;
}

.project-details h3 {
    margin-bottom: 48px;
}

.project-details section {
    margin-bottom: 100px;
}

.project-details section.last {
    margin-bottom: 48px;
}

/*--------------------------------------------*/
/*********** RESUME PAGE *************/
/*--------------------------------------------*/
.main-content.resume header {
    text-align: center;
}

.main-content.resume .header-text.button {
    margin-top: 32px;
}

.main-content.resume .project-info {
    margin-top: 32px;
}

.resume .sub-header {
    margin-bottom: 72px;
}

.resume-vitae {
    padding-bottom: 80px;
}

.resume-vitae section {
    padding-top: 24px;
}

.resume-vitae section.top {
    padding-top: 0;
}

.resume-vitae label {
    margin-bottom: 16px;
}

.resume-vitae .skill {
    padding: 0 48px 24px 0;
}

.resume-vitae .experience {
    padding: 0 0 24px 0;
}

/*--------------------------------------------*/
/*********** ABOUT PAGE *************/
/*--------------------------------------------*/
.main-content.about section {
    margin-bottom: 48px;
}

.feature, .tile {
    background-color: var(--bg-secondary);
    background: rgba(255, 255, 255, .05);
    padding: 32px 40px;
    height: 250px;
    display: flex;
}

.tile span {
    align-self: flex-end;
}

/*--------------------------------------------*/
/*********** ARTICLES PAGE *************/
/*--------------------------------------------*/
.main-content.articles .hero {
    text-align: center;
    margin: 500px 0px;
}

.main-content.articles .hero h1.tagline {
    margin: 0;
    padding: 0;
}

/*--------------------------------------------*/
/*********** CONTACT PAGE *************/
/*--------------------------------------------*/
.main-content.contact header {
    text-align: center;
}

/*--------------------------------------------*/
/***************** RESPONSIVE *****************/
/*--------------------------------------------*/
@media only screen and (min-width: 320px) {
    
    .container.main-layout {
        margin-top: var(--spacing-midsize);
    }

    h1.tagline {
        font-size: var(--heading-large);
    }

    h2.card-title.large {
        font-size: var(--heading-large);
    }

    .badge.primary {
        margin-bottom: 4px;
    }

    .main-content.articles .hero {
        text-align: center;
        margin: 300px 0px;
    }
 
}

@media only screen and (min-width: 576px) {

    .container.main-layout {
        margin-top: var(--spacing-xlarge);
    }

    h1.tagline {
        font-size: var(--heading-large);
    }

    .hero {
        margin: 0 0 var(--spacing-2xlarge) 0;
    }

    .content-home, .footer {
        margin: 0 0 var(--spacing-xlarge) 0;
    }

    .content-home {
        margin-bottom: 0;
    }

    .badge.primary {
        margin-bottom: 0;
    }

    .main-content.articles .hero {
        text-align: center;
        margin: 500px 0px;
    }
 
}

@media only screen and (min-width: 768px) {

    .container.main-layout {
        margin-top: 60px
    }

    h1.tagline {
        font-size: var(--heading-xlarge);
    }

    h2.card-title.large {
        font-size: var(--heading-xlarge);
    }
 
}

@media only screen and (min-width: 992px) {

    .container.main-layout {
        margin-top: 60px;
    }

    h1.tagline {
        font-size: var(--heading-2xlarge);
    }
 
}

@media only screen and (min-width: 1200px) {

    .container.main-layout {
        margin-top: var(--spacing-2xlarge);
    }

    h1.tagline {
        font-size: var(--heading-3xlarge);
    }
 
}

@media only screen and (min-width: 1400px) {

    .container.main-layout {
        margin-top: var(--spacing-2xlarge);
    }

    h1.tagline {
        font-size: var(--heading-tagline);
    }
 
}