:root {
  /* Site Colors */
  --lavender24: #FFFFFF;
  --lavender23: #F6F4F5;
  --lavender22: #EDE9EC;
  --lavender21: #E3DDE2;
  --lavender20: #DAD2D8;
  --lavender19: #D1C7CF;
  --lavender18: #C8BCC5;
  --lavender17: #BFB0BB;
  --lavender16: #B6A5B1;
  --lavender15: #AC9AA8;
  --lavender14: #A38F9E;
  --lavender13: #9A8494;
  --lavender12: #91788B;
  --lavender11: #876E81;
  --lavender10: #7B6576;
  --lavender9:  #705C6B;
  --lavender8:  #655360;
  --lavender7:  #5A4956;
  --lavender6:  #4F404B;
  --lavender5:  #433740;
  --lavender4:  #382E36;
  --lavender3:  #2D252B;
  --lavender2:  #221C20;
  --lavender1:  #161215;
  --lavender0:  #0B090B;

  --blue24: #FFFFFF;
  --blue23: #EFF7FA;
  --blue22: #E0F0F5;
  --blue21: #D0E8F1;
  --blue20: #C1E0EC;
  --blue19: #B1D9E7;
  --blue18: #A1D1E2;
  --blue17: #92C9DD;
  --blue16: #82C2D9;
  --blue15: #73BAD4;
  --blue14: #63B2CF;
  --blue13: #53ABCA;
  --blue12: #44A3C5;
  --blue11: #3A99BB;
  --blue10: #358CAC;
  --blue9:  #307F9C;
  --blue8:  #2B738C;
  --blue7:  #26667D;
  --blue6:  #225962;
  --blue5:  #1D4C5E;
  --blue4:  #143642;
  --blue3:  #13333E;
  --blue2:  #0E262F;
  --blue1:  #0A191F;
  --blue0:  #050D10;

  --cyan24: #FFFFFF;
  --cyan23: #EDFDFD;
  --cyan22: #DAFBFB;
  --cyan21: #C8F8F9;
  --cyan20: #B5F6F7;
  --cyan19: #A3F4F5;
  --cyan18: #90F2F3;
  --cyan17: #7EF0F1;
  --cyan16: #6BEDEF;
  --cyan15: #59EBEE;
  --cyan14: #46E9EC;
  --cyan13: #34E7EA;
  --cyan12: #21E4E8;
  --cyan11: #17DADE;
  --cyan10: #15C8CB;
  --cyan9:  #13B6B9;
  --cyan8:  #11A4A6;
  --cyan7:  #0F8B8D;
  --cyan6:  #0E7F81;
  --cyan5:  #0C6D6F;
  --cyan4:  #0A5B5C;
  --cyan3:  #08494A;
  --cyan2:  #063737;
  --cyan1:  #042425;
  --cyan0:  #021212;

  --orange24: #FFFFFF;
  --orange23: #FDF6EC;
  --orange22: #FCEDD9;
  --orange21: #FAE5C7;
  --orange20: #F8DCB4;
  --orange19: #F7D3A1;
  --orange18: #F5CA8E;
  --orange17: #F4C27C;
  --orange16: #F2B969;
  --orange15: #F0B056;
  --orange14: #EFA743;
  --orange13: #EC9A29;
  --orange12: #EB961E;
  --orange11: #E18C14;
  --orange10: #CE8012;
  --orange9:  #BC7410;
  --orange8:  #A9690F;
  --orange7:  #965D0D;
  --orange6:  #83510B;
  --orange5:  #71460A;
  --orange4:  #5E3A08;
  --orange3:  #4B2F07;
  --orange2:  #382305;
  --orange1:  #261703;
  --orange0:  #130C02;

  --red24: #FFFFFF;
  --red23: #FCEEED;
  --red22: #F9DDDC;
  --red21: #F7CCCA;
  --red20: #F4BBB8;
  --red19: #F1AAA7;
  --red18: #EE9A95;
  --red17: #EC8983;
  --red16: #E97872;
  --red15: #E66760;
  --red14: #E3564F;
  --red13: #E1453D;
  --red12: #DE342B;
  --red11: #D42A21;
  --red10: #C2261E;
  --red9:  #A8201A;
  --red8:  #9F1F19;
  --red7:  #8D1C16;
  --red6:  #7C1813;
  --red5:  #6A1511;
  --red4:  #58110E;
  --red3:  #470E0B;
  --red2:  #350A08;
  --red1:  #230706;
  --red0:  #120303;

  --lavender: var(--lavender20);
  --blue:     var(--blue4);
  --cyan:     var(--cyan7);
  --orange:   var(--orange13);
  --red:      var(--red9);

  --dark-lavender: var(--lavender8);
  --dark-blue:     var(--blue2);
  --dark-cyan:     var(--cyan5);
  --dark-orange:   var(--orange7);
  --dark-red:      var(--red6);

  --light-lavender: var(--lavender18);
  --light-blue:     var(--blue17);
  --light-cyan:     var(--cyan11);
  --light-orange:   var(--orange17);
  --light-red:      var(--red15);
}

