.app{text-align:center;background-color:#f0f0f5;color:#333;height:100%}.card{background:#e5f2ffb3;border-radius:12px;padding:5px 16px 0;margin-top:1px;box-shadow:0 2px 10px #0000001a}.read-the-docs{color:#888;margin-top:16px}.header{height:50%;display:flex;flex-direction:column;justify-content:start;align-items:flex-start;background-size:cover;background-position:center;color:#fff;border-bottom:1px solid #ccc;box-sizing:border-box;border-radius:15px;box-shadow:0 3px 3px #0000001a;cursor:pointer;transition:height .5s ease,font-size .5s ease}.header.expanded{height:100%;border-radius:0}.cityTemp{background:#000c;padding:30px 0 0;justify-content:center;align-items:center;text-align:center;width:100%;height:40%}.fadeDiv{justify-content:center;align-items:center;text-align:center;width:100%;height:30px;background:linear-gradient(to bottom,#000c,#0000)}.current-weather{font-size:25px;margin:15px 0 20px}.forecast{display:flex;flex-direction:column;align-items:center;margin-top:0;width:100%}.forecast-day{display:flex;justify-content:space-between;align-items:center;background-color:#b6dffccc;border-radius:10px;padding:0 5px;width:100%;margin-bottom:5px}.day-name{flex:1;font-weight:700}.forecast-details{display:flex;align-items:center}.forecast-details p{margin:0 5px}.temp-separator{margin:0 5px;color:#888}.forecast-details svg{margin-right:10px}.iphone{width:390px;height:844px;border-radius:40px;border:16px solid black;background-color:#fff;position:relative;margin:40px auto;box-shadow:0 10px 30px #0000001a;z-index:10}.screen-wrapper{position:relative;width:100%;height:100%;overflow:hidden}.notch{z-index:11;position:absolute;top:0;left:50%;transform:translate(-50%);width:210px;height:30px;background-color:#000;border-bottom-left-radius:15px;border-bottom-right-radius:15px;display:flex;justify-content:center;align-items:center}.notch-camera{z-index:12;width:10px;height:10px;background-color:#333;border-radius:50%;margin-right:10px}.notch-speaker{z-index:13;width:60px;height:5px;background-color:#555;border-radius:5px}.iphone-screen{width:100%;height:100%;padding:0;overflow:hidden;border-radius:20px;overflow-y:scroll}.iphone-screen-footer{position:relative;width:100%;height:calc(100% - 50px);padding:0;overflow:hidden;border-radius:20px;overflow-y:scroll}.iphone-footer{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:90%;background-color:#d3d3d3;display:flex;justify-content:center;padding:10px;border-radius:20px}.footer-dot{width:15px;height:15px;margin:0 10px;border-radius:50%;background-color:#2296f3;cursor:pointer;transition:background-color .3s}.footer-dot.active{background-color:#fff}.hourly-forecast{display:flex;overflow-x:auto;padding:10px 0;gap:10px;margin:0 10px}.hourly-item{background-color:#b6dffccc;border-radius:8px;padding:10px;min-width:60px;text-align:center;box-shadow:0 2px 5px #0000001a}.hourly-item p{margin:5px 0}.icon-container{font-size:20px;margin:5px 0}body{margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#e6e6e6;font-family:Roboto,sans-serif}#root{width:100%}