body {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
}

.himmel {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--himmel);
}

.sky-clear {
    --himmel: linear-gradient(180deg, #2f7fd6 0%, #69b3f2 60%, #a9d6f7 100%);
}

.sky-cloudy {
    --himmel: linear-gradient(180deg, #5d6f84 0%, #8a9bad 60%, #b3bfcb 100%);
}

.sky-rain {
    --himmel: linear-gradient(180deg, #37475a 0%, #56687d 60%, #7b8b9c 100%);
}

.sky-snow {
    --himmel: linear-gradient(180deg, #7d93ad 0%, #a9bccf 60%, #dce5ee 100%);
}

.sky-thunder {
    --himmel: linear-gradient(180deg, #22263a 0%, #3d4260 60%, #5b5f7d 100%);
}

.sky-night {
    --himmel: linear-gradient(180deg, #0c1633 0%, #1d2d5a 60%, #33467a 100%);
}

.vader {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 16px 48px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}



.nu {
    text-align: center;
    margin-bottom: 24px;
}

    .nu h1 {
        font-size: 26px;
        font-weight: 500;
        margin: 0;
    }

    .nu .stor-symbol {
        font-size: 44px;
        margin-top: 6px;
    }

    .nu .temp {
        font-size: 88px;
        font-weight: 300;
        line-height: 1;
    }

    .nu .info {
        font-size: 16px;
        opacity: 0.9;
        margin-top: 4px;
    }



.kort {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

    .kort h2 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.8;
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }



.timmar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    text-align: center;
    gap: 4px;
}

    .timmar .tid {
        font-size: 13px;
        opacity: 0.85;
    }

    .timmar .symbol {
        font-size: 24px;
        margin: 4px 0;
    }

    .timmar .grad {
        font-size: 16px;
        font-weight: 700;
    }


.dag {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

    .dag:last-child {
        border-bottom: none;
    }

    .dag .namn {
        flex: 1;
        font-weight: 500;
        text-transform: capitalize;
    }

    .dag .symbol {
        width: 40px;
        font-size: 22px;
        text-align: center;
    }

    .dag .temp {
        width: 100px;
        text-align: right;
    }

    .dag .lag {
        opacity: 0.7;
        margin-left: 8px;
    }

.fel {
    text-align: center;
    padding: 48px 16px;
}