/** Color Stylings ************************************************************/
.background {
}

.bg__color--default {
  background-color: var(--dark-blue);
  --bg-color: var(--dark-blue);
}

.bg__color__lightmode--default {
  background-color: var(--lavender);
  --bg-color: var(--lavender);
}

.bg__color--blue {
  background-color: var(--blue);
  --bg-color: var(--blue);
}

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

.bg__color--light__orange {
  background-color: var(--light-orange);
  --bg-color: var(--light-orange);
}

.fg__color--lavender {
  color: var(--lavender);
  --fg-color: var(--lavender);
}

.fg__color--blue {
  color: var(--blue);
  --fg-color: var(--blue);
}

.fg__color--red {
  color: var(--red);
  --fg-color: var(--red);
}

.fg__color--orange{
  color: var(--orange);
  --fg-color: var(--orange);
}

.fg__color--dark-lavender{
  color: var(--dark-lavender);
  --fg-color: var(--dark-lavender);
}

.fg__color--light-lavender{
  color: var(--light-lavender);
  --fg-color: var(--light-lavender);
}

.fg__color--light-orange{
  color: var(--light-orange);
  --fg-color: var(--light-orange);
}

.fg__color--light-red {
  color: var(--light-red);
  --fg-color: var(--light-red);
}

.fg__color--light-blue {
  color: var(--light-blue);
  --fg-color: var(--light-blue);
}

.fg__color--lavender13 {
  color: var(--lavender13);
  --fg-color: var(--lavender13);
}
/******************************************************************************/

.page__contents {
  display: flex;
  justify-content: center;
  align-items: center;
}


/** Navagation Bar ************************************************************/
.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 90px;
}

.nav-bar__tab--right {
  float: right;
}

.nav-bar__tab--left {
  float: left;
}

.nav-bar__tab__text {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: var(--light-orange);
  text-align: center;
  padding: 32px 21px;
  text-decoration: none;
  font-size: 20px;
}

.nav-bar__tab__text:hover {
  color: var(--orange);
}
/******************************************************************************/

/** Card Stylings *************************************************************/
.card {
  position: relative;
  display: inline-block;
  margin: auto;
  width: 60%;
  top: 50px;
}

.card__info {
  float: left;
  position: relative;
  top: 15px;
}

.card__title {
  color: var(--lavender10);
  font-size: 28px;
}

.card__text {
  color: var(--light-lavender);
  font-size: 20px;
}

.card__image {
  float: left;
  align: left;
  margin: 0 auto;
  width: 15em;
}

.card__media {
}

.card__attribution {
  font-size: 16px;
  color: var(--lavender7);
}

.card__buttons {
  float: left;
  position: relative;
  top: 30px;
}
/******************************************************************************/

/** Work in Progress Stylings *************************************************/
.WIP {
  display: block;
  text-align: center;
  font-size: 60px;
  color: var(--light-red);
  background-color: var(--blue);
  padding: 3%;
  margin-left: 34%;
  margin-right: 34%;
  border-radius: 50px;
  width: 32%;
  overflow: hidden;
  position: relative;
  top: 100px;
}
/******************************************************************************/

/** Neon Button Styling *******************************************************/
.neon__button {
  display: inline-block;
  transition: 0.25s;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  margin: 10px;
  text-decoration: none;
}

.neon__button:hover {
  --color1: var(--bg-color);
  --color2: var(--fg-color);
  color: var(--color1);
  background-color: var(--color2);
  box-shadow: 0 0 5px var(--color2),
              0 0 25px var(--color2),
              0 0 50px var(--color2),
              0 0 200px var(--color2);
  -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
  -moz-box-reflect:below 1px linear-gradient(transparent, #0005);
}
/******************************************************************************/