body {



  background-attachment: fixed;
  background-size: cover;

  color: #e6f3ff;
  font-family: "Segoe UI", Arial, sans-serif;

}


#rain{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-2;

  opacity:0.9;

}

.news-banner{

  width:100%;
  height:410px;
  overflow:hidden;
  position:relative;

}


.news-banner img{

  width:100%;
  height:100%;
  object-fit:cover;

  display:block;
}



/* =====================
PAGE
===================== */

.news-page{

  max-width:1000px;
  margin:auto;
  padding:20px;

}


/* =====================
HEADER
===================== */

.news-header{

  display:flex;
  justify-content:space-between;
  align-items:center;
    
  margin-bottom:15px;

}

.news-header h1{

  font-size:28px;
  font-weight:800;

  color:#8ed0ff;

  text-shadow:
    0 0 8px #008cff88;

}

.news-header a{

  color:#9fd8ff;
  text-decoration:none;

}

.news-header a:hover{

  text-decoration:underline;

}
.news-layout{

  display:flex;

  gap:20px;

  margin-top:60px;

}

.news-left{

  flex:3;
}


.news-right{

  flex:1;

}

.widget{

  background:#08141f;

  border:1px solid #1e5f86;

  padding:12px;

  border-radius:12px;

  position:relative;

  overflow:hidden;

  transition:0.3s;

}


#bgVideo {
  position: fixed;
  bottom: 15px;
  left: 15px;

  width: 240px;
  height: auto;

  border-radius: 14px;


  opacity: 0.95;

  z-index: -1;
}
/* =====================
SCROLL AREA
===================== */

.news-list{

  max-height:620px;

  overflow-y:auto;

  padding-right:6px;

  display:flex;
  flex-direction:column;
  gap:14px;

}


/* scrollbar */

.news-list::-webkit-scrollbar{
  width:8px;
}

.news-list::-webkit-scrollbar-thumb{
  background:#0a3a5a;
  border-radius:6px;
}


/* =====================
CARD
===================== */

.news-card{

  background:
  linear-gradient(
    180deg,
    #0e1f2c,
    #08131b
  );

  border:1px solid #13425f;

  border-radius:12px;

  padding:14px;

  box-shadow:
    0 0 12px #0094ff22,
    inset 0 0 10px #000;

  transition:0.2s;

}

.news-card:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 16px #00aaff55;

}
/* wrapper fixed size */
#cityPanelWrapper{

  width:320px;
  min-width:320px;
  max-width:320px;

  flex-shrink:0;

}


/* scroll container */
#cityPanel{

  height:720px;          /* fixed height */
  overflow-y:auto;

  display:block;         /* remove flex -> fixes shrink */

  padding-right:4px;

}


/* scrollbar simple */
#cityPanel::-webkit-scrollbar{
  width:6px;
}

#cityPanel::-webkit-scrollbar-thumb{
  background:#1e5f86;
  border-radius:10px;
}

#cityPanel::-webkit-scrollbar-track{
  background:transparent;
}


/* each city box */
.city-panel{

  width:100%;
  box-sizing:border-box;

  background:linear-gradient(
    180deg,
    rgba(20,40,60,0.9),
    rgba(5,15,25,0.95)
  );

  border:1px solid rgba(80,180,255,0.4);

  padding:12px;
  margin-bottom:10px;

  border-radius:12px;

  position:relative;
  overflow:hidden;

  backdrop-filter:blur(6px);

  transition:0.3s;

  box-shadow:
    0 0 8px rgba(0,150,255,0.3),
    inset 0 0 10px rgba(0,150,255,0.2);

}


/* shine effect (only once, not duplicate) */
.city-panel::before{

  content:"";
  position:absolute;

  top:0;
  left:-100%;

  width:100%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(0,170,255,0.25),
    transparent
  );

  animation:panelShine 6s linear infinite;

}

@keyframes panelShine{

  0%{ left:-100%; }
  100%{ left:100%; }

}


/* text */
.city-name{
  font-weight:bold;
  color:#d6f3ff;
  font-size:16px;
}

.city-temp{
  color:#7ed0ff;
  font-size:18px;
}

.city-item{
  border-bottom:1px solid #123;
  padding:6px 0;
}

/* =====================
TITLE
===================== */

.news-title{

  font-weight:700;
  font-size:18px;

  color:#bde8ff;

}


/* =====================
DATE
===================== */

.news-date{

  font-size:12px;
  color:#7fb8d6;

  margin-top:2px;

}


/* =====================
TEXT
===================== */

.news-text{

  margin-top:8px;

  line-height:1.5;

  color:#e6f3ff;

}


/* =====================
PAGINATION
===================== */

.news-pagination{

  margin-top:15px;

  display:flex;
  gap:6px;

  justify-content:center;

}

.news-pagination button{

  background:#0c2c40;
  border:1px solid #1e5f86;

  color:#cceeff;

  padding:6px 10px;

  cursor:pointer;

}

.news-pagination button:hover{

  background:#155b80;

}