:root {
  --logo-color: #4c80d8;
  --logo-color-hover: #7298d9;
  --background-color: #e2e2e2;
  --font-color: #2b2b2b;
  --dark-background-color: #292c2f;
  --dark-background-font-color: #f8f9fa;
  --dark-background-subtext-font-color: #8f9296;
  --hr-color: var(--logo-color);
  /* https://isotropic.co/tool/hex-color-to-css-filter */
  --white-logo-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(223deg) brightness(107%) contrast(101%); 
  /* Colored filter achieves same color as logo color */
  --colored-logo-filter: invert(46%) sepia(50%) saturate(1172%) hue-rotate(190deg) brightness(92%) contrast(82%);
  /* Links */
  --link-color: var(--logo-color);
  --link-hover-color: var(--logo-color-hover);
  /* Header */
  --nav-link-base-color: var(--font-color);
  --nav-link-active: var(--logo-color);
  --nav-link-hover: var(--logo-color-hover);
  --nav-drawer-icon-color: var(--logo-color);
  --nav-background-color: #f2f2f2;
  /* Input Outlines */
  --input-default: #163364;
  --input-success: var(--success);
  --input-error: var(--danger);
  --input-focus: #7aa0e2;
  /* Footer */
  --footer-background-color: var(--dark-background-color);
  --footer-font-color: var(--dark-background-font-color);
  --footer-link-color: var(--footer-font-color);
  --footer-subtext-font-color: var(--dark-background-subtext-font-color);
}

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

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

a:hover {
  text-decoration: none;
  color: var(--link-hover-color);
}

a.button,
button.button {
  background-color: var(--logo-color);
  color: var(--dark-background-font-color);
  border-radius: 15px;
  border: none;
  padding: .5rem 1rem;
  font-family: 'Josefin Sans', sans-serif;
}

a.button:hover, 
a.button:active, 
a.button:focus,
button.button:hover, 
button.button:active, 
button.button:focus {
  background-color: var(--logo-color-hover);
  outline: none;
}

hr {
  max-width: none;
  border-color: var(--hr-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', sans-serif;
}

.scrapbook-photo {
  filter: drop-shadow(4px 5px 5px #838383);
  border-radius: 30px;
}

.prominent-heading {
  font-size: 2.5rem;
  font-weight: bold;
}

.logo-font {
  font-family: "Belleza", serif;
  font-weight: 400;
  font-style: normal;
}

.pulse {
  -webkit-transition: transform .35s ease-in-out;
  -moz-transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
}

.pulse:hover {
  transform: scale(1.04);
}

.logo {
  content: url(../../assets/img/logo_black.png);
  filter: var(--colored-logo-filter);
}

.logo-text {
  content: url(../../assets/img/logo_black_text.png);
  filter: var(--colored-logo-filter);
}

.clearmargin {
  margin: 0px;
}

.clearpadding {
  padding: 0px;
}

.minpadding {
  padding: 3rem 0;
}

.light-text {
  color: var(--dark-background-font-color);
}

.colored-text {
  color: var(--logo-color);
}

header + section {
  margin-top: 40px;
}

.subsection  {
  margin: 50px 0;
}

.subsection > h4 {
  padding-top: 5px;
}

.note {
  background-color: #dde7f8;
  border-left: solid 4px var(--logo-color);
  overflow: hidden;
  padding: 12px;
  border-radius: 2px;
  width: fit-content;
}

.background-cover {
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-cover.half-cover {
  height: 50vh;
}