> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/m20prs/Sky-AI-Forecast/llms.txt
> Use this file to discover all available pages before exploring further.
# Styling
> Customize the background, card layout, typography, buttons, and animations in Sky AI Forecast.
All visual styles live in `style.css`. Edit that file directly to change any of the values described below.
## Background
The `body` uses a white base color with three radial gradients that produce a subtle sky-blue tint in the corners and top center.
```css style.css theme={null}
body {
background-color: #ffffff;
background-image:
radial-gradient(at 0% 0%, hsla(210,100%,98%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(220,100%,97%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(210,100%,98%,1) 0, transparent 50%);
}
```
To change the base color, update `background-color`. To shift the tint, adjust the hue values in the `hsla()` functions. The first argument is the hue (0–360): `210` and `220` are blue tones.
To create a warmer, sunrise-style background, try hues around `30`–`45` (orange/amber) or `270`–`290` (purple/violet).
**Example — soft warm tint:**
```css style.css theme={null}
body {
background-color: #fffdf8;
background-image:
radial-gradient(at 0% 0%, hsla(40,100%,98%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(35,100%,97%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(40,100%,98%,1) 0, transparent 50%);
}
```
## Card / container
The `.container` class controls the white card that centers the app's content.
```css style.css theme={null}
.container {
background: #ffffff;
padding: 3rem;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.02);
border: 1px solid #f0f0f0;
text-align: center;
width: 350px;
}
```
**Make the card wider** — increase `width`:
```css style.css theme={null}
.container {
width: 480px;
}
```
**Add a dark mode variant** — use a `prefers-color-scheme` media query:
```css style.css theme={null}
@media (prefers-color-scheme: dark) {
body {
background-color: #0d0d0d;
background-image:
radial-gradient(at 0% 0%, hsla(210,50%,10%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(220,50%,8%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(210,50%,10%,1) 0, transparent 50%);
}
.container {
background: #1a1a1a;
border-color: #2a2a2a;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
}
}
```
`border-radius: 24px` gives the card its rounded corners. Set it to `0` for sharp corners or `12px` for a subtler rounding.
## Typography
The app uses the `Inter` typeface with a system font fallback:
```css style.css theme={null}
body {
font-family: 'Inter', -apple-system, sans-serif;
}
```
To swap in a different font, load it from Google Fonts in `index.html` and update the `font-family` value in `style.css`.
Place the `` tag inside ``, before the stylesheet:
```html index.html theme={null}
```
```css style.css theme={null}
body {
font-family: 'DM Sans', -apple-system, sans-serif;
}
```
Keep `-apple-system, sans-serif` as a fallback so the app still renders cleanly if the web font fails to load.
## Button colors
The "Check Weather" button and the forecast tab buttons (`#getWeather`, `.tab-btn`) are styled in `style.css`. Find those selectors in the file and update the `background-color`, `color`, and `border` properties to match your preferred palette.
The primary blue used throughout the app is `#007bff`. Keeping your button color consistent with this value maintains visual cohesion with the icon and accent colors.
## Animation speed
The sun and rain icons follow an arc path above the logo using the `weatherArcPath` keyframe animation. The `animation` property is set on `.sun-icon, .rain-icon`:
```css style.css theme={null}
.sun-icon, .rain-icon {
animation: weatherArcPath 6s linear infinite;
}
```
The second value (`6s`) is the duration. Decrease it to speed up the arc, or increase it to slow it down.
```css Faster (3s) theme={null}
.sun-icon, .rain-icon {
animation: weatherArcPath 3s linear infinite;
}
```
```css Slower (12s) theme={null}
.sun-icon, .rain-icon {
animation: weatherArcPath 12s linear infinite;
}
```
```css Ease in-out (instead of linear) theme={null}
.sun-icon, .rain-icon {
animation: weatherArcPath 6s ease-in-out infinite;
}
```
Setting the duration below `1s` can cause the animation to feel janky on lower-end devices. Values between `3s` and `10s` tend to look best.