/* Base styles */

/* Responsive styles for tablets and small desktops */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
  }
  
@media (max-width: 1024px) {
   .new_logo {
       font-size: 4rem;
       top: -8rem;
       transform: translateZ(-20px) scale(2.5);
   }
   .theme, .imgs, nav a {
       font-size: 1.5rem;
   }
   .search-bar {
      position: relative;
      top:-4rem;
      transform: translateZ(-20px) scale(2.5);
      width: 80%;
   }
   .search-bar input {
       font-size: 1.2rem;
       padding: 4px 10px;
       width: 1;
   }
   .suggestions-list {
       width: 595px;
       left: -4.3rem;    
   }
   .fa-microphone-alt, .fa-magnifying-glass {
       font-size: 2rem;
   }
   .Scroll-down {
       height: 10px;
       width: 10px;
       top: 26rem;
       left: 50%;
       transform: translate(-50%, 0) translateZ(-50px) scale(1);
   }
   .Scroll-down i {
       color: #fff;
   }
}

/* Responsive styles for smartphones and smaller tablets */
@media (max-width: 900px) {
   .new_logo {
       font-size: 5rem;
       top: -6rem;
       transform: translateZ(-20px) scale(2);
   }
   .gen {
      font-size: 5rem;
   }
   .theme, .imgs, nav a {
       font-size: 1.2rem;
   }
   .dropdown1 {
      position: relative;
      width: 100px;
      border-radius: 10px;
      background-color: #000;
      cursor: pointer;
      transform: translateZ(-19px) scale(1);
    }
    .dropdown-text1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 500;
      background-color: transparent;
      padding: 1rem 1.5rem;
      color: var(--white);
    }
   .search-bar {
      position: relative;  
      top: -3rem;
      transform: translateZ(-20px) scale(2.7);
      width: 95%;
   }
   .search-bar input {
       font-size: 1rem;
       outline-color: #444;
       padding: 4px 10px;
       width: 1;
   }
   .suggestions-list {
      max-height: 200px;
      overflow-y: auto;
      display: none;
      border-radius: 20px;
      position: relative;
      position: absolute;
      top: 4rem;
      left: -4.3rem;
      background: #000;
      color: #fff;
      width: 557px;
      z-index: 1000;
      filter: drop-shadow(0 2px 2px #000);
   }
   .suggestions-list li {
      padding: 10px;
      cursor: pointer;
   }
   .suggestions-list li:hover {
      background-color: #444;
   }
   .fa-microphone-alt, .fa-magnifying-glass {
       font-size: 1.6rem;
   }
   .Scroll-down {
       height: 10px;
       width: 10px;
       top: 26rem;
       left: 44.1%; 
       transform: translateZ(-50px) scale(1);
   }
   .Scroll-down i {
       color: #fff;
   }
}

/* Responsive styles for small smartphones */
@media (max-width: 480px) {
   .new_logo {
       top: -14rem;
       left: -rem;
       font-size: 100px;
       text-align: center;
       transform: translateZ(-20px) scale(1.5);
   }
    .fa-microphone-alt{
        transform: translateZ(-20px) scale(1);
    }

   .theme, .imgs, nav a {
       font-size: 1.5rem;
   }
   .sideMenu{
    color: #000;
    top: 3rem;
    left: 1rem;
    height: 40px;
    width: 90px;
    border-radius: 10px;
    position: relative;
    position: absolute;
    transition: 0.4s ease;
    overflow: hidden;
    filter: drop-shadow(0 2px 2px #000);
    animation: smenu 1s forwards;
}
   .search-bar {
      position: relative;
      top: -5rem;
      left: -0.4rem; 
      transform: translateZ(-20px) scale(3);
      width: 90%;
   }
   .search-bar input {
       font-size: 1rem;
       padding: 4px 5px;
       width: 220px;
   }
   .suggestions-list {
       max-height: 300px;
       width: 380px;
       overflow-y: auto;
       display: none;
       font-size: 1px;
       border-radius: 20px;
       position: absolute;
       top: 4rem;
       left: -4.3rem;
       background: #000;
       color: #fff;
       z-index: 1000;
       filter: drop-shadow(0 2px 2px #000);
       transform: translateZ(-20px) scale(1);
   }
   .fa-microphone-alt, .fa-magnifying-glass {
       font-size: 1.5rem;
   }
   .Scroll-down {
       height: 10px;
       width: 10px;
       top: 19.5rem;
        left: 50%;
       transform: translate(-50%, 0) translateZ(-50px) scale(1);
   }
   .Scroll-down i {
       color: #fff;
   }
   #subtitle {
    font-size: 0.9rem;
    position: absolute;
    top: 36rem;  
}
   .scrollable-tabs-container {
    font-family: "Roboto", sans-serif;
    background: #000;
    max-width: 500px;
    margin: 16px auto;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
#search-formQuery {
    display: inline-block;
    position: relative;
    left: -50px;
    width: 50%;
}
   #search-inputQuery {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
}
#search-formQuery button {
    position: absolute;
    left: 270px;
    top: 7px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
}

@media only screen and (max-width: 395px) {
       .new_logo {
           font-size: 7rem;
           top: -10rem;
           left: -5rem;
           text-align: center;
           transform: translateZ(-20px) scale(1.5);
       }
       .theme, .imgs, nav a {
           font-size: 1.5rem;
       }
       .sideMenu{
        color: #000;
        top: 3rem;
        left: 1rem;
        height: 40px;
        width: 90px;
        border-radius: 10px;
        position: relative;
        position: absolute;
        transition: 0.4s ease;
        overflow: hidden;
        filter: drop-shadow(0 2px 2px #000);
        animation: smenu 1s forwards;
    }
       .search-bar {
          position: relative;
          top: -7rem;
          left: -0.4rem; 
          transform: translateZ(-20px) scale(3);
          width: 90%;
       }
       .search-bar input {
           font-size: 1rem;
           padding: 4px 5px;
           width: 190px;
       }
       .suggestions-list {
           max-height: 300px;
           width: 380px;
           overflow-y: auto;
           display: none;
           font-size: 1px;
           border-radius: 20px;
           position: absolute;
           top: 4rem;
           left: -4.3rem;
           background: #000;
           color: #fff;
           z-index: 1000;
           filter: drop-shadow(0 2px 2px #000);
           transform: translateZ(-20px) scale(1);
       }
       .fa-microphone-alt {
           font-size: 1.3rem;
       }
       .fa-magnifying-glass {
           font-size: 1.3rem;
       }
       .Scroll-down {
           height: 10px;
           width: 10px;
           top: 20rem;
        left: 50%;
       transform: translate(-50%, 0) translateZ(-50px) scale(1);
       }
       .Scroll-down i {
           color: #fff;
       }
       #subtitle {
           font-size: 0.9rem;
           position: absolute;
           top: 36rem; 
       }
       .scrollable-tabs-container {
        font-family: "Roboto", sans-serif;
        background: #000;
        max-width: 500px;
        margin: 16px auto;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
      }
    #search-formQuery {
        display: inline-block;
        position: relative;
        left: -50px;
        width: 50%;
    }
       #search-inputQuery {
        width: 300px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 10px;
        outline: none;
    }
    #search-formQuery button {
        position: absolute;
        left: 270px;
        top: 7px;
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }
}