:root {
  --jumbotron-padding-top: 4rem;
  --jumbotron-padding-y: 0.5rem;
  --bd-twitter: #1da1f2;
  --bd-twitter-rgb: 29, 161, 242;
  --bd-linkedin: #0077b5;
  --bd-linkedin-rgb: 0, 119, 181;
  --bd-medium: #000000;
  --bd-medium-rgb: 0, 0, 0;
  --bd-subscribe: #b52a1e;
  --bd-subscribe-rgb: 181, 42, 30;
  --bd-discord: #5865F2;
  --bd-discord-rgb: 88, 101, 242;

  --color-neutral-5: #fafaff;
  --color-neutral-150: #373b4e;
  --border-radius-small: .5rem;
}

html,
body {
  height: 100%;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-top);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #f8f9fa;
}

a.jumbotron-heading {
  color: var(--bs-body-color);
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: .5rem;
  margin-top: 0;
  text-decoration: none;
}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
  h5 {
    font-size: 1rem;
  }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  h5 {
    font-size: 1rem;
  }

  .jumbotron {
    padding-top: var(--jumbotron-padding-top);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

@media (min-width: 992px) {
  h5 {
    font-size: 1.05rem;
  }
}

@media (min-width: 1200px) {
  h5 {
    font-size: 1.0rem;
  }
}

@media (min-width: 1400px) {
  h5 {
    font-size: 0.95rem;
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

a.jumbotron-heading,
a.jumbotron-heading:hover {
  color: inherit;
  text-decoration: none;
}

.lead {
  font-size: 1.1rem;
  font-weight: 400;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.s-box {
  border: 1px solid #d4d5d6;
  background-color: #fdfdfd;
}

.s-title {
  color: #5d646b;
  font-weight: bold;
}


@media (max-width: 414px) {
  .s-text {
    font-size: 0.9rem;
  }

  .s-title {
    font-size: 0.75rem;
  }

}

@media (min-width: 415px) {
  .s-text {
    font-size: 0.9rem;
  }

  .s-title {
    font-size: 0.75rem;
  }

}

@media (min-width: 544px) {
  .s-text {
    font-size: 0.85rem;
  }

  .s-title {
    font-size: 0.7rem;
  }
}

@media (min-width: 992px) {
  .s-text {
    font-size: 0.9rem;
  }

  .s-title {
    font-size: 0.75rem;
  }
}

.s-box a,
.s-box a:hover {
  color: inherit;
  text-decoration: none;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

a.custom-card,
a.custom-card:hover {
  color: inherit;
  text-decoration: none;
}

.btn-reg {
  background-color: #00599d;
  border: 1px solid #00599d;
  color: white;
}

.btn-reg:hover {
  border: 1px solid #00599d;
  color: #00599d;
  background-color: #f5f5f5;
}

#myBtn {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 40px;
}

#myBtn:hover {
  background-color: #555;
  text-decoration: none;
}

.dropdown-item.custom-drop {
  min-height: auto;
  padding: .4rem 1rem;
  white-space: normal;
}

.card-hover:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.git-hover:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 5px 10px rgba(0, 0, 0, 0.22);
}

.git-hover .cat-title {
  color: #00599d;
}

.scrollable-nav {
  overflow-y: scroll;
  max-height: 90vh;
}

/*1rem = 16px*/
.card h5.card-title {
  font-size: 1.25rem;
  color: #212529;
  font-weight: 500;
}

.breadcrumb-item a {
  text-decoration: none;
}

.breadcrumb {
  background-color: #e9ecef;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.tag-img {
  height: 16px;
}

.badge-img {
  height: 12px;
}

.btn-tw-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-twitter);
  --bs-btn-border-color: var(--bd-twitter);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bd-twitter);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bd-twitter);
  --bs-btn-focus-shadow-rgb: var(--bd-twitter-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bd-twitter);
}

.btn-lk-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-linkedin);
  --bs-btn-border-color: var(--bd-linkedin);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bd-linkedin);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bd-linkedin);
  --bs-btn-focus-shadow-rgb: var(--bd-linkedin-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bd-linkedin);
}

.btn-mu-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-medium);
  --bs-btn-border-color: var(--bd-medium);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bd-medium);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bd-medium);
  --bs-btn-focus-shadow-rgb: var(--bd-medium-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bd-medium);
}

.btn-sub-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-subscribe);
  --bs-btn-border-color: var(--bd-subscribe);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bd-subscribe);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bd-subscribe);
  --bs-btn-focus-shadow-rgb: var(--bd-subscribe-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bd-subscribe);
}

.btn-discord-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-discord);
  --bs-btn-border-color: var(--bd-discord);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bd-discord);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bd-discord);
  --bs-btn-focus-shadow-rgb: var(--bd-discord-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bd-discord);
}

code {
  color: var(--color-neutral-5);
  background-color: var(--color-neutral-150);
  border-radius: var(--border-radius-small);
  padding: 0.4rem;
  padding-left: 1rem;
}