@import "https://fonts.googleapis.com/css2?family=Creepster&family=Heebo:wght@700&family=Holtwood+One+SC&family=Lemon&family=Mochiy+Pop+P+One&family=Montserrat:wght@300;400;500;700&family=Poppins&family=Rancho&family=Rowdies:wght@300&family=Source+Sans+Pro&display=swap";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
body {
  background: #16151d;
}
.container-main {
  width: 95%;
  margin: 0 auto;
}
.space-container {
  margin: auto;
}
.nav-first {
  background: #000;
}
.nav-first form {
  width: 40%;
}
.nav-first form .search {
  width: 100%;
  background: #16151d;
  outline: none;
  border: 1px solid #1b1b1b;
  color: #fff;
  padding-left: 10px;
  border-radius: 5px;
  font-size: 0.9em;
}
.nav-first form .search::-webkit-input-placeholder {
  color: #fff;
}
.nav-first form button {
  background: #16151d;
  border-radius: 5px;
}
.nav-first form button i {
  color: #fff;
}
#navbar-main {
  background: #00a2ff;
  padding: 0;
}
#navbar-main #nav-items {
  color: #fff;
  padding: 14px 17px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  transition: 0.3s all ease;
}
#navbar-main #nav-items:hover {
  background: #16151d;
  color: #fbff00;
}
.text-info {
  background: #00a2ff;
  padding: 12px 14px;
  border-radius: 5px;
}
.text-info span {
  color: #fff;
  font-weight: 600;
  font-size: 1.3em;
  font-family: "Montserrat", sans-serif;
}
.text-info span a {
  color: #fbff00;
}
#content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}
#content .content-anime {
  background: #222;
  display: grid;
  border-radius: 5px;
}
#content .content-anime header {
  background: #00a2ff;
  padding: 9px 15px;
  border-radius: 5px;
}
#content .content-anime header span {
  color: #fff;
  font-size: 1.07em;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}
#content .content-anime .content-card {
  margin-top: 10px;
  padding: 15px;
}
#content .content-anime .content-card .items .c-items {
  overflow: hidden;
}
#content .content-anime .content-card .items .c-items a img {
  width: 100%;
  transition: 0.3s all ease;
}
#content .content-anime .content-card .items .c-items a:hover img {
  transform: scale(1.05);
}
#content .content-anime .content-card .items .description p {
  font-size: 0.85em;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-top: 5px;
}
#content .recomendation {
  background: #222;
  border-radius: 5px;
  position: relative;
  z-index: 0;
}
#content .recomendation header {
  padding: 10px;
}
#content .recomendation header span {
  color: #fff;
  font-size: 1.1em;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
#content .recomendation .line hr {
  color: #fff;
  margin: 0;
}
#content .recomendation .b-items {
  overflow: hidden;
}
#content .recomendation .b-items a img {
  width: 100%;
  transition: 0.3s all ease;
}
#content .recomendation .b-items a:hover img {
  transform: scale(1.05);
}
#content .recomendation .descriptions1 p {
  color: #fff;
  text-align: center;
  font-size: 0.76em;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-top: 5px;
}
#content .recomendation .ts {
  font-size: 0.9em;
}
#filters {
  background: #222;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
}
#filters header span {
  font-size: 1.05em;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
#filters .line {
  margin-top: -6px;
  position: relative;
}
#filters .line hr {
  color: #fff;
}
#filters .genre {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
#filters .genre span {
  color: #ccc;
  padding: 5px 7px;
  font-family: "Poppins", sans-serif;
  background: #333;
  font-size: 0.77em;
  text-align: center;
  border-radius: 3px;
}
#filters .search {
  display: grid;
  margin-top: 10px;
}
#filters .search .s-genre {
  width: 100%;
  background: #1b1a1a;
  border: 1px solid #1b1b1b;
  padding: 4px 10px;
  color: #fff;
  outline: none;
  border-radius: 5px;
  font-size: 0.9em;
  transition: 0.3s all ease;
}
#filters .search .s-genre::placeholder {
  color: #fff;
  transition: 0.3s all ease;
}
#filters .search .s-genre:focus::placeholder {
  color: gray;
}
#filters .search .frm {
  display: grid;
  grid-template-columns: 5fr 1fr;
  gap: 10px;
}
#filters .search .frm button {
  border-radius: 5px;
  background: #1a1a1a;
  width: 50px;
  padding: 7px 0;
  border: none;
}
#filters .search .frm button i {
  color: #fff;
  display: flex;
  justify-content: center;
}
#anime-genres {
  background: #222;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px;
}
#anime-genres header span {
  font-size: 1.1em;
  display: block;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}
