:root {
  --color-primary: #fcc93a;
  --color-primary-dark: #b9932b;
  --color-bg: #3d3d3d;
  --color-bg-dark: #1c1c1c;
  --color-text-secondary: #222;
  --color-accent-pink: #ec7185;
  --color-accent-blue: #6abff0;
  --bg-ball-secondary: rgba(255, 255, 255, 0.05);
  --border-radius: 1.25rem;
}

body.theme-light {
  --color-bg: #f8f8f8;
  --color-bg-dark: #eeeeee;
  --bg-ball-secondary: #fff;
}

@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Black.ttf");
  font-weight: bolder;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-BlackItalic.ttf");
  font-weight: bolder;
  font-style: italic;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Regular.ttf");
  font-weight: normal;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-Thin.ttf");
  font-weight: lighter;
}
@font-face {
  font-family: "montserrat";
  src: local("montserrat"), url("../webfonts/Montserrat-ThinItalic.ttf");
  font-style: italic;
  font-weight: lighter;
}

body {
  font-family: "montserrat", sans-serif;
  font-weight: 450;
  font-size: small;
}

::-moz-selection {
  background-color: var(--color-primary-dark);
}

::selection {
  background-color: var(--color-primary-dark);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--color-bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.z-index-99 {
  z-index: 99 !important;
}

.z-index-n1 {
  z-index: -1 !important;
}

.position-fill {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.position-bcenter {
  left: 0;
  bottom: 0;
  right: 0;
}

.overlay-dark {
  background-color: rgba(0, 0, 0, 0.5);
}

.fit-cover {
  object-fit: cover;
  -o-object-fit: cover;
}

.flip-x {
  transform: rotateY(180deg);
}

.font-size-unset {
  font-size: unset;
}

.btn {
  font-weight: 500;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:disabled {
  background-color: var(--color-primary-dark);
}

.btn-blue {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}

.btn-dark {
  background-color: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
}

.btn:focus {
  outline: 5px auto var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus {
  background-color: var(--color-accent-pink) !important;
  border-color: var(--color-accent-pink) !important;
}

.bg-pink .btn-primary:hover,
.bg-pink .btn-primary:active,
.bg-pink .btn-primary:focus,
.bg-pink .btn-blue:hover,
.bg-pink .btn-blue:active,
.bg-pink .btn-blue:focus {
  background-color: var(--color-accent-blue) !important;
  border-color: var(--color-accent-blue) !important;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 208, 0, 0.5);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.text-primary,
.active > .nav-link,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-pink {
  color: var(--color-accent-pink) !important;
}

.text-blue {
  color: var(--color-accent-blue) !important;
}

.text-shadow-primary {
  text-shadow: 1.5px 1.5px var(--color-primary);
}

@supports (-webkit-text-stroke: 1px var(--color-text-secondary)) {
  .theme-light .text-stroke-dark {
    color: var(--color-text-secondary);
    -webkit-text-stroke: 0.7px var(--color-text-secondary);
  }
}

.banner-img {
  height: calc(100vh - 3rem);
}
/* TODO: delete */

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-primary-dark {
  background-color: var(--color-primary-dark) !important;
}

.bg-secondary {
  background-color: var(--color-bg) !important;
}

.bg-dark {
  background-color: var(--color-bg-dark) !important;
}

.bg-blue {
  background-color: var(--color-accent-blue) !important;
}

.bg-pink {
  background-color: var(--color-accent-pink) !important;
}

.bg-ball-secondary {
  background-color: var(--bg-ball-secondary);
}

a.text-primary:hover,
a.text-primary:focus,
a.text-primary:active {
  color: var(--color-primary-dark) !important;
}

.form-control {
  border: 0;
  outline: 0;
  font-weight: lighter;
}

.unset-font {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}

.form-control:focus {
  background-color: unset;
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 0.1rem var(--color-primary);
}

*.border-primary {
  border-color: var(--color-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

.nav-pills .nav-link.active {
  background-color: var(--color-primary) !important;
  color: var(--color-text-secondary) !important;
}

nav a.nav-link:hover,
nav a.nav-link.active:hover,
a.text-light:not(.nav *):not(.btn):hover,
a.text-dark:not(.nav *):not(.btn):hover {
  transition: color 0.2s;
  color: var(--color-accent-pink) !important;
}

.nav a.text-light:hover,
.nav a.text-dark:hover,
.nav a.text-light:focus,
.nav a.text-dark:focus {
  transition: background-color 0.2s;
  background-color: var(--color-accent-pink) !important;
}

/* TODO */
a.nav-link.text-light.btn:hover,
a.nav-link.text-light.btn:focus {
  color: #ffffff !important;
}

.navbar-nav .nav-item:nth-child(2) .btn:hover,
.navbar-nav .nav-item:nth-child(2) .btn:active,
.navbar-nav .nav-item:nth-child(2) .btn:focus {
  background-color: var(--color-accent-pink);
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: var(--color-bg-dark) !important;
}

.dropdown-menu {
  right: 0;
  left: unset;
}

.rounded,
.card {
  border-radius: var(--border-radius) !important;
}

.rounded-top {
  border-top-left-radius: var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
}

.rounded-right {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}

.rounded-bottom {
  border-bottom-right-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.rounded-left {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.theme-light .card {
  background: var(--color-text-secondary);
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(var(--border-radius) - 1px);
  border-top-right-radius: calc(var(--border-radius) - 1px);
}

.card-alternate.row .card {
  background: var(--color-accent-pink);
}

.card-alternate.row .card .btn:hover {
  background: var(--color-accent-blue) !important;
  border-color: var(--color-accent-blue) !important;
}

.card-alternate.row .card a.card-link.text-primary:hover {
  color: var(--color-accent-blue) !important;
}

.card-alternate.row > .col-md-6:nth-child(odd) > .card,
.card-alternate.row > .col-xl-6:nth-child(3n + 1) > .card {
  background: var(--color-accent-blue);
}

.card-alternate.row > .col-md-6:nth-child(odd) > .card .btn:hover,
.card-alternate.row > .col-xl-6:nth-child(3n + 1) > .card .btn:hover {
  background: var(--color-accent-pink) !important;
  border-color: var(--color-accent-pink) !important;
}

.card-alternate.row
  > .col-md-6:nth-child(odd)
  > .card
  a.card-link.text-primary:hover,
.card-alternate.row
  > .col-xl-6:nth-child(3n + 1)
  > .card
  a.card-link.text-primary:hover {
  color: var(--color-accent-pink) !important;
}

.card-alternate.row > .col-xl-6:nth-child(3n + 2) > .card {
  background: var(--color-primary);
}
.card-alternate.row > .col-xl-6:nth-child(3n + 2) > .card .text-primary {
  color: var(--color-accent-blue) !important;
}
.card-alternate.row > .col-xl-6:nth-child(3n + 2) > .card .btn-primary {
  background: var(--color-accent-blue) !important;
  border-color: var(--color-accent-blue) !important;
}
.card-alternate.row > .col-xl-6:nth-child(3n + 2) > .card .btn-primary:hover {
  background: var(--color-accent-pink) !important;
  border-color: var(--color-accent-pink) !important;
}

.table th,
.table td {
  padding: var(--border-radius);
  font-size: medium;
}

.table td {
  font-weight: lighter;
}

.table tbody tr:nth-child(odd):last-child th:first-child {
  border-bottom-left-radius: var(--border-radius) !important;
}

.table tbody tr:nth-child(odd):last-child td:last-child {
  border-bottom-right-radius: var(--border-radius) !important;
}