@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");

@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0 0 1.5rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html {
  line-height: 1.5;
  font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* font-family: "Bungee", cursive; */
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
  padding-bottom: 3rem;
}

/* A elements that don't have a class get default styles */
a {
  text-decoration-skip-ink: auto;
  color: #36bf7f;
}

a:hover,
a:focus {
  color: #d96666;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --bg-color: #021822;
  --bg-color-dark: #042331;
  --bg-color-light: #8bbed6;

  --text-color-light: #eee5e9;
  --text-color-dark: hsl(309, 70%, 9%);
  --text-color-dark-1: hsl(309, 70%, 19%);
  --accent-color: #fff;
  --accent-color: rgb(93, 93, 190);

  --color-yellow: hsl(53, 100%, 50%);
  accent-color: var(--color-yellow);
  --fav--color: hsl(208, 28%, 12%);

  --font-h1: 1.802rem;
  --font-h2: 1.602rem;
  --font-h3: 1.424rem;
  --font-h4: 1.266rem;
  --font-h5: 1.125rem;
  --font-h6: 1rem;
  --font-small: 0.889rem;

  --high--popularity: #a21b1b;
  --medium-popularity: #0c5f0c;
  --low-popularity: #174fa7;
  --no-popularity: #3e3e3e;
}

.visuallyHidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  clip-path: inset(100%);
  clip: rect(00 0 0);
}

