/* CSS Variable overrides */
:root {
  --bs-link-color-rgb: #cd2653;
  --bs-link-color-rgba: #cd26527c;
  --bs-primary-rgb: #fff;
  --bs-secondary-rgb: #f5efe0;
  --bs-body-font-family: "Open Sans", "Helvetica Neue", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --bs-tertiary-rgb: #309ca1;
  --bs-tertiary-rgb-active: #216b6f;
  --bs-btn-hover-color: var(--bs-tertiary-rgb-active);
  --netflix-red: #e50914;
  --netflix-white: #f5f5f1;
  --netflix-hover-white: #cccccc;
  --netflix-black: #0a0a0a;
  --netflix-component-black: #221f1f;
  --netflix-muted-red: #b81d24;
  --netflix-muted-red-rgba: #b81d2586;
}

/* Global */

::selection {
  background: var(--bs-link-color-rgba);
}

body {
  padding-top: 4.5rem;
  font-family: var(--bs-body-font-family);
  background: var(--bs-secondary-rgb);
}

html {
  font-family: var(--bs-body-font-family);
}

a,
a.nav-link {
  color: var(--bs-link-color-rgb);
  text-decoration: underline;
}

mark {
  background: var(--bs-link-color-rgba);
}

a.text-body-secondary i {
  color: var(--bs-link-color-rgb);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

a:hover,
a:active {
  text-decoration: none;
}

/* Page styles */
.page-header {
  text-align: center;
  font-weight: 800;
}

.page-header {
  font-size: calc(2rem + 3.3vw);
}

@media (min-width: 1200px) {
  .page-header {
    font-size: 4rem;
  }
}

/* Buttons */
.btn.btn-primary {
  background: var(--bs-tertiary-rgb);
  border-color: var(--bs-tertiary-rgb);
}

.btn.btn-outline-primary {
  border-color: var(--bs-tertiary-rgb);
  color: var(--bs-tertiary-rgb);
  --bs-btn-active-bg: var(--bs-tertiary-rgb);
}

.btn.show.btn-outline-primary {
  color: white;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:target,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:target,
.btn.btn-outline-primary:focus-visible {
  background: var(--bs-tertiary-rgb-active);
  border-color: var(--bs-tertiary-rgb-active);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:target,
.btn.btn-outline-primary:focus-visible {
  color: white !important;
}

/* Navigation */
nav,
footer {
  background: var(--bs-primary-rgb);
}

/* Footer */
footer .bi-github,
footer .bi-linkedin {
  font-size: 1.75rem;
}

/* https://kittygiraudel.com/2015/04/15/netflix-logo-in-css/ for all of the logo styles*/
/* Netflix Styles */

/* Globals */
#netflix body,
#netflix nav,
#netflix footer {
  background-color: var(--netflix-black);
  color: var(--netflix-white);
  font-family: "Martel Sans", sans-serif;
}

#netflix a,
#netflix .navbar-brand,
#netflix a.text-body-secondary i {
  color: var(--netflix-white);
}

#netflix a:hover,
#netflix .navbar-brand:hover,
#netflix a.text-body-secondary i:hover {
  color: var(--netflix-hover-white);
}

/* Netflix Logo */
#netflix .logo span {
  transform-origin: 0 0;
  transform: scaleX(80) rotateY(89.5deg);
  font-family: var(--bs-body-font-family);
}

#netflix .logo {
  perspective: 1000px;
  perspective-origin: 50% 0;
  font-size: 6rem;
  display: inline-flex;
  color: var(--netflix-red);
}

#netflix .logo span {
  display: block;
}
#netflix .logo span:nth-child(1) {
  transform-origin: 33.3333333333% 200%;
  transform: scale(65.9, 1) rotatey(89.5deg);
}
#netflix .logo span:nth-child(2) {
  transform-origin: 25% 200%;
  font-size: 0.9em;
  transform: scale(75.9, 1) rotatey(89.5deg);
}
#netflix .logo span:nth-child(3) {
  transform-origin: 0% 200%;
  font-size: 0.9em;
  transform: scale(85.9, 1) rotatey(89.5deg);
}
#netflix .logo span:nth-child(4) {
  transform-origin: 50% 200%;
  font-size: 0.85em;
  transform: scale(1, 1) translatey(0%);
}
#netflix .logo span:nth-child(5) {
  transform-origin: 62% 200%;
  font-size: 0.9em;
  transform: scale(85.9, 1) rotatey(-89.5deg);
}
#netflix .logo span:nth-child(6) {
  transform-origin: 50% 200%;
  font-size: 0.92em;
  transform: scale(90, 1) rotatey(-89.5deg) translatex(5%);
}
#netflix .logo span:nth-child(7) {
  transform-origin: 66.6666666667% 200%;
  transform: scale(65.9, 1) rotatey(-89.5deg);
}

/* React Components */
#netflix .form-range::-moz-range-thumb {
  background-color: var(--netflix-muted-red);
}

#netflix .card {
  background-color: var(--netflix-component-black);
}

#netflix .border-danger {
  border-color: var(--netflix-muted-red) !important;
}

#netflix .card .text-danger {
  color: var(--netflix-muted-red) !important;
}

#netflix .table-dark {
  --bs-table-bg: var(--netflix-component-black);
}

#netflix .dropdown-menu {
  background-color: var(--netflix-component-black);
  color: var(--netflix-hover-white);
}

#netflix ::selection {
  background: var(--netflix-muted-red-rgba);
}