:root,
:root.dark{
    --bg: #282828;
    --bg_h: #1d2021;  /*constrast alternative*/
    --bg_s : #32302f; /*constrast alternative*/
    
    --gray : #a89984;
    --fg : #ebdbb2;

    --red : #cc241d;
    --redAlt : #fb4934;
    --green : #98971a;
    --greenAlt : #b8bb26;
    --yellow : #d79921;
    --yellowAlt : #fabd2f;
    --blue : #458588;
    --blueAlt : #83a598;
    --purple : #b16286;
    --purpleAlt : #d3869b;
    --aqua : #689d6a;
    --aquaAlt : #8ec07c;
    --orange : #d65d0e;
    --orangeAlt : #fe8019;
}

:root.light {
    --bg: #fbf1c7;
    --bg_h: #f9f5d7;  /*constrast alternative*/
    --bg_s : #f2e5bc; /*constrast alternative*/
    
    --gray : #7c6f64;
    --fg : #3c3836;

    --red : #cc241d;
    --redAlt : #9d0006;
    --green : #98971a;
    --greenAlt : #79740e;
    --yellow : #d79921;
    --yellowAlt : #b57614;
    --blue : #458588;
    --blueAlt : #076678;
    --purple : #b16286;
    --purpleAlt : #8f3f71;
    --aqua : #689d6a;
    --aquaAlt : #427b58;
    --orange : #d65d0e;
    --orangeAlt : #af3a03;
}

body{
    background-color: var(--bg) !important;
}

p{
    color: var(--fg) !important;

}


.list ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--orange); /* Change the color */
    display: inline-block;
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.list ul li {

    color: var(--fg); /* Change the color */
    font-family: 'Fira Sans';
    font-weight: 400;
}

.list ul{
    list-style: none; /* Remove default bullets */
}

.pixelImage
{
    image-rendering: pixelated;
}

/* banner image*/
.bgimage {
    height:100vh;
    background: url('images/GlidersInMotion.gif');
    background-size:cover;
    position:relative;

    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

/* banner text */
.hero_title {
    font-size: 4.5rem;
    font-family: 'Fira Mono';
}
.hero_desc {
    font-size: 2rem;
    font-family: 'Fira Mono';
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--yellow)
}

.hero-text p{
    color: var(--yellow)!important;
}

/* about section image css */
.imageAboutPage {
    width: 60%;
    border-radius: 50%;
    display: block;
}

@media (max-width:990px){
    .imageAboutPage {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
        width: 40%;
    }
}

h1
{
    color: var(--aqua);
    font-family: 'Fira Mono';
}

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: var(--bg_s);
}

.navbar-brand
{
    color: var(--blue);
}

.navbar-brand:hover
{
    color: var(--blueAlt);
}

.navbar-brand:active
{
    color: var(--blueAlt);
}

.nav-item a
{
    color: var(--blue);
}

.nav-link:focus, .nav-link:hover {
    color: var(--blueAlt) !important
}

/* social media icons styling */
.social-icons {
    cursor: pointer;
}

@media (max-width:990px){
    .social-icons
    {
        margin-right: auto;
    }
}

.fa-github:hover,.fa-linkedin:hover,.fa-youtube:hover, .fa-envelope:hover{
    color:  var(--orangeAlt);
}
.fab {
    color:  var(--orange);
    padding-right: 4px;
}

/* project styling */

.project-icon{
    max-width:32px;
    max-height:32px;
    float: left;
    margin-right: 5px;

    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}


@media (max-width:767px) {
    .project-header{
    margin-top: 22px;

    }
}


.project-header h4
{
    color: var(--purple);
    font-family: 'Fira Sans';
}

.project-header h4:hover
{
    color: var(--purpleAlt);
}

.project-header a{
    
    text-decoration-color: #777 !important;
    text-decoration: none !important;
    cursor: pointer;
  }

  .project-header a:hover{
    color:  var(--purpleAlt);
    text-decoration: underline !important;
    text-decoration-color: var(--purpleAlt) !important;
  }

.project-brief{
    margin-top: 22px;
    color:  var(--green);
    font-family: 'Fira Sans';
    font-weight: 400;
}

.project-details{
    padding-top: 10px;
    padding-bottom: 10px;
}

/* footer styling */
#footer {
    background-color: var(--bg_h);
    padding-top: 4rem;
    text-align: center;
}

/* spacing on all sections */
#about, #portfolio{
    margin-top: 4rem;
    padding-top: 4rem;
}
#contact {
    padding-bottom: 4rem;
}