:root {
  /* colors */
  --clr-dark: 230 35% 7%;
  --clr-accent: 220 82% 53%;
  --clr-white: 0 0% 100%;

  /* font-sizes */
  --fs-900: clamp(1.25rem, 5vw + 1rem, 2.75rem);
  --fs-800: clamp(1.25rem, 4vw + 1rem, 2.5rem);
  --fs-700: clamp(1.25rem, 3vw + 1rem, 2.25rem);
  --fs-600: clamp(1rem, 2vw + 1rem, 2rem);
  --fs-500: clamp(1rem, 2vw + 1rem, 1.75rem);
  --fs-400: clamp(1rem, 1vw + 1rem, 1.5rem);
  --fs-300: clamp(0.75rem, 1vw + 1rem, 1rem);
  --fs-200: clamp(0.5rem, 1vw + 1rem, 1rem);

  /* font-families */
  --ff-headline: "Orbitron", sans-serif;
  --ff-sans-normal: "Lato", sans-serif;
}
/* font-size adjustments */
@media (max-width: 699px) {
  :root {
    --fs-900: clamp(1.25rem, 7vw + 1rem, 2rem);
    --fs-800: clamp(1.25rem, 6vw + 1rem, 2rem);
    --fs-700: clamp(1.25rem, 5vw + 1rem, 1.75rem);
    --fs-600: clamp(1rem, 4vw + 1rem, 1.5rem);
    --fs-500: clamp(1rem, 2vw + 1rem, 1.25rem);
    --fs-400: clamp(1rem, 1vw + 1rem, 1rem);
  }
}

/* reset styles */

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

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
picture,
ul {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: 400;
  line-height: 1.5em;
}

body {
  font-family: var(--ff-sans-normal);
  font-weight: 400;
  color: hsl(var(--clr-white));
  background-color: hsl(var(--clr-dark));
  line-height: 1.5;
  min-height: 100vh;
  grid-template-rows: min-content 1fr;
  overflow-x: hidden;
  background-size: cover;
  background-position: bottom center;
  background-image: url(../media/bg-mobile.jpg);
  font-size: 16px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.img {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* utility styles */

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-space, 1rem);
}

.block {
  display: block;
}

.container {
  padding-inline: 2em;
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

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

.bold {
  font-weight: 700;
}

.ital {
  font-style: italic;
  font-weight: 400;
}

.bang {
  font-style: italic;
  font-weight: 700;
}

.skip {
  position: absolute;
  z-index: 9999;
  background: hsl(var(--clr-white));
  color: hsl(var(--clr-dark));
  padding: 0.5em 1em;
  margin-inline: auto;
  transform: translateY(-150%);
  transition: transform 250ms ease-in;
}
.skip:focus {
  transform: translateY(0);
}

/* (Color Utilities) */

.bg-dark {
  background-color: hsl(var(--clr-dark));
}
.bg-accent {
  background-color: hsl(var(--clr-accent));
}
.bg-white {
  background-color: hsl(var(--clr-white));
}

.text-dark {
  color: hsl(var(--clr-dark));
}
.text-accent {
  color: hsl(var(--clr-accent));
}
.text-white {
  color: hsl(var(--clr-white));
}

/* (Typography Utilities) */

.ff-headline {
  font-family: var(--ff-headline);
}
.ff-sans-normal {
  font-family: var(--ff-sans-normal);
}

.letter-spacing-1 {
  letter-spacing: 5px;
}
.letter-spacing-2 {
  letter-spacing: 3px;
}
.letter-spacing-3 {
  letter-spacing: 2.5px;
}

.uppercase {
  text-transform: uppercase;
}

.fs-900 {
  font-size: var(--fs-900);
}
.fs-800 {
  font-size: var(--fs-800);
}
.fs-700 {
  font-size: var(--fs-700);
}
.fs-600 {
  font-size: var(--fs-600);
}
.fs-500 {
  font-size: var(--fs-500);
}
.fs-400 {
  font-size: var(--fs-400);
}
.fs-300 {
  font-size: var(--fs-300);
}
.fs-200 {
  font-size: var(--fs-200);
}

.fs-900,
.fs-800,
.fs-700,
.fs-600 {
  line-height: 1.1;
}

/* primaryHeader */

.primaryHeader {
  justify-content: flex-start;
  align-items: center;
}

.logo {
  max-width: 66%;
  padding: 1em;
}

.primary-navigation {
  --gap: clamp(1rem, 5vw, 3.5rem);
  --underline-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  background: hsl(var(--clr-white) / 0.5);
  backdrop-filter: blur(1.5rem);
}

.primary-navigation a {
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-400);
}

.primary-navigation a > span {
  margin: 0 0.5em;
}

