.cww{ border-radius: 30px;background-size: cover;background-repeat: no-repeat;background-position: center;overflow: hidden;backdrop-filter: blur(2px);color: white;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);max-width: 900px;margin: auto;width: auto;height: auto}.cww.clear{ clear: none;visibility: visible}.cww.clouds.day, .cww.mist.day{ background-image: url(../img/weather/bg/cloudy-day.webp)}.cww.clouds.partly-cloudy.day{ background-image: url(../img/weather/bg/partly-cloudy-day.webp)}.cww.clear.day{ background-image: url(../img/weather/bg/clear-day.webp)}.cww.snow.day{ background-image: url(../img/weather/bg/snow-day.webp)}.cww.clouds.night, .cww.mist.night{ background-image: url(../img/weather/bg/cloudy-night.webp)}.cww.clouds.partly-cloudy.night{ background-image: url(../img/weather/bg/partly-cloudy-night.webp)}.cww.clear.night{ background-image: url(../img/weather/bg/clear-night.webp)}.cww.snow.night{ background-image: url(../img/weather/bg/snow-night.webp)}.cww.rain, .cww.drizzle{ background-image: url(../img/weather/bg/rain.webp)}.cww.smoke, .cww.haze, .cww.dust, .cww.fog, .cww.sand, .cww.ash{ background-image: url(../img/weather/bg/smoke.webp)}.cww.thunderstorm{ background-image: url(../img/weather/bg/thunderstorm.webp)}.cww.day .primary-grid, .cww.mist .primary-grid, .cww.overcast .primary-grid{ background: linear-gradient(to right, #39317dc2, #4b438c57)}.cww.night .primary-grid, .cww.rain .primary-grid{ background: linear-gradient(to right, #233272c2, #312d5557)}.cww.clouds.partly-cloudy.day .primary-grid, .cww.clear.day .primary-grid{ background: linear-gradient(to right, #41609dc2, #4b438c57)}.cww.thunderstorm.day{ background: linear-gradient(to right, #231c60c2, #5f5d7587)}.cww.thunderstorm.night{ background: linear-gradient(to right, #1a2452c2, #37354aa1)}.cww .primary-grid{ display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "top top" "left right";grid-gap: 20px 40px;background: #ffffff4f;backdrop-filter: blur(1px)}.cww .top{ display: grid;grid-template-columns: 1fr max-content;grid-gap: 10px;grid-area: top;padding: 20px 40px;background: #00000036;backdrop-filter: blur(8px);text-align: left}.cww .top h2{ margin: 0;font-size: 24px;font-weight: 600}.cww p{ margin: 0}.cww .label{ font-weight: 500}.cww .top p.date{ font-size: 14px}.cww .top p.date .current-time{ display: none}.cww .top .time{ align-self: center}.cww .top .time p{ text-align: right;font-weight: 500}.cww .top .time .last-updated{ font-size: 11px}.cww .left{ display: grid;grid-template-columns: 1.5fr 1fr;grid-template-rows: 1fr 1fr;grid-gap: 10px;grid-template-areas: "primary icon" "primary wind";grid-area: left;align-items: center;justify-items: center;padding: 0 0 20px 20px}:root{ --circle-size: 200px;--tiny-box: 80px}.cww .circle-area{ width: var(--circle-size);height: var(--circle-size);display: grid;grid-template-rows: 2fr 1fr 2fr;grid-gap: 16px;text-align: center;grid-area: primary}.cww .circle.primary{ grid-row: 1/4}.cww .circle{ height: 100%;width: 100%;grid-column: 1;z-index: 1;display: grid;grid-template-areas: "circle";justify-items: center;align-items: center}.cww .circle .central-item{ grid-area: circle;border-radius: 100px}.cww .circle .outer{ border: 10px solid;width: 100%;height: 100%;background: #0000000f;backdrop-filter: blur(1px)}.cww .circle.wind .outer{ border: 4px solid}.cww .circle-area .high-low{ grid-column: 1;grid-row: 1;z-index: 2;display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 5px;align-self: end}.cww .circle-area .high-low .high{ text-align: right}.cww .circle-area .high-low .low{ text-align: left}.cww .circle-area .small-temp .label{ font-size: 12px}.cww .circle-area .main-temp{ grid-column: 1;grid-row: 2;z-index: 2;align-self: center}.cww .circle-area .main-temp .temperature{ line-height: 0.7;display: grid;grid-template-columns: repeat(2, auto);font-weight: bold;padding-left: 10px}.cww .circle-area .main-temp .temperature .num{ justify-self: end;font-size: 70px}.cww .circle-area .main-temp .temperature .deg{ justify-self: start}.cww .circle-area .feels-like{ grid-column: 1;grid-row: 3;z-index: 2;align-self: start}.cww .circle-area .small-temp{ font-size: 15px}.cww .circle-area .small-temp .temperature{ font-weight: 400}.cww .weather-icon{ grid-area: icon}.cww .tiny-grid{ text-align: center;display: grid}.cww .tiny-grid .label{ display: block}.cww .weather-icon .image{ height: var(--tiny-box);width: var(--tiny-box);display: grid;align-items: center;margin: auto}.cww .weather-icon .image img{ max-height: var(--tiny-box);margin: auto}.cww .wind-info{ grid-area: wind}.cww .wind-info .tiny-grid{ display: grid;grid-template-rows: var(--tiny-box) 1fr;grid-template-areas: "circle" "mph"}.cww .wind-info .circle{ width: var(--tiny-box);grid-area: circle}.cww .wind-compass{ grid-area: circle;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);grid-template-areas: ". n ." "w arrow e" ". s .";z-index: 2;padding: 6px;background-image: url(../img/weather/bg/compass-letters.webp);background-size: 90%;background-position: center}.cww .wind-compass .direction{ font-size: 10px;font-weight: 500;justify-self: center;align-self: center}.cww .wind-compass .north{grid-area: n}.cww .wind-compass .south{grid-area: s}.cww .wind-compass .east{grid-area: e}.cww .wind-compass .west{grid-area: w}.cww .wind-compass .arrow{ grid-area: arrow;align-self: center;justify-self: center}.cww .wind-compass .arrow img{ width: 18px;display: block}.cww .wind-speed{ grid-area: mph}.cww .right{ grid-area: right;padding: 0 20px 20px 0}.cww .details-table{margin: 0}.cww .details-table .item{ display: grid;grid-template-columns: 1fr 1fr;padding: 5px 14px;backdrop-filter: blur(8px);border-radius: 16px;overflow: hidden;margin: 0 0 10px;background: #ffffff33;background: #00000036;font-size: 16px}.cww .details-table .item-name{ display: grid;grid-template-columns: 20px auto;align-items: center;grid-gap: 5px;width: 100%}.cww .details-table .item-name .label{ display: block;text-align: left}.cww .details-table .item-name img{ display: block;margin: auto;max-height: 18px}.cww .details-table .item-val{ text-align: right}.cww .details-table p{ margin: 0}@media screen and (min-width: 800px){ .cww .location.has-both .state.abbr{display: none}}@media screen and (max-width: 800px){ .cww .location.has-both .state.full{display: none}.cww .primary-grid{grid-gap: 20px}.cww .tiny-grid .label{font-size: 14px}}@media screen and (max-width: 600px){ .cww{ margin: 0 -20px;border-radius: 0;box-shadow: none}.cww .primary-grid{ grid-template-columns: 1fr;grid-gap: 0;grid-template-areas: "top" "left" "right"}.cww .top{ grid-template-columns: 1fr;padding: 20px;margin: 0 0 5px}.cww .left{padding: 0 10px}.cww .right{padding: 10px}.cww .top p.date .current-time{display: inline}.cww .top .time{display: none}}