@import "components/CharacterCard/CharacterCard.css";
@import "components/SearchBar/SearchBar.css";
@import "components/NavButton/NavButton.css";
@import "components/NavPagination/NavPagination.css";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary: rgb(51, 51, 51);
  --color-secondary: #f6f6f6;
  --color-tertiary: rgb(169, 210, 128);
  --color-quaternary: salmon;
  --font-family: system-ui;
  --border-radius: 10px;
}

body {
  font-family: var(--font-family);
  color: var(--color-primary);
  padding: 20px;
  background-color: var(--color-tertiary);
}
.image {
  position: fixed;
  z-index: -3;
  left: 0px;
  top: 0px;
  filter: blur(5px);
  right: 0;
  margin: 0 auto;
  object-fit: cover;
  width: 100%;
  height: 100vh;
  scale: 1.02;
}
.app-wrap {
  margin: 0 auto;
  max-width: 1480px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title {
  padding: 10px 0;
  text-align: center;
  /*
  background-color: rgba(var(--color-tertiary), 0.7);
  backdrop-filter: blur(10px);
  */
  border-radius: var(--border-radius);
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 10;
  color: #fff;
}

button {
  cursor: pointer;
}

input[disabled],
button[disabled] {
  opacity: 0.5;
  cursor: default;
}