@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
body{
  min-height: 100vh;
  background-image: linear-gradient(#0D0D0D,#1A1A1A);
 

    width: 100%;
    height: 100%;
    /* background-size: cover; */
    background-position: center center;
     background-repeat: repeat;
    /* background-image: url(magicpattern-grid-pattern-1739392600911.png); */
    background-image: url(Images/magicpattern-grid-pattern-1740587196989.png);
    /* font-family: Poppins,sans-serif; */
    font-family: "HelveticaNeue Medium", "HelveticaNeue-Medium", "Helvetica Neue Medium", sans-serif;

    /* width: 100%;
    height: 100%;
    /* background-size: cover; */
    /* background-position: center center; 
    background-repeat: repeat;
    background-image: url(magicpattern-grid-pattern-1740200732646.png);
    font-family: Poppins,sans-serif;  */ */
    
}

.topbar{
  margin: 0 auto;
  background: rgb(0, 0, 0,0.1);
  border-radius: 150px;
  width: 100vh;
  height: 40px;
  margin-top: -12rem;
  display: flex;
  justify-content: space-between;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 241, 241, 0.244);
  box-shadow: rgba(119, 119, 119, 0.859) 0px 0px 154px 0px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
}
.logo{
  font-weight: bold;
  color: rgb(255, 255, 255);
  font-size: 1.5rem;
  margin-top: 0.2rem;
  padding-left: 20px;
  background: repeating-radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #C4C4C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.buttons1{
  margin-top: 0.4rem;
  margin-right: 20px;
}
.Musicbutton{
  border-radius: 30px;
  color: white;
  background-color: rgba(27, 2, 27, 0.294);
  border: 0.5px solid rgba(255, 241, 241, 0.244);
  box-shadow: rgba(119, 119, 119, 0.792) 0px 0px 154px 0px;
  font-size: 0.7rem;
  padding: 7px;
  padding-left: 15px;
  padding-right: 15px;
}
.Musicbutton:hover{
  cursor: pointer;
  background-color: #291414;

}
.Twitterbutton{
  border-radius: 30px;
  color: white;
  background-color: rgba(31, 3, 123, 0.999);
  border: 0.5px solid rgba(255, 241, 241, 0.244);
  box-shadow: rgba(119, 119, 119, 0.055) 0px 0px 154px 0px;
  font-size: 0.7rem;
  padding: 7px;
  padding-left: 18px;
  padding-right: 18px;
}
.Twitterbutton:hover{
  cursor: pointer;
  background-color: rgba(21, 2, 84, 0.999);;
}
.mainmenu2{
  
}
.circle{
  z-index: -1;
}
.searchcity{
  margin: 0 auto;
  /* background: linear-gradient(330deg,rgba(0,0,0,0.1),rgba(255,255,255,0)); */
  background: #000000;
  /* background-image: image-set(url(https://playota.app/_next/static/media/circleThing.144242df.svg)); */
  border-radius: 27px;
  width: 334px;
  height: 25rem;
  margin-top: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  /* box-shadow: rgba(31, 81, 255, 0.859) 0px 0px 154px 40px; */
  /* box-shadow: 0 0 12px 4px #0036f800; */

}
/* .searchcity::after,.searchcity::before{
  content: '';
  position: absolute;
  background-image: conic-gradient( #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 20px;
} */
.emoji-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -2;
}