#anime-genres .line hr {
  color: #fff;
  margin-top: 10px;
}
#anime-genres .genres ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
}
#anime-genres .genres ul li {
  text-align: start;
  border-top: 1px solid #312f40;
  border-right: 1px solid #312f40;
  border-left: 1px solid #312f40;
  font-size: 0.9em;
  padding: 4px 15px;
}
#anime-genres .genres ul li a {
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  transition: 0.2s all ease;
}
#anime-genres .genres ul li a:hover {
  color: #168ddd;
}
#ongoing {
  background: #222;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  position: relative;
}
#ongoing header h1 {
  color: #fff;
  font-size: 1.05em;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}
#ongoing .line hr {
  color: #fff;
}
#ongoing .ongoing-items ul {
  margin: 0;
  padding: 0;
}
#ongoing .ongoing-items ul li {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border-top: 1px solid #312f40;
  padding: 7px 10px;
}
#ongoing .ongoing-items ul li:hover {
  background: rgba(167, 167, 167, 0.1);
}
#ongoing .ongoing-items ul li a i {
  background: #00a2ff;
  color: #fff;
  border-radius: 50%;
}
#ongoing .ongoing-items ul li a span {
  font-size: 0.9em;
  margin-left: 5px;
}
#ongoing .ongoing-items ul li a span:nth-child(2) {
  font-weight: 400;
  font-size: 0.8em;
}
#ongoing .ongoing-items ul li a span:nth-child(2),
#ongoing .ongoing-items ul li a span:nth-child(3) {
  color: #fff;
}
#ongoing .ongoing-items ul li a span:nth-child(3) {
  background: #00a2ff;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 0.7em;
  position: absolute;
  right: 10px;
}
#ongoing .ongoing-items ul li a:hover span:nth-child(2) {
  color: #168ddd;
}
#seasons {
  background: #222;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
#seasons header h1 {
  font-size: 1.2em;
  font-weight: 600;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}
#seasons .line hr {
  color: #fff;
}
#seasons .seasons-items {
  position: relative;
  height: 300px;
  overflow-y: scroll;
}
#seasons .seasons-items ul {
  margin: 0;
  padding: 0;
}
#seasons .seasons-items ul li {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border-top: 1px solid #312f40;
  padding: 7px 10px;
}
#seasons .seasons-items ul li:hover {
  background: rgba(167, 167, 167, 0.1);
}
#seasons .seasons-items ul li a span:nth-child(1) {
  background: #00a2ff;
  color: #fff;
  display: inline-block;
  width: 6px;
  height: 6px;
}
#seasons .seasons-items ul li a span {
  font-size: 0.9em;
  margin-left: 5px;
}
#seasons .seasons-items ul li a span:nth-child(2) {
  font-weight: 400;
  font-size: 0.8em;
}
#seasons .seasons-items ul li a span:nth-child(2),
#seasons .seasons-items ul li a span:nth-child(3) {
  color: #fff;
}
#seasons .seasons-items ul li a span:nth-child(3) {
  text-align: end;
  position: absolute;
  right: 10px;
}
#seasons .seasons-items ul li a:hover span:nth-child(2) {
  color: #168ddd;
}
footer {
  background: #222;
  margin-top: 6vh;
  padding-top: 2.5em;
  padding-bottom: 3em;
}
footer .copyright {
  display: grid;
  justify-content: center;
}
footer .copyright p {
  color: #a8a7a7;
  font-size: 0.8em;
  text-align: center;
}
footer .copyright p:nth-child(2) {
  margin: -5px;
}
@media (max-width: 1400px) {
  #dashboard {
    display: none;
    animation-delay: 2s;
    animation-duration: 1s;
  }
}
@media (max-width: 992px) {
  .nav-first form {
    margin: 20px 0;
  }
  .nav-first form {
    width: 100%;
  }
  #dashboard {
    display: flex;
  }
  #navbar-main {
    padding: 8px;
  }
  #navbar-main #nav-items {
    color: #fff;
    padding: 18px 0;
    text-align: center;
  }
} /*# sourceMappingURL=main.css.map */