:root {
  /* colors */

  /* clr accent */
  --clr-accent-300: #a6b8c7;
  --clr-accent-350: hsl(207, 23%, 72%, 0.7);
  --clr-accent-400: #6f8ea9;
  --clr-accent-500: linear-gradient(to left, #ffba00, #ff9d00);

  /* clr primary */

  --clr-primary-300: #436f95;
  --clr-primary-400: #295c89;
  --clr-primary-500: #124b7c;
  --clr-primary-600: #003b6f;
  --clr-primary-700: #00203c;
  --clr-primary-800: #ff9d00;
  --clr-primary-900: #ffba00;

  /* clr neutral */
  --clr-neutral-100: white;
  --clr-neutral-900: black;

  /* font family */

  --ff-primary: "Montserrat", sans-serif;
  --ff-secondary: "Contrail One", cursive;

  /* font weight */
  --fw-regular: 300;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  /* font size */
  --fs-200: 0.8rem;
  --fs-300: 1rem;
  --fs-400: 1.25rem;
  --fs-500: 1.5rem;
  --fs-600: 2rem;
  --fs-700: 2.5rem;
  --fs-800: 3rem;
  --fs-900: 5rem;

  --fs-body: var(--fs-500);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-600);
  --fs-nav: var(--fs-600);
  --fs-button: var(--fs-500);

  --transition: all 0.5s linear;
}

@media (min-width: 767px) {
  :root {
    /* --fs-body:var(--fs-500);
  --fs-primary-heading:var(--fs-500);
  --fs-secondary-heading:var(--fs-500);
  --fs-nav:var(--fs-500);
  --fs-button:var(--fs-500); */
  }
}

/* reset */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* 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,
body {
  height: 100%;
}
/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

/* 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;
  }
}
/* end of reset */

/* main css */
body {
  width: 100%;
  font-family: var(--ff-primary);
  background: url("./image/background\ image.jpg");
  background-position-x: 80%;
  background-size: cover;
}

/* HEADER */

header {
  width: 100%;
  background-color: var(--clr-primary-500);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo-container {
  width: 31.25rem;
}

/* NAV*/

nav {
  width: 100%;
  background-color: var(--clr-primary-400);
  font-size: 1.5rem;
  color: var(--clr-neutral-100);
}
.nav-list {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0;
}

.nav-link {
  padding: 0.75rem 2rem;
}
a {
  text-decoration: none;
  color: inherit;
}
.nav-link:hover {
  background-color: var(--clr-neutral-100);
}

.nav-link:hover a {
  color: var(--clr-primary-400);
}
.bars-icon {
  color: white;
  font-size: 1.5rem;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: flex-end;
  display: none;
}
.fa-bars:hover {
  rotate: 180deg;
  transition: var(--transition);
}

/* ===index.html */
/* MAIN */
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: auto;
}

.container-center {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  justify-content: center;
}
.btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-self: center;
  max-height: 4rem;
  max-width: 500px;
  margin: 1.25rem;
}
.filter-btn {
  font-family: var(--ff-primary);
  border-radius: 1.5rem;
  box-sizing: unset;
  color: var(--clr-neutral-100);
  font-size: var(--fs-400);
  background-color: var(--clr-primary-300);
  cursor: pointer;
  border: var(--clr-neutral-100) solid 1px;
  padding: 0.6rem 2rem;
  margin-inline: 0.625rem;
  text-transform: capitalize;
}
.filter-btn:hover {
  padding-inline: 3rem;
  color: var(--clr-primary-400);
  background-color: var(--clr-neutral-100);
}
/* SINGLE ARTICLE */

.art-container {
  box-sizing: border-box;
  background-color: var(--clr-accent-300);
  max-width: 25rem;
  margin: 0.625rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  height: fit-content;
}

.art-image {
  min-height: 15rem;
  border-radius: 1.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.underline {
  width: 100%;
  height: 0.5rem;
  background: var(--clr-accent-500);
  margin-top: 1.5rem;
}

.art-header {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: var(--ff-secondary);
  font-size: var(--fs-600);
  background: none;
  border: none;
  text-transform: capitalize;
}
.art-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-600);
}

.art-content {
  font-size: var(--fs-400);
  margin-top: 0.3rem;
  display: none;
  font-style: italic;
  text-transform: capitalize;
}

.actor-name {
  font-weight: bold;
  font-style: italic;
}

#series-number {
  font-weight: bold;
  margin-left: 0.5rem;
}
p {
  margin-top: 0.5rem;
  font-size: var(--fs-300);
  font-weight: normal;
  font-style: normal;
}
/* ===about.html */
.about-container {
  box-sizing: border-box;
  margin: 0.625rem;
  max-width: 900px;
  min-height: 100vh;
}
.about-article {
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: var(--clr-accent-300);
  border: solid 2px var(--clr-primary-900);
  border-radius: 1.5rem;
  padding: 1.5rem;
  height: fit-content;
  margin-block: 1.5rem;
}
.about-article-img {
  float: left;
  padding: 0 1.3rem 1.3rem 0;
  border-right: 5px solid var(--clr-primary-800);
  border-bottom: 5px solid var(--clr-primary-900);
  margin-right: 1.6rem;
  max-width: 400px;
}
.about-article-title {
  text-transform: capitalize;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}
.about-article-text {
  margin: 0;
  line-height: 1.5rem;
}
/* FOOTER */
footer {
  width: 100%;
}
.footer {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  background-color: var(--clr-primary-400);
  padding: 1rem;
}
.footer-title {
  color: var(--clr-neutral-100);
}
.btt-btn {
  color: var(--clr-neutral-100);
  background: transparent;
  border: none;
  font-family: var(--ff-primary);
  font-size: var(--fs-300);
  cursor: pointer;
}

/* show-hide text */
.up-icon {
  display: none;
}
.show-text .art-container {
  display: block;
}
.show-text .art-content {
  display: block;
}
.show-text .up-icon {
  display: block;
}
.show-text .down-icon {
  display: none;
}

/* fixed position */

.fixed {
  top: 0;
  position: fixed;
  width: 100%;
  margin: 0;
}
.fixed + main {
  margin-top: 3.75rem;
}

@media screen and (max-width: 767px) {
  .logo-container {
    max-width: 15rem;
  }
  nav {
    flex-direction: column;
  }
  .nav-list {
    flex-direction: column;
    padding-left: 0;
    justify-content: center;
    display: none;
  }
  .nav-link {
    display: flex;
    justify-content: center;
  }

  .bars-icon {
    display: flex;
  }

  .show-list .nav-list {
    display: flex;
  }
  /* ===index.html */
  .container-center {
    flex-direction: row;
  }
  .art-container {
    min-width: 15rem;
  }
  /* ===about.html */
  .about-article {
    display: flex;
    justify-content: center;
    border-radius: 1.5rem;
    padding: 1.5rem;
    height: fit-content;
  }
  .about-article-img {
    float: none;
    padding: 0 0 1.3rem 0;
    border-right: none;
    margin-right: 0;
    max-width: 100%;
  }
  .about-article-title {
    padding: 1rem 3rem 0 3rem;
  }
}
@media screen and (max-width: 500px) {
  .btn-container {
    max-height: none;
    flex-direction: column;
  }
  .filter-btn {
    margin: 0.625rem;
  }
} ;