/* Skyblue Theme: modifies the default theme to use blue in various places. */

/* Use Open Sans as the default font. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Bitter:300,400,500,700|Source+Code+Pro:300,400,500,700");

/* See https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables for variables to override. */
:root, [data-bs-theme=dark] {
  --bs-font-sans-serif: "Bitter", sans-serif;
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
  --tf-blue1: #076db3;
  --tf-blue2: #1b6fa9;
  --tf-blue3: #2f8ed0;
  --tf-blue4: #bde3f0;
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-link-color: var(--tf-blue1);
  --tf-pill-bg: var(--tf-blue3);
  --tf-icon-fill: var(--tf-blue1);
  --tf-icon-hover: var(--tf-blue3);
/* --tf-page-bg-color: var(--bs-white); */
  --tf-footer-bg-color: var(--tf-blue4);
/*  --tf-projects-bg-color: var(--tf-blue4); */
}

h1,h2,h3,h4,h5 {
  color: var(--tf-blue1);
  font-family: Rubik;
}

/* Format social media icons */
.tf-social {
  display: inline-block;
  fill: var(--tf-blue1);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.2s;
}

.tf-social:hover {
  fill: var(--tf-icon-hover);
}

.card {
  --bs-card-bg: #343a40;
}

.btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: ##084298;
}

a {
  text-decoration: none;
}

@media (max-width: 500px) {
  .navbar-brand {
    display: none;
  }

  .navbar-brand-mobile {
    display: inline;
  }
}

.rounded-circle {
  border-color: var(--tf-blue1);
  border-style: solid;
  border-width: 1px;
}