@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --headerFont: 'Orbitron', serif;
  --bodyFont: Roboto, Helvetica, Arial, sans-serif;

  /* --primaryColor: #e1f1ff;
  --secondaryColor: #f1f8ff;
  --primaryBtnColor: #007bff;
  --secondaryBtnColor: #f1f8ff;
  --boxShadowColor: rgb(60, 60, 60);
  --lightFontColor: white;
  --darkFontColor: rgb(40, 40, 40); */

  --color1: #028090;
  --color2: #469ea7;
  --color3: #8bbdbe;
  --btnColor1: #114b5f;
  --btnColor2: #e8edeb;
  --boxShadowColor: rgb(40, 40, 40);
  --lightFontColor: white;
  --darkFontColor: rgb(40, 40, 40);

  --coverArtAR: calc(268 / 372);

  --primaryPadding: 2rem;
}

html,
body {
  height: 100%;
}

html {
  min-width: 320px;
  font-family: var(--bodyFont);
  color: var(--darkFontColor);
}

body {
  background-color: var(--color1);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  color: var(--lightFontColor);
  background-color: var(--color1);
  box-shadow: 0 0 0.5rem var(--boxShadowColor);
  z-index: 100;
}

header > a {
  text-decoration: none;
}

header > a:visited {
  color: inherit;
}

header > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header > div > a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--btnColor1);
  color: var(--lightFontColor);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--lightFontColor);
  background-color: var(--color1);
  box-shadow: 0 0 0.5rem var(--boxShadowColor);
  z-index: 999;
}

footer a {
  display: flex;
  gap: 0.2rem;
  font-weight: bold;
  color: var(--lightFontColor);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

footer a:hover {
  transform: scale(1.05);
}

footer a:hover img {
  transform: rotate(360deg);
}

footer img {
  height: 1.5rem;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(186deg)
    brightness(103%) contrast(103%);
  transition: transform 0.2s ease-in-out;
}

h1,
h2,
h3,
h4 {
  font-family: var(--headerFont);
}

h1 {
  font-weight: 800;
}

ul {
  padding: 0;
}

button {
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
}

form {
  background-color: var(--color3);
}

input {
  padding: 0.5rem;
}

fieldset {
  border: none;
  padding: 0;
}

fieldset > div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
}

fieldset > div > div {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--btnColor1);
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}

fieldset input {
  margin-right: 0.25rem;
}

.index-container {
  display: flex;
  justify-content: center;
  align-self: center;
  height: 100%;
  padding: 2rem;
  background: url('svg/blob-haikei.svg');
  background-size: cover; /* Ensures the SVG covers the container */
  background-position: center; /* Centers the SVG */
}

.index-container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.index-container h1 {
  font-size: 3.5rem;
  text-align: center;
}

.index-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 60%;
}

.index-links > a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--btnColor1);
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.index-links > a:last-child {
  background-color: var(--btnColor1);
  color: var(--lightFontColor);
  border: none;
}

.add-btn:before {
  content: url(icons/plus.svg);
  display: inline-block;
  /* Width and height should match font size */
  width: 1.2rem;
  height: 1.2rem;
  margin-bottom: 3px;
  margin-right: 0.25rem;
  vertical-align: middle;
  /* Adjust filter to match font color */
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(186deg)
    brightness(103%) contrast(103%);
}

.options-container,
.titles-container,
.title-details-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.options-container > div,
.titles-container > div,
.title-details-container > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--primaryPadding);
  background-color: var(--color3);
}

.options {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  background-color: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--btnColor1);
  border-radius: 0.25rem;
  transition: all 0.1s ease-in;
}

.option:hover {
  background: var(--color2);
}

