*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{color:#fff;background:#181818;width:100%;min-height:100vh;margin:0;font-family:brandon-grotesque,sans-serif;font-weight:700;display:flex}#root,.flex{flex-direction:row;width:100%;min-height:100vh;display:flex}h2{text-align:center;margin:0}ul{margin:0;padding:0;list-style-type:none}li{list-style-type:none}.col{flex-direction:column;flex-grow:1;justify-content:space-between;padding:5px;display:flex}.center{text-align:center;justify-content:center;align-items:center;display:flex}.full-size{width:100%;height:100%}.temperature{text-align:right;cursor:pointer;padding:0 4vw}.temperature span{font-size:20vmin}.forecast ul{flex-direction:row;display:flex}.forecast .col{width:25%}.tempbox-area{position:relative}.area{cursor:pointer;background:#333;border-radius:3px;flex-direction:column;justify-content:space-around;height:100%;padding:7px;display:flex}.area .location{font-size:5vmin}.area .temp{padding-left:4px;font-size:12vmin}.stale{color:#f0506e}#battery-notice{z-index:1;color:#fff;background:#2e1c21;border:1px solid #f0506e99;border-radius:999px;align-items:center;gap:.6em;padding:.4em .9em;font-size:2.6vmin;font-weight:400;display:flex;position:fixed}.battery-notice-icon{border:2px solid #f0506e;border-radius:2px;width:1.6em;height:.85em;position:relative}.battery-notice-icon:before{content:"";background:#f0506e;width:20%;position:absolute;top:1px;bottom:1px;left:1px}.battery-notice-icon:after{content:"";background:#f0506e;border-radius:0 1px 1px 0;width:3px;height:45%;position:absolute;top:50%;right:-5px;transform:translateY(-50%)}.battery-indicator{border-radius:50%;width:10px;height:10px;position:absolute;top:5px;right:5px}.battery-indicator.yellow{background:#fba85a}.battery-indicator.red{background:#f0506e}.temp-chart{flex-direction:column;justify-content:flex-start;width:100%;height:100%;padding:0 10px;display:flex}.temp-chart .row{flex-direction:column;flex-grow:1;flex-basis:0;justify-content:center;min-height:30%;padding:30px 0;display:flex}.temp-chart .row h2{margin:0;font-size:1.2rem}.temp-chart .back-button{flex:0 0 10%;align-self:flex-end}.icon{flex-grow:2;width:100%;padding:0 5%}.icon img{width:100%;height:100%}.red{background:#f0506e}.yellow{background:#fba85a}.error{color:#f0506e}form{flex-direction:column;justify-content:center;width:250px;display:flex}form p{text-align:center}input{vertical-align:middle;color:#333;background:#fff;border:none;height:55px;margin-top:10px;padding:0 10px;font-size:1.25rem;display:inline-block}input::placeholder{color:#999}button{color:#fff;vertical-align:middle;text-align:center;text-transform:uppercase;cursor:pointer;background-color:#444;border:none;margin-top:30px;font-family:brandon-grotesque,sans-serif;font-size:1rem;line-height:53px;text-decoration:none;overflow:visible}.settings{flex-direction:column;justify-content:center;align-items:center;display:flex}ul.tagorder li{border-bottom:1px solid #333;transition:background-color .2s,transform .2s}ul.tagorder li:hover{cursor:grab;background:#444}ul.tagorder li:active{cursor:grabbing;background:#666;transform:scale(1.05)}li{justify-content:space-between;width:250px;height:45px;line-height:45px;display:flex}#settings{position:fixed;bottom:15px;left:20px}#settings a{color:#fff;text-transform:uppercase;cursor:pointer;font-size:4vmin;font-weight:400;text-decoration:none}#lastupdated{color:#fff;font-size:3vmin;font-weight:400;text-decoration:none;position:fixed}@media screen and (orientation:landscape){.flex{flex-direction:row}.column-left{flex-direction:column;justify-content:center;width:50vw;display:flex}.column-right{flex-direction:column;width:50vw;display:flex}.column-right-top{height:40vh}.column-right-middle{height:30vh}.column-right-bottom{flex-direction:row;height:30vh;padding:5px;display:flex}.column-right-bottom.grid{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;display:grid}.column-right-bottom.grid .col{min-height:0}.column-right-bottom.grid .area{flex-direction:row;justify-content:space-between;align-items:center;padding:0 2.5vmin}.column-right-bottom.grid .area .location{text-align:left;justify-content:flex-start;font-size:3.6vmin}.column-right-bottom.grid .area .temp{font-size:8vmin}.currenttime{flex-direction:column;flex-grow:1;padding:0 20px;font-size:10vmin;display:flex}.currenttime .date{font-size:5vmin}.forecast{font-size:4vmin}.forecast .temp{padding-left:2px;font-size:6vmin}.forecast .time{font-size:3vmin}#lastupdated{bottom:15px;left:20px}#battery-notice{bottom:calc(15px + 5vmin);left:20px}}@media screen and (orientation:portrait){.flex{flex-direction:column}.portrait-top{flex-direction:row;justify-content:space-between;display:flex}.portrait-top .portrait-top-left{width:67vw}.portrait-middle{padding:0 0 30px}.portrait-bottom{flex-direction:row;min-height:100px;display:flex}.icon{padding:0 5%}.forecast{width:100%;font-size:4vmin;overflow-x:auto}.forecast .temp{padding-left:2px;font-size:7vmin}.forecast .time{margin-top:5px}.area .temp{font-size:10vmin}.currenttime{padding:10px 20px;font-size:6vmin}.currenttime .time{display:none}#lastupdated{bottom:15px;right:20px}#battery-notice{white-space:nowrap;top:15px;left:50%;transform:translate(-50%)}}@media only screen and (width<=500px) and (height<=320px){body,#root,.flex{width:320px!important}.column-left{min-width:150px}.currenttime .time{font-size:15vmin}.currenttime .date{font-size:9vmin}.forecast .col{padding:0 3px}.forecast .col .icon{padding:0}.forecast .temp{font-size:7vmin}#lastupdated{bottom:5px;left:5px}}