.mobile-nav-toggle {
  display: block;
  position: fixed;
  z-index: 2000;
  right: 1rem;
  top: 2rem;
  background: transparent;
  background-image: url(../media/icon-hamburger.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 1.5rem;
  aspect-ratio: 1;
  border: 0;
}

.mobile-nav-toggle[aria-expanded="true"] {
  background-image: url(../media/icon-close.svg);
}

.mobile-nav-toggle:focus-visible {
  outline: 5px solid white;
  outline-offset: 5px;
}

.primaryNavItem {
  display: block;
  background: hsl(var(--clr-dark));
  border: 4px solid hsl(var(--clr-accent));
  color: hsl(var(--clr-white));
  border-radius: 0 2em;
  text-align: right;
  width: 100%;
  padding: 0.5em 1.25em;
}

/* ----------------------------- */
/* Main Layout                   */
/* ----------------------------- */

.main {
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-end;
  height: 20vh;
}

.container {
  flex-flow: column nowrap;
  justify-content: space-between;
  z-index: 10;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.splash {
  text-align: right;
  margin: 3em 5% 3em 20%;
  border-left: 4px solid hsl(var(--clr-accent));
  width: 66%;
  padding-left: 1em;
}

.quote {
  text-shadow: 0 0 5px hsl(var(--clr-accent)), 0 0 5px hsl(var(--clr-accent)),
    0 0 5px hsl(var(--clr-accent)), 0 0 5px hsl(var(--clr-accent));
}

.attribution {
  margin: 0.75em 0;
}

.content {
  width: 80%;
  margin: 0 auto;
  background-color: hsl(var(--clr-white) / 0.5);
  border: 4px solid hsl(var(--clr-accent));
  color: hsl(var(--clr-dark));
  border-radius: 1em;
  padding: 2em;
}

footer {
  text-align: center;
  width: 75%;
  margin: 2em auto 1em;
}

/* ----------------------------- */
/* Page Styles                   */
/* ----------------------------- */

/* general */

.sectionTitle {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: hsl(var(--clr-white));
  font-size: var(--fs-700);
  border-top: 3px solid hsl(var(--clr-accent));
  border-bottom: 3px solid hsl(var(--clr-accent));
}

.cta {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-400);
  text-align: center;
}

.cta h3 {
  font-size: var(--fs-600);
}

.backTo {
  position: fixed;
  bottom: 15%;
  right: 15%;
  padding: 0.5em 1em;
  border: 4px solid hsl(var(--clr-accent));
  color: hsl(var(--clr-white));
  text-decoration: underline;
  background: rgb(12, 69, 199);
  background: linear-gradient(
    175deg,
    rgba(12, 69, 199, 1) 0%,
    rgba(161, 192, 242, 1) 10%,
    rgba(175, 203, 246, 1) 17%,
    rgba(6, 23, 89, 1) 37%,
    rgba(14, 38, 153, 1) 70%,
    rgba(12, 31, 199, 1) 84%,
    rgba(7, 17, 111, 1) 100%
  );
  border-radius: 2em 0 2em 0;
  font-weight: 700;
  text-transform: uppercase;
}

/* Library */

.book {
  margin: 1em auto;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 1em;
  align-items: flex-start;
  border: 2px solid hsl(var(--clr-dark));
  border-radius: 2em;
  background: hsl(var(--clr-white) / 0.5);
  padding: 2em;
}

.libraryThumbnail {
  width: 30%;
  border: 2px solid hsl(var(--clr-dark));
  border-radius: 2em;
  float: left;
  margin-right: 2em;
}

.bookTitle {
  text-transform: uppercase;
  font-size: var(--fs-600);
}

.book p {
  margin: 0.35em 0;
}

/* Gallery */

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.librarySection .gallerySection {
  border-top: 4px solid hsl(var(--clr-accent));
  padding-bottom: 1em;
}

.sectionTitle {
  margin: 1em auto 0.5em auto;
}

.galleryImg {
  border: 4px solid hsl(var(--clr-dark));
  background: url(../media/itemBG-01.jpg);
  background-size: cover;

  border-radius: 0.5em 2em 0.5em 2em;
}

.galleryThumbnail {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 0.5em 2em 0 0;
}

.galleryCaption {
  color: hsl(var(--clr-white));
  background: hsl(var(--clr-dark) / 0.75);
  border-radius: 0 0 0 1.5em;
  padding: 0 0 0.25em 0;
  font-size: var(--fs-300);
  text-transform: uppercase;
}

/* Cast Bios */

/* Style the tab */
.tab {
  flex-flow: row;
  justify-content: flex-start;
  overflow: hidden;
  margin: 1em auto 0 auto;
  border: 4px solid hsl(var(--clr-accent));
  background: hsl(var(--clr-accent));
  border-radius: 1em 1em 0 0;
  --gap: 4px;
}

/* Style the buttons that are used to open the tab content */
.tablinks {
  border-radius: 1em;
  background-color: hsl(var(--clr-white));
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.5s;
}
.inactive {
  background-color: hsl(var(--clr-white) / 0.5);
  text-align: center;
  border-radius: 1em;
  float: left;
  outline: none;
  padding: 14px 16px;
}

/* Change background color of buttons on hover */
.tablinks:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tablinks.active {
  background-color: #ccc;
  border: 0;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 0;
  transition: 0.5s;
}

.itemImage {
  width: 100%;
}

.item {
  color: hsl(var(--clr-dark));
  background: hsl(var(--clr-white));
  border: 4px solid hsl(var(--clr-accent));
  border-radius: 0 0 1em 1em;
  width: 100%;
  margin: 0 auto;
  padding: 1em;
}

.item > * > p {
  margin-bottom: 0.5em;
}

.articleData {
  margin: 1em 0;
}
.articleData p {
  margin-bottom: 0.5em;
}
.castTitle {
  margin-top: 2em;
}
.castGroup {
  font-weight: 700;
}
.cast {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1em 0;
}
.character {
  width: 15rem;
  background-image: url(../media/itemBG-01.jpg);
  background-position: center;
  background-size: cover;
  padding: 1em;
  border: 4px solid hsl(var(--clr-dark));
  border-radius: 0 2em;
}
.character a {
  color: hsl(var(--clr-white));
  text-decoration: none;
}
.character h3 {
  font-family: var(--ff-headline);
  font-size: var(--fs-400);
}
.characterThumbnail {
  width: 100%;
  border: 4px solid hsl(var(--clr-dark));
}

.classified h1 {
  color: red;
}

#photo {
  background-image: url(../media/itemBG-01.jpg);
  background-position: center;
  background-size: cover;
  padding: 1em;
  border: 4px solid hsl(var(--clr-dark));
  border-radius: 2em;
  height: min-content;
}
#file {
  max-width: 70ch;
}

