@font-face {
  font-display: swap;
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v23-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Gupter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gupter-v14-latin-regular.woff2") format("woff2");
}

:root {
  --COLOURI: #ff00e5;
  --COLOURII: #fbcdf2;
  /* --COLOURII: #fbb8ee; */
  --COLOURIII: #625d7e;
  --COLOURIV: #7f79aa;
  --COLOURV: #b8a6b4;
}

html { scroll-behavior: smooth; }

body { font-family: "Gupter", "Times New Roman"; background: var(--COLOURII) !important; margin-top: 4.9rem; }

.navbar { box-shadow: 0.125rem 0.125rem 0.3125rem var(--COLOURI); opacity: 0.9; }

.navbar-brand img { border-radius: 0.5rem; }

.navbar-toggler, .navbar-toggler:focus {
  outline: 0.01rem solid var(--COLOURI);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.navbar-toggler span { background: var(--COLOURI); width: 1.5rem; height: 0.1rem; }

.navbar .nav-item { font-size: 1.2rem; padding-right: 1.4rem; }

.navbar a { color: #ffffff; }
.navbar a:hover { color: var(--COLOURI); }
.active { color: var(--COLOURI) !important; }
/*! navigation end */

.infoHeader { width: 50%; margin: auto; border-bottom: 0.0655rem solid var(--COLOURI); }

#showcase { position: relative; background: url("../images/theauthorsoverlay.jpg") no-repeat center center /cover; min-height: 40rem; }

#showcase .primary-overlay {
  background: rgba(205, 136, 206, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*! showcase end */

#authors img { margin-top: -3.125rem; }
#authors .card { transition: all 0.4s; }
#authors .card:hover { background: var(--COLOURI); color: #ffffff; }
/*! authors end */

footer .developer, #developer { font: bold 1.2rem "Gabriela"; color: #ffffff; text-shadow: 1px 1px 2px #ffd700, 0 0 25px #000000, 0 0 5px #000000; }
footer #developer { letter-spacing: 0.4rem; }

@media (max-width: 768px) {
  #showcase { min-height: 31.25rem; }
  #showcase h1 { font-size: 4rem; }
  #authors .mb { margin-bottom: 4rem; }
}