.week-11,
.week-11 * {
  box-sizing: border-box;
}
.week-11 {
  background: #ffffff;
  height: 7480px;
  position: relative;
  overflow: hidden;
}
._11-interface-application-programming {
  color: #1c25ac;
  text-align: left;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 75px;
  font-weight: 700;
  position: absolute;
  left: 57px;
  top: 216px;
  width: 1632px;
  height: 98px;
}
.line-4 {
  margin-top: -3px;
  border-style: solid;
  border-color: #121212;
  border-width: 3px 0 0 0;
  width: 1609.02px;
  height: 0px;
  position: absolute;
  left: 1689px;
  top: 187px;
  transform-origin: 0 0;
  transform: rotate(-179.751deg) scale(1, 1);
}
.softwares-p-5-js {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 35px;
  font-weight: 500;
  position: absolute;
  left: 57px;
  top: 415px;
  width: 647px;
  height: 58px;
}
.iconstack-io-home-3-fill {
  width: 129px;
  height: 129px;
  position: absolute;
  left: 58px;
  top: 32px;
  overflow: hidden;
}
.group {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.screenshot-2025-12-18-at-7-42-59-am-1 {
  width: 974px;
  height: 1729px;
  position: absolute;
  left: 78px;
  top: 2735px;
  object-fit: cover;
  aspect-ratio: 974/1729;
}
.this-week-i-worked-on-revamping-a-previous-p-5-js-weather-app-project-that-i-did-last-year-in-the-original-app-it-would-pull-the-daily-weather-from-a-weather-api-with-a-command-called-request-weather-x-y-display-a-cartoon-version-of-myself-the-temperature-and-wind-speed-with-the-hair-moving-and-blowing-in-the-wind-at-varying-rates-dependent-on-the-wind-speed {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Thin", sans-serif;
  font-size: 35px;
  line-height: 35px;
  font-weight: 100;
  position: absolute;
  left: 80px;
  top: 701px;
  width: 736px;
  height: 307px;
}
.for-the-next-version-i-wanted-to-include-more-information-such-as-the-daily-temperature-and-something-that-could-indicate-what-type-of-outfit-to-wear-to-not-be-too-cold-or-hot {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Thin", sans-serif;
  font-size: 35px;
  line-height: 35px;
  font-weight: 100;
  position: absolute;
  left: 80px;
  top: 1043px;
  width: 736px;
  height: 211px;
}
.the-main-updates-i-made-was-adding-the-temperature-bars-which-with-the-class-s-repository-was-easy-to-create-and-the-outfit-of-the-day-bottom-portion-to-create-the-outfit-of-the-day-portion-i-modeled-the-outfits-on-illustrator-and-saved-them-as-images-that-would-appear-at-a-specific-temperature-ranges-based-on-what-ranges-people-preferred-online-most-information-was-garnered-from-international-debates-on-reddit-threads-i-also-used-the-map-function-to-vary-the-color-of-the-background-by-the-cloud-coverage-of-the-day-to-reveal-more-weather-information {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Thin", sans-serif;
  font-size: 35px;
  line-height: 35px;
  font-weight: 100;
  position: absolute;
  left: 77px;
  top: 1807px;
  width: 736px;
  height: 573px;
}
.screenshot-2025-12-18-at-7-48-13-am-1 {
  width: 602px;
  height: 1060px;
  position: absolute;
  left: 949px;
  top: 369px;
  object-fit: cover;
  aspect-ratio: 602/1060;
}
.this-will-store-all-the-weather-data-let-w-let-clear-sky-098-fe-8-let-overcast-sky-bad-1-e-3-let-backgroundcolor-let-layer-images-made-in-illustrator-let-clotheslayer-1-let-clotheslayer-2-let-clotheslayer-3-let-clotheslayer-4-let-clothes-function-load-clotheslayer-1-load-image-warmweatherclothes-png-clotheslayer-2-load-image-midweatherclothes-png-clotheslayer-3-load-image-chillyweatherclothes-png-clotheslayer-4-load-image-winterweatherclothes-png-function-setup-size-375-667-w-request-weather-42-36031-71-09414-w-request-weather-30-2672-97-7431-function-draw-fill-black-no-stroke-text-align-center-text-size-14-if-w-ready-let-cloudpercent-w-get-cloud-cover-let-currentemp-w-get-temperature-backgroundcolor-lerp-color-clear-sky-overcast-sky-cloudpercent-clear-backgroundcolor-draw-weather-else-if-the-forecast-isn-t-ready-yet-show-a-message-at-the-bottom-of-the-screen-draw-message-loading-show-a-message-at-the-bottom-of-the-screen-function-draw-message-what-text-what-width-2-20-function-draw-weather-when-was-this-forecast-updated-let-forecast-time-w-get-time-fill-white-show-the-time-at-the-bottom-of-the-screen-draw-message-forecast-time-hour-minute-long-fashion-advice-draw-the-chart-of-temperatures-draw-temperatures-let-windspeed-w-get-wind-speed-stop-animating-if-windspeed-0-let-direction-w-get-wind-direction-let-direction-50-let-direction-0-push-scale-6-translate-105-60-half-of-200-x-300-and-negative-so-it-will-center-everything-at-0-0-your-drawing-commands-push-translate-width-2-150-rect-mode-center-let-amount-5-let-speed-0-15-let-sway-amount-sin-frame-count-speed-rotate-radians-direction-sway-draw-hair-draw-wind-blowing-pop-draw-head-pop-rect-width-2-500-300-100-text-size-30-fill-white-get-the-temperature-round-it-and-add-the-degree-symbol-let-readout-format-degrees-w-get-temperature-show-the-temperature-in-degrees-text-readout-format-text-w-get-condition-text-width-2-235-text-size-17-text-nfd-windspeed-1-mph-width-2-255-draw-message-forecast-time-hour-minute-long-function-draw-temperatures-let-temps-w-get-temperature-hours-provides-hours-for-the-next-10-days-let-times-w-get-time-hours-const-count-24-we-ll-use-24-hours-const-start-w-nearest-offset-hours-find-the-nearest-hour-temps-temps-slice-start-start-count-grab-the-next-24-temperatures-times-times-slice-start-start-count-and-the-times-for-those-temps-stroke-white-stroke-weight-8-stroke-cap-square-fill-black-text-size-12-text-jacket-needed-300-440-fill-white-text-jacket-not-needed-300-455-fill-21508-f-let-min-temp-min-temps-let-max-temp-max-temps-subtract-10-so-that-the-lowest-number-isn-t-zero-let-low-temp-round-down-min-temp-10-let-high-temp-round-up-max-temp-let-chart-left-40-let-chart-right-width-chart-left-let-chart-top-260-let-chart-bottom-370-for-let-i-0-i-count-i-let-x-remap-i-0-count-1-chart-left-chart-right-let-y-remap-temps-i-low-temp-high-temp-chart-bottom-chart-top-if-temps-i-50-stroke-21508-f-line-x-y-x-chart-bottom-no-stroke-rect-mode-center-rect-mode-corner-fill-white-no-stroke-rect-20-375-335-2-no-stroke-draw-the-hour-for-every-third-hour-if-i-3-0-text-times-i-hour-short-x-chart-bottom-20-if-this-is-the-min-or-max-temp-draw-it-if-temps-i-min-temp-temps-i-max-temp-text-format-degrees-temps-i-x-y-12 {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Thin", sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-weight: 100;
  position: absolute;
  left: 1095px;
  top: 2737px;
  width: 286px;
  height: 2113px;
}
.round-down-by-10-s-e-g-anything-from-31-through-39-becomes-30-function-round-down-value-var-r-value-10-return-value-r-round-a-number-up-to-the-next-10-e-g-anything-from-61-to-69-becomes-70-function-round-up-value-var-r-value-10-return-value-10-r-round-the-number-and-add-the-degree-symbol-to-the-end-function-format-degrees-amount-the-degree-symbol-or-u-00-b-0-return-round-amount-take-a-number-from-0-1-and-format-it-as-a-percentage-no-decimal-points-function-format-percent-amount-return-round-amount-100-function-format-text-text-return-text-to-upper-case-function-fashion-advice-no-stroke-fill-255-255-255-3-circle-width-2-673-550-fill-255-255-255-4-circle-width-2-685-550-fill-255-255-255-5-circle-width-2-700-550-no-stroke-text-size-24-fill-0-0-0-8-text-outfit-of-the-day-width-2-585-let-current-temp-w-get-temperature-let-current-temp-w-get-temperature-text-current-temp-width-2-300-let-current-temp-70-if-current-temp-67-layer-1-if-50-current-temp-current-temp-67-layer-2-if-40-current-temp-current-temp-50-layer-3-if-current-temp-40-layer-4-draw-clothes-layer-text-size-18-fill-0-0-0-6-text-layers-layer-width-2-610-let-umbrella-chance-w-get-precipitation-intensity-let-umbrella-chance-2-if-umbrella-chance-0-0984252-text-size-18-text-umblrella-yes-width-2-630-else-text-size-18-text-umbrella-n-0-width-2-630-function-draw-clothes-layer-push-text-size-14-translate-width-2-650-if-layer-1-clothes-clotheslayer-1-clothing-items-clothes-text-it-s-warm-wear-a-t-shirt-tank-top-or-dress-0-0-if-layer-2-clothes-clotheslayer-2-clothing-items-clothes-text-it-s-mid-try-wearing-long-sleeves-or-layering-lightly-0-0-if-layer-3-clothes-clotheslayer-3-clothing-items-clothes-text-it-s-chilly-bring-a-jacket-or-wear-a-sweater-0-0-if-layer-4-clothes-clotheslayer-4-clothing-items-clothes-text-it-s-cold-bring-a-winter-jacket-or-dont-go-outside-0-0-pop-function-clothing-items-image-clothes-0-150-300-100-rect-width-2-500-300-100-function-draw-head-push-translate-width-2-150-rect-mode-center-fill-ba-7-d-4-a-round-rect-0-0-200-170-70-70-70-70-no-stroke-fill-ba-7-d-4-a-circle-100-0-40-circle-100-0-40-triangle-5-84-5-84-0-110-fill-gray-100-ellipse-75-5-10-20-ellipse-75-5-10-20-pop-function-draw-hair-fill-21508-f-round-rect-0-0-300-270-150-150-0-0-rect-mode-center {
  color: #000000;
  text-align: left;
  font-family: "HelveticaNeue-Thin", sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-weight: 100;
  position: absolute;
  left: 1393px;
  top: 2727px;
  width: 231px;
  height: 3741px;
}
.final-version-code {
  color: #1c25ac;
  text-align: left;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 60px;
  font-weight: 700;
  position: absolute;
  left: 78px;
  top: 2587px;
  width: 966px;
  height: 75px;
}
.video {
  color: #1c25ac;
  text-align: left;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 60px;
  font-weight: 700;
  position: absolute;
  left: 110px;
  top: 4987px;
  width: 966px;
  height: 75px;
}
.screen-recording-2025-12-18-at-7-45-00-am-1 {
  width: 1235px;
  height: 2182px;
  position: absolute;
  left: 246px;
  top: 5144px;
  aspect-ratio: 1235/2182;
}
.chillyweatherclothes-1 {
  width: 649px;
  height: 227px;
  position: absolute;
  left: 910px;
  top: 2089px;
  object-fit: cover;
  aspect-ratio: 649/227;
}
.midweatherclothes-1 {
  width: 685px;
  height: 204px;
  position: absolute;
  left: 891px;
  top: 1865px;
  object-fit: cover;
  aspect-ratio: 685/204;
}
.warmweatherclothes-1 {
  width: 644px;
  height: 248px;
  position: absolute;
  left: 889px;
  top: 1590px;
  object-fit: cover;
  aspect-ratio: 644/248;
}
.winterweatherclothes-1 {
  width: 745px;
  height: 226px;
  position: absolute;
  left: 879px;
  top: 2340px;
  object-fit: cover;
  aspect-ratio: 745/226;
}
.nav-bar {
  background: #ffffff;
  width: 1446px;
  height: 123px;
  position: absolute;
  left: 240px;
  top: 44px;
  overflow-x: auto;
}
.rectangle-22 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 97px;
  position: absolute;
  left: 27px;
  top: 13px;
}
.rectangle-23 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 97px;
  position: absolute;
  left: 226px;
  top: 13px;
}
.rectangle-24 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 97px;
  position: absolute;
  left: 425px;
  top: 13px;
}
.rectangle-25 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 624px;
  top: 15px;
}
._00 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 90px;
  top: 32px;
}
._01 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 289px;
  top: 32px;
}
._02 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 488px;
  top: 32px;
}
._03 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 687px;
  top: 32px;
}
.rectangle-26 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 823px;
  top: 13px;
}
._04 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 886px;
  top: 30px;
}
.rectangle-27 {
  background: #1c25ac;
  border-radius: 52px;
  border-style: solid;
  border-color: #1c25ac;
  border-width: 5px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 1022px;
  top: 13px;
}
._05 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 1085px;
  top: 30px;
}
.rectangle-28 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 1221px;
  top: 13px;
}
._06 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 1284px;
  top: 30px;
}
.rectangle-29 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 1420px;
  top: 13px;
}
._07 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 1483px;
  top: 30px;
}
.rectangle-30 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 1619px;
  top: 13px;
}
._08 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 1682px;
  top: 30px;
}
.rectangle-31 {
  background: #1c25ac;
  border-radius: 52px;
  border-style: solid;
  border-color: #1c25ac;
  border-width: 5px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 1818px;
  top: 13px;
}
._09 {
  color: #f7f8ff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 1881px;
  top: 30px;
}
.rectangle-32 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 2017px;
  top: 14px;
}
._10 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 2080px;
  top: 31px;
}
.rectangle-33 {
  background: #e6bb12;
  border-radius: 52px;
  border-style: solid;
  border-color: #1c25ac;
  border-width: 10px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 2216px;
  top: 14px;
}
._11 {
  color: #1c25ac;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 2279px;
  top: 31px;
}
.rectangle-34 {
  background: #1c25ac;
  border-radius: 52px;
  width: 181px;
  height: 95px;
  position: absolute;
  left: 2415px;
  top: 14px;
}
._12 {
  color: #ffffff;
  text-align: center;
  font-family: "HelveticaNeue-Bold", sans-serif;
  font-size: 50px;
  font-weight: 700;
  position: absolute;
  left: 2478px;
  top: 31px;
}