/* ----------------------------- */
/* Media Querries                */
/* ----------------------------- */

/* Mobile */

@media (max-width: 699px) {
  .primary-navigation {
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 45%;
    list-style: none;
    /* padding: min(20rem, 10vh) 1rem; */
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 500ms ease-in-out;
    border: 0;
  }
  .active,
  .primaryNavItem:hover,
  .primaryNavItem:focus {
    color: hsl(var(--clr-accent));
    background-color: hsl(var(--clr-white));
    border: 4px solid hsl(var(--clr-accent));
  }
  .primary-navigation[data-visible="true"] {
    transform: translateX(0);
  }
  .splash {
    text-align: right;
    margin: 1em auto;
    border-left: 4px solid hsl(var(--clr-accent));
    width: 80%;
    padding-left: 0.5em;
  }
  .content {
    width: 90%;
    padding: 1em;
  }
  .sectionTitle {
    width: 90%;
    text-align: center;
    padding-left: 0;
    font-size: var(--fs-600);
  }
  .tab {
    flex-flow: column nowrap;
  }
  .book {
    padding: 0.5em;
    border-radius: 0;
  }
  .libraryThumbnail {
    display: none;
  }
  .backTo {
    right: 0;
    font-size: var(--fs-400);
  }
}

/* Tablet */

@media (min-width: 700px) {
  body {
    background-image: url(../media/bg-tab.jpg);
  }
  .mobile-nav-toggle {
    display: none;
  }
  .logo {
    width: 80%;
  }
  .primaryHeader {
    flex-flow: column-reverse nowrap;
    justify-content: flex-start;
    align-items: center;
    --gap: 0;
  }
  .primary-navigation {
    margin-block: 1rem;
    --gap: clamp(0.5rem, 5vw, 2rem);
    --underline-gap: 1rem;
    padding: 1.25em 1.75em;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
    border: 4px solid hsl(var(--clr-accent));
    border-radius: 2em;
    background: hsl(var(--clr-white) / 0.5);
  }
  .primaryNavItem {
    display: inline;
    margin: 0 0;
    padding: 0 0;
    background: none;
    border: 0;
    color: hsl(var(--clr-white));
    border-radius: 0;
  }
  .primaryNavItem:hover,
  .primaryNavItem:focus {
    border-bottom: 4px solid hsl(var(--clr-dark));
    background-color: hsl(var(--clr-accent) / 0.5);
  }
  .active {
    color: hsl(var(--clr-dark));
    background-color: none;
    border: 0;
    border-bottom: 4px solid hsl(var(--clr-dark));
  }
  .splash {
    margin: 1em auto 3em;
    width: 80%;
    padding-left: 1.5em;
  }
}

/* Desktop */

@media (min-width: 1000px) {
  body {
    background-image: url(../media/bg-desktop.jpg);
  }
  .logo {
    width: 40%;
  }
  .primaryHeader {
    width: 100%;
    margin: 0 auto;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    --gap: 0;
  }
  .primary-navigation {
    margin: 0;
    --gap: clamp(0.5rem, 2vw, 2rem);
    --underline-gap: 1rem;
    padding: 2em;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    border-right: 4px solid hsl(var(--clr-accent));
    border-radius: 2em 2em 2em 2em;
  }
  .splash {
    margin: 3em auto;
    width: 65%;
    padding-left: 1.5em;
    font-size: var(--fs-500);
  }
  .content {
    padding: 3em;
  }
  .tab {
    display: none;
  }
  .tabcontent {
    display: block;
    padding: 0 0;
  }
  .item {
    margin: 4em auto 2em;
    border-radius: 2em;
    padding: 2em;
  }
}

/* large Monitors */

@media (min-width: 120em) {
  body {
    background-image: url(../media/bg-big.jpg);
  }
}