styles.css

/* Font for website majority */
* {
  font-family: 'Karla', sans-serif;
}

/* Body requirements */
body {
  background-color: #cbd4c2; /* For easy distinction with other background */
  background-image: var(--bs-gradient);
  color: black;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar requirements */
nav {
  font-size: 18px;
  background-color: #1a1d20;
  text-align: right;
}

/* Font for navbar */
.nav-link, .navbar-brand, .dropdown-item, .col-lg-6.nav-item {
  font-family: 'Manrope', sans-serif!important;
  color: #fffdff;
}

/* Turn gold on navbar link hover */
.navbar-brand:hover, .nav-link:hover, .dropdown-item:hover {
  color: #c3b299;
}

/* Position dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  border-color: #1a1d20;
  background-color: #1a1d20;
  text-align: right;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-toggle::after {
  display: none;
}

/* Color of dropdown option and nav-links on click and when active */
.dropdown-item:active, .nav-link.active {
  background-color: #247ba0!important;
}

/* Animations */

.bounceHover:hover {
  animation: bounce;
  animation-duration: 2s;
}

.flashHover:hover {
  animation: flash;
  animation-duration: 2s;
}

.pulseHover:hover {
  animation: pulse;
  animation-duration: 2s;
}

.rubberBandHover:hover {
  animation: rubberBand;
  animation-duration: 2s;
}

.shakeXHover:hover {
  animation: shakeX;
  animation-duration: 2s;
}

.shakeYHover:hover {
  animation: shakeY;
  animation-duration: 2s;
}

.headShakeHover:hover {
  animation: headShake;
  animation-duration: 2s;
}

.swingHover:hover {
  animation: swing;
  animation-duration: 2s;
}

.tadaHover:hover {
  animation: tada;
  animation-duration: 2s;
}

.wobbleHover:hover {
  animation: wobble;
  animation-duration: 2s;
}

.jelloHover:hover {
  animation: jello;
  animation-duration: 2s;
}

.heartBeatHover:hover {
  animation: heartBeat;
  animation-duration: 2s;
}

a:hover {
  animation: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  color: #ff595e;
}

/* Button color turns gold on hover */
a.btn:hover {
  background-color: #c3b299;
  border-color: #c3b299;
}

button.btn:hover {
  background-color: #c3b299;
  border-color: #c3b299;
}

.btn {
  /* color: inherit; */
}

.breathe {
  animation: pulse;
  animation-duration: 2s;
}

/* No animations for dropdown-items due to weird graphics */
.dropdown-item {
  animation: none!important;
}

/* Customized colors */

.gold {
  color: #cbd4c2;
}

.jet {
  color: #1a1d20;
}

.blue {
  color: #046e8f;
}

.silver {
  color: #6aaa61;
}

.green {
  color: #a9aaad;
}

.fuchsia {
  color: #cd9fcc;
}

.purple {
  color: #631a86;
}

.indigo {
  color: #3234a8;
}

.red {
  color: #a52a2a;
}

.link-hover-color {
  color: #abdf75;
  /* ONLY FOR LINKS! */
}

.bg-gold {
  background-color: #cbd4c2;
}

.bg-jet {
  background-color: #1a1d20;
  color: #fffdff;
}

.bg-blue {
  background-color: #046e8f;
}

.bg-green {
  background-color: #a9aaad;
}

.bg-fuchsia {
  background-color: #cd9fcc;
  color: #fffdff;
}

.bg-purple {
  background-color: #631a86;
  color: #fffdff;
}

.bg-silver {
  background-color: #6aaa61;
  color: #fffdff;
}

.bg-indigo {
  background-color: #3234a8;
  color: #fffdff;
}

.bg-red {
  background-color: #a52a2a;
  color: #fffdff;
}

.bg-gold-gradient {
  background-color: #cbd4c2;
  background-image: var(--bs-gradient);
}

.bg-jet-gradient {
  background-color: #1a1d20;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-blue-gradient {
  background-color: #046e8f;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-silver-gradient {
  background-color: #6aaa61;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-green-gradient {
  background-color: #a9aaad;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-fuchsia-gradient {
  background-color: #cd9fcc;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-purple-gradient {
  background-color: #631a86;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-indigo-gradient {
  background-color: #3234a8;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

.bg-red-gradient {
  background-color: #a52a2a;
  background-image: var(--bs-gradient);
  color: #fffdff;
}

/* Customized Cards */
.card-transparent {
  background-color: inherit;
}

/* Cards should not have borders */
.card {
  border-width: 0px;
  height: 100%;
}

.card-animated:hover {
  animation: none;
  animation-duration: 2s;
}

/* Jumbotron stuff */
.jumbotron-img {
  display: block;
  height: 100vh;
  object-fit: cover;
  width: auto;
}

.jumbotron-img-50 {
  display: block;
  height: 50vh;
  object-fit: cover;
  width: auto;
}

/* Oscillation for text */
.text-oscillation::before {
  content: "knowledge";
  animation-name: oscillation;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.text-blink {
  animation: blink 2s step-start 0s infinite;
}

@keyframes blink {
  5% {
    opacity: 0.0;
  }
}

@keyframes oscillation {
  0% {content: ""}
  1% {content: "k"}
  2% {content: "kn"}
  3% {content: "kno"}
  4% {content: "know"}
  5% {content: "knowl"}
  6% {content: "knowle"}
  7% {content: "knowled"}
  8% {content: "knowledg"}
  9% {content: "knowledge"}
  28% {content: "knowledge"}
  29% {content: ""}
  30% {content: "c"}
  31% {content: "cu"}
  32% {content: "cur"}
  33% {content: "curi"}
  34% {content: "curio"}
  35% {content: "curios"}
  36% {content: "curiosi"}
  37% {content: "curiosit"}
  38% {content: "curiosity"}
  57% {content: "curiosity"}
  58% {content: ""}
  59% {content: "j"}
  60% {content: "jo"}
  61% {content: "joy"}
  80% {content: "joy"}
  81% {content: ""}
  82% {content: "l"}
  83% {content: "le"}
  84% {content: "lea"}
  85% {content: "lear"}
  86% {content: "learn"}
  87% {content: "learni"}
  88% {content: "learnin"}
  89% {content: "learning"}
  99% {content: "learning"}
  100% {content: ""}
}

/* Science Outdoors Title Animation */
.so-oscillation::before {
  content: "Outdoors";
  animation-name: so_oscillation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes so_oscillation {
  0% {content: ""}
  1% {content: "O"}
  2% {content: "Ou"}
  3% {content: "Out"}
  4% {content: "Outd"}
  5% {content: "Outdo"}
  6% {content: "Outdoo"}
  7% {content: "Outdoor"}
  8% {content: "Outdoors"}
  91% {content: "Outdoors"}
  92% {content: "utdoors"}
  93% {content: "tdoors"}
  94% {content: "doors"}
  95% {content: "oors"}
  96% {content: "ors"}
  97% {content: "rs"}
  98% {content: "s"}
  99% {content: ""}
  100% {content: ""}
}

/* Summer Science Seminars Title Animation 1 */
._3s-oscillation1::before {
  content: "Summer";
  animation-name: _3s_oscillation1;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes _3s_oscillation1 {
  0% {content: ""}
  1% {content: "S"}
  2% {content: "Su"}
  3% {content: "Sum"}
  4% {content: "Summ"}
  5% {content: "Summe"}
  6% {content: "Summer"}
  93% {content: "Summer"}
  94% {content: "ummer"}
  95% {content: "mmer"}
  96% {content: "mer"}
  97% {content: "er"}
  98% {content: "r"}
  99% {content: ""}
  100% {content: ""}
}

/* Summer Science Seminars Title Animation 2 */
._3s-oscillation2::before {
  content: "Seminars";
  animation-name: _3s_oscillation2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes _3s_oscillation2 {
  0% {content: ""}
  1% {content: "S"}
  2% {content: "Se"}
  3% {content: "Sem"}
  4% {content: "Semi"}
  5% {content: "Semin"}
  6% {content: "Semina"}
  7% {content: "Seminar"}
  8% {content: "Seminars"}
  91% {content: "Seminars"}
  92% {content: "eminars"}
  93% {content: "minars"}
  94% {content: "inars"}
  95% {content: "nars"}
  96% {content: "ars"}
  97% {content: "rs"}
  98% {content: "s"}
  99% {content: ""}
  100% {content: ""}
}

/* Slice of Art Title Animation 1 */
._soa-oscillation1::before {
  font-family: monospace;
  content: "Slice";
  animation-name: _soa_oscillation1;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes _soa_oscillation1 {
  0% {content: ""}
  1% {content: "S    "}
  2% {content: " l   "}
  3% {content: "  i  "}
  4% {content: "   c "}
  5% {content: "    e"}
  6% {content: "Sl   "}
  7% {content: "S i  "}
  8% {content: "S  c "}
  9% {content: "S   e"}
  10% {content: "Sl   "}
  11% {content: "Sli  "}
  12% {content: "Sl c "}
  13% {content: "Sl  e"}
  14% {content: "Slic"}
  15% {content: "Sli e"}
  16% {content: "Slice"}
  99% {content: "Slice"}
  100% {content: ""}
}

/* Slice of Art Title Animation 2 */
._soa-oscillation2::before {
  font-family: fantasy;
  content: "Art";
  animation-name: _soa_oscillation2;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes _soa_oscillation2 {
  0% {font-family: 'Karla'}
  50% {font-family: fantasy;}
  100% {font-family: 'Karla'}
}

/* Scroll down arrow stuff, appreciation goes to Matthew Hirsch */
.scroll-down-arrow {
  position: absolute;
  left: 50%;
  bottom: 50px;
  display: block;
  text-align: center;
  font-size: 24px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 1s ease-in-out infinite;
  -moz-animation: fade_move_down 1s ease-in-out infinite;
  animation: fade_move_down 1s ease-in-out infinite;
}

@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}

/* For body and footer positioning */
.body-container {
  margin-left: auto;
  margin-right: auto;
}

footer {
  margin-top: auto;
  padding-top: 1vh;
  padding-bottom: 1vh;
  background-color: #6aaa61;
}

/* Footer stuff */
.footercol {
  padding-bottom: 1vh;
  border-color: #ffffff;
  border-width: 0;
  border-left-width: medium;
  border-right-width: medium;
  border-radius: 0;
  background-color: inherit;
}

.leftmargin {
  border-left: 0;
}

.rightmargin {
  border-right: 0;
}

.navbar-brand.navbar-brand-footer {
  color: white;
}

.card-footer {
  text-align: center;
  background-color: inherit;
}

.copyright {
  font-size: 14px;
  color: white;
}

/* Current Bugs Bullet Point Translation Right */
ul {
  list-style-position: inside;
}

/* Plain white hyperlinks wherever not in body */
* > a {
  color: #ffffff;
}

/* List-groups inherit parent color */
.list-group-item {
  background-color: inherit;
  color: inherit;
}

#v-pills-so-tab, #v-pills-3s-tab, #v-pills-soa-tab, #v-pills-branch-tab {
  color: #f35b04;
}

.nav-pills .nav-link:hover {
  color: #d63384;
}

/* For FAQ page */
button.accordion-button:not(.collapsed) {
  background-color: inherit;
  color: inherit;
}

.bg-transparent {
  background-color: inherit;
  background-image: inherit;
}