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

:root {
     --background-color: rgba(0, 0, 0, 0.786);
     --navbar-background-color: #2d2b2bec;
     --navbar-color: #1390deeb;
     --searchBar-box-shadow: #484a4c;
     --text-color: #e4e4e4;
}

body {
     background-color: var(--background-color);
     /* font-family: 'Kanit', sans-serif; */
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     align-items: center;
     height: 100vh;
     width: 100vw;
}

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

.flex-col {
     display: flex;
     flex-direction: column;
}

/*--------------------------------------------------------- Navbar ------------------------------------------------- */

/* Left Side */
.navbar {
     justify-content: space-between;
     align-items: center;
     width: 100%;
     background-color: var(--navbar-background-color);
     font-weight: 600;
     letter-spacing: 2px;
     font-size: 30px;
     padding: 0 20px;
}

.navbar-brand {
     align-items: center;
     gap: 10px;
}

.navbar-brand a {
     text-decoration: none;
     color: var(--navbar-color);
}

/* Right Side */
.logo {
     width: 2%;
     min-width: 45px;
     margin-top: 5px;
     margin-bottom: 5px;
}

.favAndTheme-btn {
     align-items: center;
     gap: 10px;
}

.link-to-different-page {
     justify-content: center;
     text-decoration: none;
}

.btn {
     border: none;
     outline: none;
     padding: 10px;
     background-color: var(--navbar-color);
     border-radius: 3px;
     color: #fff;
     height: 40px;
     font-size: 1rem;
}

.fav-btn {
     font-size: 16px;
     width: 140px;
}

.fav-icon {
     color: 1fff;
}

.bg-right-side-img {
     position: fixed;
     right: 0;
     bottom: 0;
     height: 90%;
     filter: blur(2px);
}

/*---------------------------------------------------- Search Bar and Results---------------------------------------- */

.search-bar-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 50px;
}

.search-icon-container {
     background: var(--navbar-background-color);
     box-shadow: 0px 0px 7px 0px var(--searchBar-box-shadow);
     color: #fff;
     height: 50px;
     width: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-top: 5px;
     margin-bottom: 5px;
     border-radius: 10px 0 0 10px;
}

.searchBar-items {
     min-width: 40%;
}

#search-bar {
     background: var(--navbar-background-color);
     color: #fff;
     min-width: 550px;
     height: 50px;
     font-size: 20px;
     border: none;
     box-shadow: 0px 0px 7px 0px var(--searchBar-box-shadow);
     border-radius: 0 10px 10px 0;
     outline: none;
     padding: 10px;
     letter-spacing: 2px;
     margin-top: 5px;
     margin-bottom: 5px;
     z-index: 1;
}

input::placeholder {
     color: #fff;
     font-size: 20px;
}

.img-info {
     gap: 10px;
}

.img-info img {
     width: 80px;
     height: auto;
     box-sizing: border-box;
     margin-left: 0px;

}



#search-results {
     min-width: 435px;
     /* height: 500px; */
     margin-top: 30px;
     list-style: none;
     z-index: 2;
     backdrop-filter: blur(4px);
     /* overflow-y: scroll; */

}

#search-results li {
     background: rgba(54, 171, 169, 0.468);
     height: 100px;
     color: white;
     width: 100%;
     margin: 10px;
     border-radius: 5px 50px 5px 5px;
     border: none;
     overflow: hidden;
}

#search-results li .hero-name {
     transition: all 0.5s ease;
}

#search-results li:hover .hero-name {
     color: red;
}

.single-search-result {
     padding: 0 5px;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     border: 1px solid black;
     width: inherit;
}

.character-info {
     text-decoration: none;
     color: white;
}

.hero-info {
     display: flex;
     align-items: center;
}

.hero-name {
     font-size: 26px;
}

.buttons {
     gap: 5px;
     padding: 0 10px;
}

/*------------------------------------------------------ Background Image ------------------------------------------- */
.bg-img {
     width: 65%;
     min-width: 600px;
     /* height: auto; */
     position: fixed;
     bottom: -1px;
     left: 0;
     right: 0;
     margin: auto;
}

/* ----------------------------------------------Toast for notification--------------------------------------------------*/
.fav-toast,
.remove-toast {
     position: absolute;
     bottom: 100px;
     font-size: 24px;
     width: 350px;
     color: white;
     letter-spacing: 1px;
     padding: 10px 20px;
     z-index: 2;
     text-align: center;
     left: 0;
     right: 0;
     margin: auto;
     border-radius: 5px;
}

.fav-toast[data-visiblity="show"],
.remove-toast[data-visiblity="show"] {
     display: block;
}

.fav-toast[data-visiblity="hide"],
.remove-toast[data-visiblity="hide"] {
     display: none;
}

.fav-toast {
     background-color: #20B130;
     box-shadow: 0px 0px 3px 3px white;
}

.remove-toast {
     background-color: hsl(40, 100%, 61%);
     box-shadow: 0px 0px 3px 3px white;
}


/* ------------------------------------------------Media Queries for different screen sizes ----------------------------- */

@media screen and (max-width: 576px) {
     
     #search-bar {
          font-size: 20px;
          min-width: 200px;
          width: 40%;
     }

     #search-bar::placeholder {
          font-size: 15px;
      }

     .navbar {
          flex-direction: column;
          gap: 10px;
          padding: 10px 0;
          /* height: 30%; */

     }
     .navbar-brand {
          display: flex;
          flex-direction: column;

     }

     .navbar-brand span {
          margin-top: -35px;
          font-size: 30px;
     }

     .logo {
          width: 25%;
          min-width: 45px;
     }
     .bg-img {
        width: 90%;
        min-width: 350px;
     }
     .btn {
          width: auto;
          font-size: 0.8rem;
          padding: 8px;
          margin: auto;
          border-radius: 8px;
     }

     #search-results {
          min-width: 350px;
          /* height: 500px; */
          margin-top: 30px;
          padding: auto;
          list-style: none;
          z-index: 2;
          backdrop-filter: blur(4px);
          /* overflow-y: scroll; */
     
     }
     #search-results li {
          width: 95%;
     }
     #search-results li .hero-name {
          font-size: 15px; 
}
.add-to-fav-btn{
     min-width: 150px;
}

}