@font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  }
@font-face {
    font-family: Banner Sans;
    font-style: normal;
    font-weight: 400;
    src: url("assets/css/Banner.ttf");
  }
  @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');


  input{
       font-family: 'Product Sans';

  }
  .searchBtn{
     font-family: 'Product Sans';
  }

/*========== Variables Dark theme ==========*/
/* body {
    padding: 25px;
    background-color: white;
    color: black;
    font-size: 25px;
  }
  .dark-mode {
    background-color:black;
    color: white;
  }
  
  /*========== Button Dark/Light ==========*/
/*  .change-theme{
    position: absolute;
    right: 1rem;
    top: 1.8rem;
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
  } */

  .query{
    padding-left: 25px;

  }

  @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  max-width: 1920px;
  padding: 2rem;
  display: grid;
  place-items: center;

}

.query{
    color: #fff;
  padding: 20px;
  height: auto;
  width: 400px;
  margin: 0 auto;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/800px-Google_%22G%22_Logo.svg.png") no-repeat left;
  background-size: 20px;
  background-position-x: 5px;
  padding-left: 34px;
  border-radius: 10px;
  border-top: 1px solid rgba(225, 225, 225, 0.4);
  border-left: 1px solid rgba(225, 225, 225, 0.2);
  border-right: thin solid rgba(225, 225, 225, 0.3);
  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0px 28px 48px rgba(0, 0, 0, 0.1);
  place-content: center;
}
.searchBtn{
  color: #fff;
  padding: 20px;
  height: auto;
  margin: 0 auto;
background: rgba(83, 83, 83, 0.292);
  border-radius: 10px;
  border-top: 1px solid rgba(225, 225, 225, 0.4);
  border-left: 1px solid rgba(225, 225, 225, 0.2);
  border-right: thin solid rgba(225, 225, 225, 0.3);
  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0px 28px 48px rgba(0, 0, 0, 0.1);
  place-content: center;
}
#search{
  color: #fff;
  padding: 20px;
  height: auto;
  margin: 0 auto;
background: rgba(83, 83, 83, 0.292);
  border-radius: 10px;
  border-top: 1px solid rgba(225, 225, 225, 0.4);
  border-left: 1px solid rgba(225, 225, 225, 0.2);
  border-right: thin solid rgba(225, 225, 225, 0.3);
  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0px 28px 48px rgba(0, 0, 0, 0.1);
  place-content: center;
}

#voice{
  color: #fff;
  padding: 20px;
  height: auto;
  margin: 0 auto;
background: rgba(83, 83, 83, 0.292);
  border-radius: 10px;
  border-top: 1px solid rgba(225, 225, 225, 0.4);
  border-left: 1px solid rgba(225, 225, 225, 0.2);
  border-right: thin solid rgba(225, 225, 225, 0.3);
  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0px 28px 48px rgba(0, 0, 0, 0.1);
  place-content: center;
  
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
body{
  background: url('https://picsum.photos/200/600?random=2');
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body{
  background: url('https://source.unsplash.com/random/2400×3500/?science,astronomy,education,physics,nasa,space,fruits,food,college');
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}