@import"https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:poppins}.flex{display:flex;overflow:hidden}#main{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;gap:100px}.searchBar{margin-inline:auto;margin-top:50px}.searchBar input{padding:10px;background-color:#edededcc;border:none;width:300px;height:50px;color:#000;border-radius:30px;text-align:center}.searchBar input:focus{outline:none}.searchBar button{margin-left:20px;padding:10px;cursor:pointer;background-color:#ededed;border:none;width:50px;height:50px;border-radius:50%}.content{width:70vw;height:70%;padding:10px 200px;flex-direction:column;align-items:center;gap:20px}.tempandCity{height:120px;flex-direction:row;width:600px;align-items:flex-start;justify-content:space-evenly;padding:20px;background-color:#ededed33;border-radius:30px}.tempandCity h1{font-size:2.3rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.temp,.city{display:flex;flex-direction:column;align-items:flex-start}.tempandCity p{font-size:1.3rem;font-weight:500;margin-left:5px}.details{height:120px;flex-direction:row;width:600px;background-color:#ededed33;border-radius:30px;align-items:center;justify-content:center;gap:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.details p{font-size:1.5rem;position:relative;display:flex;align-items:center;justify-content:center}.degree{position:absolute;width:5px;height:5px;border-radius:50%;top:4px;right:15px;background-color:#000000e6}.sun{padding:20px;gap:20px}.sunrise,.sunset{width:150px;background-color:#ededed3b;padding:10px;border-radius:5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 576px){#main{gap:30px}.searchBar{display:flex;align-items:center;gap:20px;flex-direction:column}.searchBar button{margin-left:0}.content{margin-top:20px}.tempandCity{height:100px;width:300px;padding:15px;border-radius:5px}.tempandCity h1{font-size:1.9rem}.tempandCity p{font-size:1.1rem}.details{height:100px;width:300px;border-radius:5px;gap:10px}.details p{font-size:1.2rem}.details span{font-size:.7rem}.degree{display:none}.sun{padding:5px}.sunrise,.sunset{width:120px}}