:root{--primary-blue: rgb(0, 34, 51);--secondary-blue: rgb(179, 229, 255);--secondary-blue-light: rgb(153, 204, 230);--secondary-blue-dark: rgb(133, 194, 224);--tertiary-blue: hsl(200, 100%, 20%)}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--secondary-blue);color:var(--primary-blue);font-family:Roboto,Arial,Helvetica,sans-serif;font-weight:400}.blur{filter:blur(4px)}.headline{font-size:36px;padding-top:40px;margin-bottom:12px;text-align:center}.container{padding-left:16px;padding-right:16px}.page-section{padding:24px 0}.header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.header-left{display:flex;justify-content:center;align-items:center;gap:12px}.header-current-temp{font-size:32px;margin-left:8px}.header-right{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:480px}.label{margin-bottom:4px;font-size:20px;font-weight:500}.label+div{font-size:18px}.weather-icon{width:40px;height:40px;object-fit:contain}.weather-icon--large{width:80px;height:80px}.arrow ion-icon{position:relative;top:2px;left:-2px;font-size:18px}.daily{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:1280px;margin:0 auto}.daily-card{display:flex;flex-direction:column;align-items:center;border:2px solid var(--primary-blue);border-radius:4px;padding:12px;min-width:110px;min-height:110px}.daily-card__day{font-size:16px;color:var(--tertiary-blue);margin-top:8px}table{width:100%;text-align:center;border-spacing:0}table div.label{font-size:16px}table div.label+div{font-size:14px}.hour-row{width:100%;height:60px;background-color:var(--secondary-blue-light);font-size:14px}.hour-row:nth-child(2n){background-color:var(--secondary-blue-dark)}.hour-row>td{padding:4px 8px}@media screen and (min-width: 768px){.headline{font-size:40px}.header-current-temp{font-size:36px}.weather-icon--large{width:120px;height:120px}.page-section{padding:48px 0}.daily-card{min-width:140px;min-height:140px}.daily-card__day{font-size:18px}.daily-card__day+div>span{font-size:18px}table div.label{font-size:18px}table div.label+div{font-size:16px}.hour-row>td{padding:6px 12px}}@media screen and (min-width: 1024px){.daily-card{flex:1;min-width:120px;min-height:120px}table div.label{font-size:20px}table div.label+div{font-size:18px}}