*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: fantasy;
}

body{
    color:white;
    min-height:100vh;
    overflow-x:hidden;
}

/* ФОН */
.bg{
    position:fixed;
    inset:0;
    z-index:-3;
    background:linear-gradient(to top,#4facfe,#00f2fe);
    transition:1s;
}

/* ПРИЛОЖЕНИЕ */
.app{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px;
}

/* HEADER */
header{
    text-align:center;
    margin-bottom:25px;
}

h1{
    font-size:48px;
    letter-spacing:2px;
    text-shadow:0 0 20px rgba(255,255,255,.4);
}

/* ГОРОД */
#cityName{
    font-size:42px;
    font-weight:800;
    margin-top:10px;

    background:linear-gradient(
        90deg,
        #ff004c,
        #ffb300,
        #ffee00,
        #00ff85,
        #00c3ff,
        #7a00ff
    );

    background-size:400%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    animation:rainbow 6s linear infinite;
}

@keyframes rainbow{
    0%{background-position:0%}
    100%{background-position:400%}
}

/* ПОИСК */
.search{
    display:flex;
    gap:12px;
    margin:20px 0;
}

.search input{
    padding:12px;
    font-size:16px;
    border-radius:10px;
    border:none;
    outline:none;
    width:260px;
}

.search button{
    padding:12px 18px;
    font-size:16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
}

/* КАРТОЧКА */
.main-card{
    width:850px;
    max-width:95%;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(18px);
    border-radius:30px;
    padding:45px;
    text-align:center;
    margin-bottom:25px;
}

/* ТЕМПЕРАТУРА */
.big-temp{
    font-size:95px;
    font-weight:700;
}

.desc{
    font-size:22px;
    margin-bottom:20px;
}

/* МИНИ ИНФО */
.mini-info{
    display:flex;
    justify-content:space-between;
    font-size:18px;
    opacity:0.9;
}

/* ПРОГНОЗ */
.forecast-card{
    width:1100px;
    max-width:95%;
    background:rgba(255,255,255,0.12);
    border-radius:30px;
    padding:25px;
}

#forecast{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
}

.day{
    display:flex;
    justify-content:space-between;
    padding:16px;
    background:rgba(255,255,255,0.15);
    border-radius:18px;
    font-size:18px;
}

/* ОБЛАКА */
.sky{
    position:fixed;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.cloud{
    position:absolute;
    background:rgba(255,255,255,0.75);
    border-radius:100px;
    filter:blur(25px);
    opacity:0.85;
    transform:scale(2.6);
    animation:move linear infinite;
}

.c1{width:320px;height:110px;top:10%;left:-400px;animation-duration:120s;}
.c2{width:420px;height:140px;top:30%;left:-600px;animation-duration:160s;opacity:0.7;}
.c3{width:360px;height:120px;top:55%;left:-800px;animation-duration:140s;}
.c4{width:480px;height:160px;top:75%;left:-1000px;animation-duration:200s;opacity:0.6;}

@keyframes move{
    from{transform:translateX(0) scale(2.6);}
    to{transform:translateX(350vw) scale(2.6);}
}

/* КНОПКА КАРТЫ В ЦЕНТРЕ */
.bottom-btn{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:30px;
}

/* КНОПКА */
.map-btn{
    display:inline-block;
    padding:14px 28px;
    background:rgba(255,255,255,0.2);
    backdrop-filter:blur(15px);
    border-radius:15px;
    color:white;
    text-decoration:none;
    font-size:18px;
    transition:0.3s;
}

.map-btn:hover{
    background:rgba(255,255,255,0.35);
    transform:translateY(-3px);
}

/* КНОПКИ КАРТЫ */
.controls{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:15px;
}

.controls button{
    padding:10px 16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:rgba(255,255,255,.2);
    color:white;
    transition:.3s;
}

.controls button:hover{
    background:rgba(255,255,255,.35);
}

/* ===== КАРТА СТИЛЬ ===== */

.map-app{
    font-family: fantasy;
}

/* фон карты (синхрон с погодой) */
.map-app .bg{
    background: linear-gradient(to top,#1e3c72,#2a5298);
}

/* заголовок */
.map-app h1{
    font-size:42px;
    text-shadow:0 0 15px rgba(255,255,255,.3);
}

/* кнопки карты */
.map-app .controls button{
    font-family: fantasy;
    font-size:16px;
    color:white;
    border:1px solid rgba(255,255,255,.2);
}

.map-app .controls button:hover{
    transform:scale(1.05);
    background:rgba(255,255,255,.3);
}

/* карта */
#map{
    width:95%;
    height:70vh;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
    border:2px solid rgba(255,255,255,.15);
}

/* ===== РАДУЖНЫЙ ТЕКСТ ДЛЯ КАРТЫ ===== */

.map-app h1,
.map-app button,
.map-app .map-btn {
    background: linear-gradient(
        90deg,
        #ff004c,
        #ffb300,
        #ffee00,
        #00ff85,
        #00c3ff,
        #7a00ff,
        #ff004c
    );

    background-size: 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: rainbowMove 6s linear infinite;
}

/* анимация переливания */
@keyframes rainbowMove {
    0% { background-position: 0% }
    100% { background-position: 400% }
}