.emoji{
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
}
.outerinputbox{
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  /* background: rgb(0, 0, 0); */
}
.border1{
  padding: 1rem;
}
.inputbox{
  
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.textabove{
  padding-top: 0.6rem;
  padding-left: 10%;
  padding-right: 10%;
  /* display: flex; */
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  font-
  /* font-family: Oswald,sans-serif; */
  /* font-family: Poppins,sans-serif; */
  font-family: "HelveticaNeue Medium", "HelveticaNeue-Medium", "Helvetica Neue Medium", sans-serif;
  color: rgb(255, 255, 255);
  /* color: #2971ff; */
  background-image: linear-gradient(blue purple);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imgtext{
  height: auto;
  width: 7rem;
} 
.input1{
  margin-top: 0px;
  display: flex;
  align-items: center;
  align-content: center;
  align-content: center;
  height: 40px;
  width: 200px;
  border-radius: 10px;
  background-color: #7171f4;
  border: none;
  background-color: rgb(32 32 55);
  box-shadow: rgba(31, 31, 105, 0.7) 0px 0px 154px 0px;

  color: white;
}

.Startbutton{
  margin-top: 1rem;
  border-radius: 10px;
  color: white;
  /* background-color: rgba(57, 33, 123, 0.999); */
  background-color: #0047d6;

  border: 0.5px solid rgba(255, 241, 241, 0.244);
  /* box-shadow: rgba(119, 119, 119, 0.355) 0px 0px 154px 10px; */
  box-shadow: 0 0 12px 4px #00000000;
  font-size: 25px;
  /* font-weight: bold; */
  width: 200px;
  height: 40px;
}
.Startbutton:hover{
  background-color: #002f8c;
  cursor: pointer;
}


.Weatherdisplay{
  margin: 0 auto;
  display: none;
  flex-direction: column;
  /* align-items: center; */
  color: white;
  height: 35rem;
  width: 25rem;
  /* background-image: linear-gradient(#020228); */
  background-color: rgb(19 19 32);;
  /* background: #0e1f34; */
  /* background-image: linear-gradient(to bottom, #18181A, #1F1F22); */
  /* background: linear-gradient(195deg,rgba(253,184,255,0.1),rgba(255,255,255,0)); */
  /* background: linear-gradient(180deg, #5A3E85, #8163A8); */
  /* background: rgba(255, 255, 255, 0.1); */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  margin-top: 10rem;
  margin-bottom: 10rem;
  border-radius: 2rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  /* backdrop-filter: blur(10px); */
}
/* .leftcards{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  flex-basis: 50%;
}
.rightcards{
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-basis: 50%;
} */
.topweatherdisplay{
  display: flex;

}
.outer1{
  margin: 0 auto;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue Light", sans-serif;
  font-weight: bold;
}
.cityname{

  display: flex;
  flex-basis: 50%;
  align-items: center;
  text-align: center;
  /* color: rgb(255, 255, 255); */
  /* color: rgb(234 198 198 / 86%); */
  color: rgb(76 212 64 / 86%);
  font-size: 3rem;
  justify-content: center;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue Light", sans-serif;
  font-weight: bold;

  /* letter-spacing: 0.05rem; */
}
.temp{
  font-size: 2rem;
}
.feelslike{
  color: rgba(206, 199, 199, 0.705);
  font-weight: 100;
}
.imageicon{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 1.5rem;
  /* padding-top: 1.5rem; */
  font-size: 5rem;
}
.imgiconweather{
  height: 120px;
  width: auto;
}
.Behindbhopal{
  margin-top: 1.5rem;
  margin-right: 0.5rem;
  font-size: 15px;
}
.Moodbanner{
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: rgb(184, 216, 243);
}
.Mood{
  display: flex;
  justify-content: center;
  text-align: center;
  font-weight: 100;
}
.Quoteouter{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  margin-top: 1rem;
}
.quoteheading{
  /* color: rgb(135, 64, 241); */
  color: rgb(246 189 118);
  font-weight: 900;
  font-size: 2.3rem;
}
.quotecontent{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 200;
  font-size: 1.2rem;
}
.quoteauthor{
  margin-top: 1rem;
  display: flex;
  margin-left: 15rem;
  color: rgba(206, 199, 199, 0.705);
  font-weight: 100;
  font-size: 0.7rem;
}
/* .conditions{
  height: 12rem;
  width: 10rem; */
  /* background: rgba(44, 44, 46, 0.75) */
  /* background-color: #27272b; */
  /* background: linear-gradient(195deg,rgba(8, 8, 8, 0.1),rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  margin-bottom: 5rem;
}
.imginside{
  height: 8rem;
} */
/* .tempcard{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #548af3;
  font-size: 70px;
  margin-top: 4.7rem;
  height: 8rem;
  width: 10rem;
  background: #2971ff;
  border-radius: 16px;
  box-shadow: 0 0 12px 4px #00a6ffb8;
} */



footer{
  margin-top: 28rem;
  width: 100%;
  padding: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: rgba(255, 241, 241, 0.11);
  gap: 2rem;
  /* box-shadow: rgba(143, 153, 165, 0.2) 0px 8px 24px; */
  /* box-shadow: rgba(119, 119, 119, 0.6) 0px 0px 154px 0px; */
  font-size: .875rem;
  color: rgb(100, 100, 142);
  background: linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  background-image: url("Images/abstract-dark-background-with-flowing-colouful-waves.jpg");
}
.footerlogoimg{
  margin-top: 0.5rem;
  align-items: center;
  text-align: center;
  width: 2rem;
  height: auto;
}
.outerlogowrite{
  align-items: center;
  text-align: center;
}
.logowrite{
  align-items: center;
  text-align: center;
  font-weight: bold;
  margin-top: 0.2rem;
  margin-left: 0.5rem;
  color: rgb(255, 255, 255);
  font-size: 2rem;
  background: repeating-radial-gradient(circle farthest-side at center center, #FFFFFF 0%, #C4C4C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.footer-description{
  display: flex;
  align-items: center;
  gap: 5px;
}
.CodeMagico{
  /* font-family: "HelveticaNeue Medium","HelveticaNeue-Medium", "Helvetica Neue Medium", sans-serif; */
  background: linear-gradient(to right, #fff, #0081ff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 600;

  cursor: pointer;
}
.footer-social{
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-weight: 700;
}
.footer-social:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.creator{
font-weight: 400;
  color: white;
}
.github{
  text-decoration: none;
  color: rgb(248, 248, 248);
  font-weight: 600;
}
.github:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.outerfooter1{
display: flex;
}