@charset "UTF-8";

@font-face {
  font-family: chirp;
  src: url(../fonts/chirp_regular.otf);
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  font-family: "chirp";
}

body {
  background-color: rgb(26, 26, 26);
  color: white;
  display: grid;
  place-items: center;
}

header {
  margin-bottom: 100px;
  color: white;
  display: flex;
  width: 100%;
  height: fit-content;
  position: relative;
  /* margin-top: 15px; */
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  top: 0;
  left: 0;
  transition: 200ms;
  z-index: 999;
}

.container1 {
  display: flex;
  height: fit-content;
  width: fit-content;
  position: absolute;
  left: 0px;
}

/* MENU BUTTON */

.menuList {
  display: none;
  list-style-type: none;
}

.containerButton {
  display: none;
}

.containerLabel {
  display: none;
}

.container1 .linkMenuList {
  text-decoration: none;
}

.container1 .linkMenuList:visited {
  color: white;
  text-decoration: none;
}

/* //////////////////// */

header.roll {
  /* background-color: rgb(26, 26, 26); */
  backdrop-filter: blur(15px);
  background-color: #00000054;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: 100ms;
}

.containerNavOptions {
  margin: auto;
}

.containerNavOptionsFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.containerIcons {
  display: none;
  position: absolute;
  right: 0px;
  margin-right: 30px;
}

.siteLogo {
  display: flex;
  position: absolute;
  left: 0px;
  margin-left: 30px;
  align-items: center;
}

.options {
  display: flex;
  list-style-type: none;
  height: fit-content;
  width: fit-content;
  margin: auto;
  padding: 0;
  font-size: 20px;
  margin-top: 10px;
  align-items: center;
}

.linkOptions {
  text-decoration: none;
  margin-right: 15px;
  margin-left: 15px;
}

.linkOptions:visited {
  color: white;
}

.menuIcons {
  text-decoration: none;
  margin-left: 20px;
  font-size: 25px;
}

.menuIcons:visited {
  color: white;
}

/* SEARCH_BOX */

main {
  display: grid;
  height: 100%;
  place-items: center;
}

.searchBox {
  position: relative;
  height: 60px;
  width: 10px;
  right: 20px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  margin-top: 210px;
}

.searchBox.active {
  width: 350px;
  right: 40px;
}

.searchBox input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  background: #fff;
  font-size: 18px;
  border-radius: 50px;
  padding: 0 60px 0 20px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.searchBox input.active {
  opacity: 1;
}

.searchBox .searchButton {
  height: 60px;
  width: 60px;
  color: rgb(26, 26, 26);
  position: absolute;
  top: 50%;
  right: -45px;
  z-index: 1;
  transform: translateY(-50%);
  background: white;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  border-radius:50px;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.searchBox .searchButton.active {
  height: 50px;
  width: 50px;
  color: white;
  background: rgb(26, 26, 26);
  line-height: 50px;
  right: -75px;
  transform: translateY(-50%) rotate(360deg);
}

.searchBox .cancelButton {
  position: absolute;
  top: 50%;
  right: -45px;
  transform: translateY(-50%);
  color: white;
  font-size: 25px;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cancelButton .fa-xmark {
  width: 25px;
  padding-left: 8px;
  text-align: center;
}

.searchBox .cancelButton.active {
  right: -130px; 
  transform: translateY(-50%) rotate(360deg);
}

.searchBox .searchData {
  color: white;
  font-size: 18px;
  display: none;
}

.searchBox .searchData.active {
  display: grid;
  position: absolute;
  right: 90px;
  bottom: -40px;
}

/* ///////////////////////// */


/* SearchList Results */

.banner {
  margin-top: 40px;
  font-size: 0.8rem;
}

.containerList {
  margin-top: 30px;
  width: 70%;
}

.searchListIcons {
  display: flex;
  position: relative;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}

#searchListIconInline {
  display: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: white;
  padding: 7px;
  border-radius: 50%;
  transition: 150ms;
}

#searchListIconGrid {
  display: none;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: white;
  color: rgb(26, 26, 26);
  padding: 7px;
  border-radius: 50%;
  transition: 150ms;
}

.animeItem {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
  padding: 12px 8px;
  border-radius: 12px;
  justify-content: space-between;
}

.animeItem:hover {
  box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.25);
}

.anime-info {
  display: flex;
  flex-direction: row;
}

#anime-img {
  height: 240px;
  background-color: rgb(39, 39, 39);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.searchListGrid .anime-info {
  flex-direction: column;
}

.searchListGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
  gap: 16px;
  justify-content: center;
}

.searchListGrid .animeItem {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  position: relative;
  max-width: 170px;
  min-width: 170px;
  align-items: center;
}

.searchListGrid p{
  display: none;
}

.animeItem .animeSynopsis {
  margin-top: 42px;
}

.animeItem .animeImg {
  border-radius: 12px;
  width: 165px;
}

.animeTitleWrapper {
  margin: 0;
  margin-left: 20px;
  /* display: none; */
}

.searchListInline .animeTitleWrapper {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.searchListGrid .animeTitle {
  font-size: 1.1rem;
  text-align: center;
}

.searchListGrid .animeEnglishTitle {
  text-align: center;
  font-size: 0.7rem;
}

.searchListGrid .animeTitleWrapper {
  margin: 0;
  margin-top: 10px;
}

.animeEnglishTitle {
  font-size: 0.9rem;
  margin-left: 0.8px;
  margin-top: 5px;
}

.favorite-button-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 12px;
}

.searchListInline .favorite-button-container {
  width: fit-content;
}

.favorite-button {
  color: white;
  background-color: transparent;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  font-size: 1.2rem;
  transition: 200ms;
}

.favorite-button:hover {
  color:rgb(240, 50, 138);
}

#searchResultText {
  margin: auto;
  text-align: center;
  margin-bottom: 70px;
  font-size: 0.6rem;
}

a {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: none;
  color: white;
}


/* @media */

@media only screen and (max-width: 800px){
  .itemOptions {
    display: none;
  }

  .containerIcons {
    display: flex;
    margin-top: 20px;
  }

  .containerTitle {
    margin-top: 23px;
  }
}

@media only screen and (max-width: 600px){

  .searchBox {
    display: flex;
    justify-content: center;
  }

  .searchBox input.active {
    width: 50%;
    align-items: center;
  }

  .searchBox .searchButton.active {
    right: 52px;
  }

  .searchBox .cancelButton.active {
    right: 0px;
  }

  .searchListInline .anime-info {
    flex-direction: column;
  }

  .searchListInline .animeTitleWrapper {
    margin-left: 0;
    margin-top: 12px;
  }
}