:root {
  /*black dark/light*/
  --blackDark:  #073642;
  --blackLight:  #002b36;
  /*black dark/light*/
  --redDark:  #dc322f;
  --redLight:  #cb4b16;
  /*!! green dark/light*/
  --greenDark:  #859900;
  --greenLight: #586e75;
  /*!! yellow dark/light*/
  --yellowDark:  #b58900;
  --yellowLight: #657b83;
  /*!! blue dark/light*/
  --blueDark:  #1c6497;
  --blueLight: #268bd2;
  /*!! magenta dark/light*/
  --magentaDark:  #d33682;
  --magentaLight: #6c71c4;
  /*!! cyan dark/light*/
  --cyanDark:  #2aa198;
  --cyanLight: #34cbbe;
  /*!! white dark/light*/
  --whiteDark:  #eee8d5;
  --whiteLight: #fdf6e3;
  /*more*/ 
  --grey: #93a1a1;
}

.small-center-text{
  max-width:576px;
  text-align: center;
}

.box-shadow-light{
  box-shadow:0px 5px 8px #888888
}
.box-shadow-dark{
  box-shadow:0px 4px 8px 4px #222222
}

html {
  font-size:15px;
  margin-top:80px;
  margin-bottom:100px;
}

body {
  background-color: var(--blackLight);
}

.img-center-container{
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin-top: auto;
  margin-bottom: auto;
}

.bg-dblack{
	background-color:var(--blackDark);
}
.text-dblack{
  color:var(--blackDark);
}
.bg-lblack{
  background-color:var(--blackLight);
}

.bg-truewhite{
  background-color:#FFFFFF;
}
.bg-dwhite{
  background-color:var(--whiteDark);
}
.bg-lwhite{
  background-color:var(--whiteLight);
}
.text-dwhite{
  color:var(--whiteDark);
}
.text-lwhite{
  color:var(--whiteLight);
}

.bg-dgreen{
  background-color:var(--greenDark);
}
.bg-lgreen{
  background-color:var(--greenLight);
}
.bg-dblue{
  background-color:var(--blueDark);
}
.bg-lblue{
  background-color:var(--blueLight);
}
.bg-grey{
  background-color:var(--grey);
}
.text-grey{
  color:var(--grey);
}

.text-lblue{
  color:var(--blueLight)
}
.text-dblue{
  color:var(--blueDark)
}

.text-lcyan{
  color:var(--cyanLight)
}
.text-dcyan{
  color:var(--cyanDark)
}

.text-dred{
  color:var(--redDark)
}
.text-lred{
  color:var(--redLight)
}

.text-dmagenta{
  color:var(--magentaDark)
}
.text-lmagenta{
  color:var(--magentaLight)
}

.caret-closed {
  transform: rotate(180deg);
  display: inline-block;
}

.container {
  padding-top:15px;
  padding-bottom:15px;
}

.fs-10{
  font-size:10px
}
.fs-11{
  font-size:11px
}
.fs-12{
  font-size:12px
}
.fs-13{
  font-size:13px
}
.fs-14{
  font-size:14px
}

.resume-subtext-font{
  font-size: 1rem;
}