.option > a {
  color: var(--darkFontColor);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.add-category-link {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  background: var(--btnColor1);
  color: var(--lightFontColor);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.dot-menu-container {
  display: flex;
  position: relative;
}

.dot-menu-btn {
  width: 1.5rem;
  height: 1.5rem;
  /* Could also use vertical dots icon here */
  background: url(icons/dots-vertical.svg) no-repeat center;
  border: none;
  border-radius: 0.25rem;
  /* Can adjust color of menu button if needed */
  /* filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(327deg) brightness(96%) contrast(104%); */
  opacity: 0.5;
  position: relative;
  transition: all 0.1s ease-in;
}

.dot-menu-btn:hover {
  background-color: var(--color1);
  /* Adjust filter to match page-detail-color */
  /* filter: invert(20%) sepia(83%) saturate(6817%) hue-rotate(233deg) brightness(88%) contrast(97%); */
  opacity: 1;
}

.dot-menu-btn:active {
  background-color: var(--color1);
}

.dot-menu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: fit-content;
  background-color: var(--btnColor2);
  border: 1px solid var(--btnColor1);
  border-radius: 0.25rem;
  position: absolute;
  top: 0.75rem;
  z-index: 1000;
  list-style: none;
  overflow: hidden;
  visibility: hidden;
}

.menu-right {
  left: 0.75rem;
}

.menu-left {
  right: 0.75rem;
}

.dot-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot-menu-item:hover {
  background-color: var(--color2);
  cursor: pointer;
}

.dot-menu-item > a,
.dot-menu-item button {
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.dot-menu-item > a {
  color: inherit;
  text-decoration: none;
}

.dot-menu-item form {
  background-color: inherit;
}

.dot-menu-item button {
  border: none;
  background-color: transparent;
}

.dot-menu-item span:before,
.edit-links > a:before,
.edit-links button:before {
  display: inline-block;
  /* Width and height should match font size */
  width: 1.2rem;
  height: 1.2rem;
  margin-bottom: 3px;
  margin-right: 0.25rem;
  vertical-align: middle;
  /* Adjust filter to match font color */
  /* filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(327deg) brightness(96%) contrast(104%); */
}

.dot-menu-item:first-child span:before,
.edit-links > a:before {
  /* Change icon as needed */
  content: url(icons/edit.svg);
}

.dot-menu-item:last-child span:before,
.edit-links button:before {
  /* Change icon as needed */
  content: url(icons/delete.svg);
}

.visible {
  visibility: visible;
}

.titles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
}

.title-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--color1);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.title-card:hover {
  transform: scale(1.02);
  box-shadow: 4px 4px 4px var(--boxShadowColor);
}

.title-card > img {
  height: 350px;
  aspect-ratio: var(--coverArtAR);
  object-fit: cover;
  border: 1px solid var(--color1);
  border-radius: 4px;
}

.title-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.title-card-details > h3 > span {
  font-weight: 400;
}

.title-card-details > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.title-card-details > div > div {
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.title-card-details h4 {
  padding-top: 3px;
}

.title-card-details ul {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.back-link {
  color: var(--darkFontColor);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.title-details {
  align-items: center;
}

.title-details > img {
  flex: 1 1 350px;
  min-height: 350px;
  max-height: 1000px;
  aspect-ratio: var(--coverArtAR);
  object-fit: cover;
  border: 1px solid var(--color1);
  border-radius: 4px;
}

.title-details > .genres-and-devs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.title-details > .genres-and-devs > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

.title-details > h2 {
  text-align: center;
}

.title-details > h2 > span {
  font-weight: 400;
}

.title-details > .genres-and-devs ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-details > .edit-links {
  display: flex;
  gap: 0.5rem;
}

.title-details > .edit-links > a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--btnColor1);
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.title-details > .edit-links button {
  padding: 0.5rem 1rem;
  height: 100%;
  background-color: red;
  color: var(--lightFontColor);
  border: none;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}

.title-details > .edit-links button:before {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(186deg)
    brightness(103%) contrast(103%);
}

.title-form,
.option-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--primaryPadding);
}

.title-form > div:not(:last-child),
.option-form > div:not(:last-child) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cat-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-btns {
  display: flex;
  gap: 0.5rem;
}

.form-btns > a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--btnColor2);
  color: var(--darkFontColor);
  border: 1px solid var(--btnColor1);
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.form-btns > button {
  padding: 0.5rem 1rem;
  background: var(--btnColor1);
  color: var(--lightFontColor);
  border: none;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}

.error-list {
  color: red;
}

.error-list > li:before,
.error-list > li:after {
  color: red;
}

.error-list > li:before {
  content: '* ';
}

.error-list > li:after {
  content: ' *';
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  padding: 0.5rem 4rem;
  border: 1px solid var(--btnColor1);
  border-radius: 4px;
  background: url(icons/chevron-down.svg) no-repeat;
  background-color: var(--btnColor2);
  background-position: right 0.5rem top 50%;
  background-size: 1.5rem;
}

.dropdown-content {
  display: none;
  width: 100%;
  background-color: var(--btnColor2);
  border: 1px solid var(--btnColor1);
  border-radius: 0.25rem;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: column;
}

.dropdown-content a {
  color: var(--darkFontColor);
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: var(--color2);
}

.btn-animation {
  transition: all 0.2s ease;
}

.btn-animation:hover {
  transform: scale(1.02);
  box-shadow: 2px 2px var(--boxShadowColor);
}

@media (max-width: 600px) {
  :root {
    --primaryPadding: 2rem 1rem;
  }

  header {
    flex-direction: column;
    gap: 1rem;
  }

  header > a {
    text-align: center;
  }
}