body {
  color: var(--text-color-dark);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.shadow-1 {
  box-shadow: 0 0.5rem 0.5rem #0005;
}

.container {
  max-width: min(60em, 80%);
  margin: 0 auto;
}

.link-dark {
  text-decoration-skip-ink: auto;
  color: var(--text-color-dark);
}

.link-dark:hover,
.link-dark:focus {
  color: var(--text-color-dark-1);
}

input[type="radio"] {
  /* width: 1.25em;
  height: 1.25em; */
}

fieldset {
  border: 0;
  display: flex;
}

.font-h1 {
  font-size: var(--font-h1);
}
.font-h2 {
  font-size: var(--font-h2);
}
.font-h3 {
  font-size: var(--font-h3);
}
.font-h4 {
  font-size: var(--font-h4);
}
.font-h5 {
  font-size: var(--font-h5);
}
.font-h6 {
  font-size: var(--font-h6);
}

.clean--margin {
  margin: 0;
  padding: 0;
}

.message-container {
  margin-top: 2rem;
  background-color: #36bf7f;
  width: 100%;
  border-radius: 0.25em;
  padding: 2rem;
  font-size: var(--font-h5);
}
.error-container {
  margin-top: 2rem;
  background-color: #d96666;
  width: 100%;
  border-radius: 0.25em;
  padding: 2rem;
  font-size: var(--font-h5);
}
.message-container:empty {
  display: none;
}
.error-container:empty {
  display: none;
}

/* 
#############################
#############################
#############################
            HEADER
#############################
#############################
############################# 
*/

.header {
  background-color: var(--bg-color);
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 1rem;
}

.header--title,
.header--title:hover,
.header--title:focus-visible {
  display: inline-block;
  text-align: center;
  font-family: "Bungee";
  font-size: var(--font-h4);
  color: var(--color-yellow);
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.search-container {
  width: 100%;
  text-align: center;
}

.search-form {
  min-width: 100%;
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.search-form-input {
  flex-basis: 15em;
  flex-grow: 1;
  flex-shrink: 1;
  font-size: var(--font-h6);
}

.search-form-submit {
  margin-left: 0.25rem;
  align-self: center;
  text-align: center;
  font-size: var(--font-h6);
}

.search-form-icon {
  padding-right: 0.5rem;
}

.btn {
  display: inline-block;
  padding: 0.55em 1.5em 0.5em;
  background-color: #394a59;
  border: 0.125rem solid #394a59;
  color: #fff;
  border-radius: 0.25em;
  text-decoration: none;

  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.btn:hover,
.btn:focus-visible {
  background-color: #597f8d;
  border-color: #597f8d;
}

.btn-navigation {
  padding: 0.2rem;
  background-color: var(--text-color-dark);
  color: var(--text-color-light);
  border: 0.0625rem solid var(--text-color-dark);
  border-radius: 0.2em;
}

.btn-navigation__large {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.pagination-active {
  color: yellow;
}

.search-form-filter {
  flex: 100%;
  font-size: var(--font-h6);

  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2.5rem;
}

.nav__search__name {
  display: inline-block;
  width: 100%;
  justify-self: stretch;
}

.form-item-expand {
  padding: 0.5rem 1rem;
  border-radius: 0.3em;
  border: 0.125em solid var(--bg-color);
}

.color-light {
  color: var(--text-color-light);
}

.color-dark {
  color: var(--text-color-dark);
}

.search-label {
  display: inline-block;
}

.search-form-radio {
  /* padding: 2rem; */
  color: var(--accent-color);
}

.result-container {
  margin-top: 3rem;
}

/* 
##########################
##########################
##########################
      MOVIE/TV SHOW 
##########################
##########################
########################## 
*/

.show-container {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  gap: 0.5rem;
}

.show-card {
  margin: 0;
  border: 0;

  position: relative;
  border: 0.125rem solid var(--bg-color-dark);
  border-radius: 0.25em;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.show-image {
  display: block;
  object-fit: fill;
  overflow: hidden;
  height: auto;
  width: auto;
  /* object-fit: fill; */
  aspect-ratio: 500 / 750;
  /* object-position: ; */
}

.show-name {
  font-size: var(--font-h4);
  font-weight: bold;

  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

.show-overview {
  margin: 1rem;
  font-size: var(--font-h6);
  flex: 1;
}

.show-air-date {
  margin-top: auto;
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: var(--font-small);
}

.show-card-btn {
  display: inline-block;
  margin-top: auto;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.show-card-btn:hover {
  color: var(--text-color-light);
}

.icon-color {
  color: var(--fav--color);
  display: inline-block;
  font-size: 1.75rem;
}

.show-rating {
  background-color: var(--fav--color);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 0.125em solid var(--fav--color);
  color: var(--text-color-light);
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* 
##########################
##########################
##########################
      CREDITS CARD
##########################
##########################
########################## 
*/

.credit-container {
  margin: 0;
  padding: 0;
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.credits-show-name {
  margin-top: 2rem;
  font-size: var(--font-h4);
  background-color: var(--text-color-dark-1);
  color: var(--text-color-light);
  padding: 1rem;
  border-radius: 0.25em;
}
.credits-header {
  margin-top: 2rem;
  font-size: var(--font-h2);
}

.credits-card {
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 0.125rem solid var(--bg-color-dark);
  border-radius: 0.25em;
  overflow-wrap: break-word;
  /* overflow: hidden; */
}

.credit-result-container {
  /* display: grid; */
  /* grid-template-columns: repeat(2, 1fr); */
  /* gap: 1rem; */
}

.credit-image {
  object-fit: fill;
  aspect-ratio: 500 / 750;
}

.credit__name {
  font-size: var(--font-h6);
  padding: 0.5rem;
  margin: 0;
}

.credit__character {
  padding: 0.5rem;
  margin: 0;
  font-size: var(--font-small);
  margin-bottom: 1rem;
  flex: 1;
}

.credit__popularity {
  padding: 0.5rem;

  margin-top: auto;
  /* flex: 1; */
  font-size: var(--font-small);
}

.credit__popularity__score {
  display: inline-block;
  color: var(--text-color-light);

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.25em;
}

.credit__popularity__score--high {
  background-color: var(--high--popularity);
}

.credit__popularity__score--medium {
  background-color: var(--medium-popularity);
}

.credit__popularity__score--low {
  background-color: var(--low-popularity);
}

.credit__popularity__score--na {
  background-color: var(--no-popularity);
}

.pagination-container {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  margin: 2rem;
}

.welcome--message {
  text-align: center;
}

.welcome--message {
  text-align: center;
}
/* 
############################
############################
############################

MEDIA QUERIES

############################
############################
############################ */

@media only screen and (min-width: 40em) {
  :root {
    --font-h1: 2.488rem;
    --font-h2: 2.074rem;
    --font-h3: 1.728rem;
    --font-h4: 1.44rem;
    --font-h5: 1.2rem;
    --font-h6: 1rem;
    --font-small: 0.833rem;
  }

  .show-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .credit-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .search-form {
    /* row-gap: 1rem; */
  }

  .header--title,
  .header--title:hover,
  .header--title:focus-visible {
    color: var(--color-yellow);
  }
}

@media only screen and (min-width: 60em) {
  :root {
    --font-h1: 3.052rem;
    --font-h2: 2.441rem;
    --font-h3: 1.953rem;
    --font-h4: 1.563rem;
    --font-h5: 1.25rem;
    --font-h6: 1rem;
    --font-small: 0.8rem;
  }

  .show-container {
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: repeat(4, minmax(min-content, max-content)); */
  }
  .credit-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}