:root {
    /* Orange: */
    /* --OrgLtr: #ffd7ab;
    --OrgLt: #ffae91;
    --OrgDrk: #ff8999;
    --Org--PurDrk: #dc2971; */
    /* Purple: */
    /* --PurLtr: #ffb5e2;
    --PurLt: #ba81f0;
    --PurDrk: #6a47d0;
    --PurDrk: #3c2095; */
    /* White/Black */
    /* --OffWhite: #fff0e0;
    --NearBlack: #1c182b; */

    /* Green */
    --GrnLtr: #88f0d2;
    --GrnLt: #4ebb9b;
    --GrnDrk: #196a52;
    /* Orange: */
    --OrgLt: #ea5366;
    --OrgDrk: #bc2a59;
    /* Purple: */
    --PurLt: #6f0b51;
    --PurDrk: #3a0138;
    /* White/Black */
    --OffWhite: #ffe8e3;
    --NearBlack: #17010e;
}

.bg {
    background: var(--PurLt) 
        url("images/layout/vaporBG.png") 
        no-repeat fixed center;
}


/*------------------------------------Dark Mode----------------------------------------*/

.title {
    padding-top: 25px;
    padding-bottom: 53px;
    margin: 0;
}

.card-dark {
    color: var(--OffWhite);
    background: url("images/layout/circuitTile.png");
    background-color: var(--PurDrk);
    background-repeat: repeat;
    border-width: 3px;
    border-style: outset;
    border-color: var(--OrgLt) var(--PurLt) var(--NearBlack) var(--OrgDrk);
    font-family: "FixedsysExcelsior301Regular", "Lucida Console", monospace;
    box-shadow: 2px 2px 10px var(--NearBlack) inset;
}

b {
    color: var(--OrgLt)
}

.subhead {
    color: var(--GrnLtr);
    text-shadow: 0 0 7px var(--GrnLt);
}

.subTitle {
    font-family: "FixedsysExcelsior301Regular", "Lucida Console", monospace;
}

.feeter {
    color: var(--GrnLt);
    background: var(--PurDrk);
    font-size: 12px;
}

.pnkborder {
    border-style: solid;
    border-width: 2px;
    border-color: var(--OrgLt);
}

/* ----------------------- nav bar -------------------------*/

.navMain {
    color: var(--OffWhite);
    background-color: var(--PurLt);
}

button.navMain {
    color: var(--OffWhite);
    background-color: var(--PurLt);
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
} 

button:hover.navMain {
    color: var(--OffWhite);
    background-color: var(--PurDrk);
    border: none;
}


a.navMain {
    color: var(--OffWhite);
    background-color: var(--OrgLt);
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
} 

a:hover.navMain {
    color: var(--OffWhite);
    background-color: var(--OrgDrk);
    border: none;
}


button.navCont {
    color: var(--OffWhite);
    background-color: var(--GrnDrk);
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

button:hover.navCont {
    color: var(--OffWhite);
    background-color: var(--GrnLt);
    border: none;
}

.enterButton {
    color: var(--OffWhite);
    background-color: var(--OrgLt);
    border-style: solid;
    border-width: 5px;
    border-color: var(--PurLt);
    border-radius: 25px;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
}

a.enterButton {
    color: var(--OffWhite);
}

a:hover.enterButton {
    background-color: var(--OrgDrk);
    border-color: var(--PurDrk)
}

/* All other buttons */
.rgButton {
    color: var(--OffWhite);
    background-color: var(--OrgDrk);
    border-style: solid;
    border-width: 3px;
    border-color: var(--PurDrk);
    border-radius: 15px;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    box-shadow: 2px 2px 10px var(--NearBlack) outset;
}

a:hover.rgButton {
    background-color: var(--OrgLt);
    border-color: var(--PurLt);
    color: var(--OffWhite)
}

a:active.rgButton {
    color: var(--OrgDrk);
}
/* ------------------------ Links ----------------------------*/

a.link {
    text-decoration: none;

}
a:link.link {
    color: var(--GrnLt);
}
  
a:hover.link {
    color: var(--OffWhite);
}
  
a:active.link {
    color: var(--OrgDrk);
}

a:visited.link {
    color: var(--GrnDrk)
}

/* ---------------------------  Galleries --------------------------------------- */

.galleryCard img {
    max-width: 150px;
    max-height: 290px;
    border-radius: 3px;
    margin: auto;
    cursor: pointer;
    transition: 0.3s;
    
}

.galleryCard:hover {opacity: 0.7;}

.galleryCard {
    width: 200px;
    border-radius: 10px;
    text-align: center;
    padding: 12.5px;
    margin-top: 16px;
    border-width: 3px;
    border-style: dashed;
    border-color:#ff8999;

}

p.galleryCard {
    margin: 13px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: space-around;
}

.bigPic img {
    max-width: 100%;
    box-shadow: 2px 2px 10px #251d43;
}


/* ---------------------------------------- Scroll Bar --------------------------------------------- */
::-webkit-scrollbar{
    width: 18px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb{
    background: var(--PurLt);
    border: 3px solid var(--PurDrk);
    border-radius: 15px;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: var(--PurLt);
  }
  ::-webkit-scrollbar-track{
    background: var(--PurDrk);
    border-radius: 0px;
    box-shadow: inset 0px 0px 0px 0px var(--NearBlack);
  }

/* ---------------------------------------- Fonts --------------------------------------------- */

/* Main Font */
@font-face {
    font-family: 'FixedsysExcelsior301Regular';
    src: url('fsex300-webfont.eot');
    src: url('fsex300-webfont.eot?#iefix') format('embedded-opentype'),
         url('fsex300-webfont.woff') format('woff'),
         url('fsex300-webfont.ttf') format('truetype'),
         url('fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing:aliased;
    font-smooth:never;
    }
/* Logo Font UNUSED DELETE LATER */
.rubik-spray-paint-regular {
    font-family: "Rubik Spray Paint", system-ui;
    font-weight: 400;
    font-style: normal;
  }  

/* Headers Font */
.sixtyfour-font {
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}

@font-face {
    font-family: "glitchcrafty";
    src: url('fonts/glitchcrafty.regular.ttf');
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: "screamingneon";
    src: url('fonts/screaming-neon.regular.ttf');
    font-style: normal;
    font-weight: bold;
}
.neon-font {
    font-family: "glitchcrafty", "Sixtyfour", sans-serif;
}