.navbar-style {
  background-color: var(--gui-background)
}

body {
  color: var(--light-gray);
  background-color: var(--night-background);
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
}

h1 {
  /* font-size: 2.5rem; */
  font-weight: 700;
}

h2 {
  /* font-size: 2rem; */
  font-weight: 700;
}

a {
  color: var(--green);
}

a:hover {
  color: var(--light-blue);
}

hr {
  margin: 0;
  height: 1.5px !important;
}

.dark-background {
  background-color: var(--dark-night-background);
}

.header-bar {
  align-items: center;
}

.icon {
  max-height: 50px;
  width: auto; 
}

.tab {
  border: 2px solid var(--blue) !important;
  margin-right: 16px;
  transition-duration: 0.4s;
}

.tab:hover {
  background-color: var(--light-blue) !important;
  color: var(--light-gray);
}

.selected-tab {
  background-color: var(--light-blue) !important;
  color: var(--light-gray);
}

.intro-text {
  font-weight: 400;
  font-size: 1rem;
}

:root {
  --night-background: #40403e; /*#323230;*/
  --dark-night-background: #323230;
  --gui-background: #24292E;
  --black: #222F3E;
  --blue: #5f87ff;
  --light-black: #576574;
  --light-blue: #54A0FF;
  --light-cyan: #48DBFB;
  --light-green: #1DD1A1;
  --light-purple: #D75FFF;
  --light-red: #FF5F87;
  --light-gray: #C8D6E5;
  --light-orange: #FECA57;
  --cyan: #0ABDE3;
  --green: #10AC84;
  --purple: #AF5FFF;
  --red: #FF5F5F;
  --gray: #8395A7;
  --orange: #FF9F43;
  --white: #FFFFFF;
  --light-pink: #FF9FF3;
  --pink: #FF87FF;
  --light-turquoise: #00D2D3;
  --turquoise: #01A3A4;
  --comment: #D7AFFF;
}