/* styling the webpage of MP Janmat */
* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 100vh;
    width: 100%;
    user-select: none;
    font-family: 'Noto Sans Devanagari', 'Mukta', sans-serif;
}

header {
    height: auto;
    width: 100%;
}

footer {
    height: auto;
    width: 100%;
}

a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

main {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

h1, h2{
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    text-align: center;
    padding: 0.4vmin;
    font-weight: 600;
}

button {
    cursor: pointer;
}

/* Header Styling */
.header-area {
    height: auto;
    width: 100vw;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    background-color: rgb(0, 57, 171);
}

.logo {
    height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.2vmin solid black;
    background-image: linear-gradient(rgb(238, 117, 47), white, rgb(1, 119, 1));
    border-radius: 0.5rem;
}

.logo-img {
    height: 12vmin;
    width: 48vmin;
    background-image: url("MPJanmatLogo.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
    margin: 1vmin auto;
}

.color-mode {
    color: #000000;
    position: absolute;
    top: 6vmin;
    right: 3vmin;
    font-size: 1.3rem;
}

.header-option-area {
    width: 100%;
    background-color: rgb(0, 57, 171);
}

.header-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 93%;
    margin: 0 auto;
    padding: 1vmin;
    background-color: rgb(0, 57, 171);
}

.subscribe-btn {
  background-color: #cc0000; /* YouTube red */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 1vmin;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.subscribe-btn:hover {
  background-color: #b00000;
}

.whatsapp-news {
    padding: 1vmin 2vmin;
    border: 0.2vmin solid green;
    border-radius: 0.5rem;
    color: rgb(0, 0, 0);
    background-color: white;
    font-size: 0.9rem;
}

.whatsapp-news i {
    color: rgb(3, 137, 3);
}

.state-box {
    height: auto;
    width: 100%;
    padding: 1vmin;
    box-shadow: 0 0.2vmin 1.5vmin 0.5vmin rgb(126, 125, 125);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: scroll;
    flex-wrap: nowrap;
    white-space: nowrap;
    border-bottom: 0.2vmin solid white;
}

.state-box::-webkit-scrollbar {
    display: none;
}

.city-box {
    height: auto;
    width: 100%;
    padding: 1vmin;
    box-shadow: 0 0.2vmin 1.5vmin 0.5vmin rgb(126, 125, 125);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: scroll;
    border-bottom: 0.2vmin solid white;
}

.city-box::-webkit-scrollbar {
    display: none;
}

a > .box,
a:visited > .box,
a:hover > .box,
a:active > .box {
    color: inherit;
    text-decoration: none;
}

.box {
    height: 100%;
    width: auto;
    padding: 1vmin;
    font-size: 1rem;
    text-decoration: 0.3vmin solid underline rgb(138, 137, 137);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 1vmin;
    border-radius: 0.8rem
}

.breaking-news {
    height: auto;
    width: 100vw;
    margin: auto;
    border-top: 0.2vmin solid black;
    border-bottom: 0.2vmin solid black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.breakingnews-text {
    height: auto;
    width: fit-content;
    font-size: 1.3rem;
    background-color: rgb(204, 21, 21);
    color: rgb(255, 255, 255);
    font-weight: 600;
    padding: 1vmin;
    padding-left: 1.7vmin;
    border-radius: 1rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    text-wrap: nowrap;
}

.moving-line {
    font-size: 1.5rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.moving-line p {
    font-weight: 600;
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 60s linear infinite;
}

.article-content, .news-section {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

#news-heading {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-wrap: wrap;
    text-align: center;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.news-section {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-wrap: wrap;
}

.moving-line p:hover {
    animation-play-state: paused;
}

.news-content, .news-section {
    max-width: 100%;
    box-sizing: border-box;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Footer area styling */
.footer-area {
    width: 100%;
    height: auto;
    background-color: rgb(83, 83, 83);
    color: rgb(231, 232, 233);
}

.footerLogo-area {
    height: auto;
    width: 100%;
    padding: 1vmin 0 1vmin 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    border: none;
    border-top: 0.2vmin solid black;
    border-bottom: 0.2vmin solid black;
}

.text-aboutus {
    width: 80%;
    color: black;
    margin-top: 0.3vmin;
    background-color: transparent;
    text-align: center;
    padding: 2vmin;
}

.aboutus-text {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.copyright-section {
    height: auto;
    width: 97%;
    padding: 2vmin;
    margin: 1vmin 0 1vmin 0;
    background-color: rgb(73, 73, 73);
    color: rgb(233, 231, 231);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.copyright-text {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
    text-align: center;
}

.back2-top {
    height: auto;
    width: 97%;
    padding: 1vmin;
    background-color: rgb(2, 2, 99);
    color: rgb(243, 243, 243);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vmin;
}

.back2-top:hover {
    font-size: 1.1rem;
    background-color: rgb(4, 4, 122);
    border: 0.2vmin solid white;
}

.links-section {
    background-color: rgb(22, 22, 22);
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-links-footer {
    background-color: rgb(22, 22, 22);
    width: 97%;
    height: auto;
    padding: 1vmin;
    margin-top: 1vmin;
    margin: auto;
}

.category-link {
    background-color: rgb(39, 39, 39);
    width: 100%;
    height: auto;
    padding: 0.5vmin;
}

.popular-category-text {
    display: block;
    text-align: left;
    color: rgb(190, 190, 192);
    border-left: 0.3vmin solid white;
    padding-left: 1vmin;
    font-size: 1.3rem;
}

.category-link-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1vmin;
}

.cities-footer {
    background-color: rgb(39, 39, 39);
    width: 100%;
    height: auto;
    padding: 0.5vmin;
}

.city-category-text {
    display: block;
    text-align: left;
    color: rgb(190, 190, 192);
    border-left: 0.3vmin solid white;
    padding-left: 1vmin;
    font-size: 1.3rem;
}

.city-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1vmin;
}

.fcategory-box {
    padding: 1vmin;
    cursor: pointer;
    margin-right: 1vmin;
    color: rgb(227, 228, 230);
}

.fcategory-box:hover {
    color: rgb(247, 247, 247);
    text-decoration: 0.2vmin solid underline;
}

.useful-link-secton {
    background-color: rgb(39, 39, 39);
    width: 100%;
    height: auto;
    padding: 1vmin;
    margin-top: 3vmin;
    border-top: 0.2vmin solid white;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1vmin;
    font-family: 'Times New Roman', Times, serif;
}

.contact-section {
    height: auto;
    width: 97%;
    margin-top: 1vmin;
    padding: 1vmin;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(78, 77, 77);
}

.contactUs-text {
    height: auto;
    width: 100%;
    padding: 0.5vmin;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1vmin;
}

.contact-icons {
    height: auto;
    width: 80%;
    padding: 1vmin;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon {
    height: 6vmin;
    width: 6vmin;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
}

.icon:hover {    
    border: 0.2rem solid white;
}
.thanks4-visiting {
    height: auto;
    width: 95%;
    background-color: rgb(71, 71, 71);
    color: white;
    padding: 2vmin;
    padding-bottom: 1vmin;
    text-align: center;
}

/* Main Styling */
.complete-news-section {
    height: auto;
    width: 99%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vmin;
    flex-direction: column;
    padding: 2vmin;
    /* background-color: rgb(241, 241, 241); */
}

.selected-news {
    width: 100%;
    height: auto;
    padding: 1.5vmin 0 1vmin 2vmin;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: solid underline;
}

.article {
    height: auto;
    width: auto;
}

.news-section {
    height: auto;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    margin: 1vmin;
    padding-top: 3vmin;
    border: none;
    border-top: 0.3vmin solid black;
}

.share-links {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 1rem;
    margin-top: 0.7vmin;
    margin-bottom: 0.7vmin;
    padding-right: 2vmin;
    width: 35%;
    margin: auto;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.7rem;
}

.share-content {
    height: auto;
    width: 100%;
    padding: 1vmin 1vmin;
    margin: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

.share-button {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: black;
}

.sharetext {
    font-size: 1.1rem;
    font-weight: 550;
}

.share-button a {
    text-decoration: none;
    color: black;
    font-size: 1.2rem;
    margin-right: 1vmin;
}

.share-button:hover {
    color: #007bff; /* On hover */
}

.share-button a:hover {
    color: #007bff; /* On hover */
}

.share-button i:hover {
    color: #007bff; /* On hover */
}

.news-content h1{
    width: 90%;
    flex-wrap: wrap;
    text-align: center;
}

.news-content {
    height: auto;
    width: 99%;
    margin: 2vmin 0;
    padding: 3vmin 1vmin;
    border: none;
}

.news-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1vmin auto;
    border-radius: 0.3rem;
}

.news-content video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2vmin auto;
    border-radius: 0.3rem;
}

.img-container {
    height: auto;
    min-height: 35vmin;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 2vmin;
    object-fit: cover;
}

img {
    height: auto;
    width: 80%;
}

.center {
    display: block;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .complete-news-section {
        width: 70%;
    }
}

.date-place{
    height: auto;
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 1vmin;
}

.complete-all-news-section {
    height: auto;
    width: 96.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2vmin;
    margin: 3vmin 0;
    flex-direction: column;
    padding: 2vmin;
    /* background-color: rgb(241, 241, 241); */
}

@media (min-width: 1024px) {
    .complete-all-news-section {
        width: 70%;
    }
}

.heading-otherNews{
    padding-right: 65%;
    text-align: left;
    font-size: 1.5rem;
}

.other-news {
    min-height: 25vmin;
    height: auto;
    width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0.5vmin 0;
    border: none;
    border-top: 0.2vmin solid black;
    /* background-color: aliceblue; */
}

.all-news {    
    min-height: 25vmin;
    height: auto;
    width: 99%;
    padding: 0.5vmin;
    margin: 0.5vmin;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.title-all-news {
    min-height: 25vmin;
    height: auto;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    word-wrap: break-word;
    flex-direction: column;
    background-color: transparent;
}

.img-all-news {
    background-color: transparent;
    height: auto;
    width: 30%;
}

.date-place-allNews {
    height: auto;
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1vmin;
}

/* comments */
#comment-section {
    height: auto;
    width: 100%;
    margin: 3vmin auto;
    padding: 2vmin 1vmin;
    text-align: left;
}

#commentForm {
    padding-left: 1vmin;
    margin: 1vmin auto;
}

#commenter-name, #commenting-comment {
    padding: 0.7vmin 0.7vmin;
    margin: 0 auto;
    margin-bottom: 1vmin;
    height: auto;
    width: 90%;
    display: block;
    font-size: 1rem;
}

#post-comment {
    padding: 0.5vmin;
    margin: 1vmin 0;
    margin-top: 2vmin;
    color: #f5f5f5;
    background-color: #007bff;
    margin-left: 4vmin;
}

#commentList {
    margin-left: 2vmin;
}

#seeMoreBtn {
    padding: 0.5vmin;
    margin: 1vmin 0;
    margin-top: 2vmin;
    margin-left: 10%;
}

#loadMoreBtn {
    margin-bottom: 2vmin;
    font-size: 1rem;
    padding: 0.5vmin;
    background-color: #007bff;
    color: #ffffff;
    cursor: pointer;
}

#loadMoreBtn {
    margin-bottom: 2vmin;
    font-size: 1rem;
    padding: 0.5vmin;
    background-color: #007bff;
    color: #ffffff;
    cursor: pointer;
}

#viewMoreOtherNews {
    margin-top: 1vmin;
    font-size: 1rem;
    padding: 0.5vmin;
    background-color: #007bff;
    color: #ffffff;
    cursor: pointer;
}

.complete-footer-multiplex-ads {
    background-color: white;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer-multiplex-ads {
    min-height: min(70vh, 60vmin, 500px);
    width: 97%;
    margin: 2vmin 0;
    margin-top: 1vmin;
    flex-direction: column;
    padding: 2vmin;
    background-color: rgb(241, 241, 241);
    border: 0.1vmin solid black;
}

@media (min-width: 1024px) {
    .footer-multiplex-ads {
        width: 70%;
    }
}

.footer-ads-main-box {
    height: auto;
    width: 95%;
    margin: 1vmin;
    padding-top: 3vmin;
    border: none;
    border-top: 0.3vmin solid black;
    background-color: rgb(241, 241, 241);
}

.footer-multiplex-ads p{
    color: black;
    font-size: 1.1rem;
}

.article-infeed-ads-container {
    height: auto;
    width: 95%;
    margin: 1vmin;
    padding-top: 3vmin;
    border: none;
    border-top: 0.3vmin solid black; 
}

.article-infeed-ads {
    min-height: min(40vmin, 300px);
    width: 97%;
    margin: 1vmin;
    padding: 1vmin;  
}

.article-infeed-ads p{
    font-size: 1.1rem;
    margin: 0.5vmin;
}

.inner-article-ads-container {
    height: auto;
    min-height: 20vmin;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(241, 241, 241);
    padding-top: 0.5vmin;
    margin-top: 0.5vmin;
}

.inner-article-ads {
    height: auto;
    min-height: 20vmin;
    width: 99%;
    padding: 0.5vmin;
    margin: 0.5vmin 0;
    background-color: aliceblue;
    border: 0.2vmin solid black;
}

/* INTER NEWS ADS */
.ad-block {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95vmin;
  margin: 1vmin;
  padding: 1vmin;
  border: 2px solid rgb(122, 122, 122);
  box-sizing: border-box;
}

.ad-block p {
  margin: 0.5vmin;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  color: rgb(100, 100, 100);
}

/* 1. Horizontal */
.ad-horizontal {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(35vmin, 300px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 2. Square */
.ad-square {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(45vmin, 400px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 3. Vertical */
.ad-vertical {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(60vmin, 500px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 4. Infeed: Image Above */
.ad-infeed-image-above {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(40vmin, 350px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 5. Infeed: Image Left Side */
.ad-infeed-image-left-side {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(40vmin, 350px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 6. Infeed: Image Right Side */
.ad-infeed-image-right-side {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(40vmin, 350px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 7. Infeed: Image Left + Title Above */
.ad-infeed-image-left-title-above {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(40vmin, 350px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 8. Infeed: Image Right + Title Above */
.ad-infeed-image-right-title-above {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(40vmin, 350px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 9. Text Only */
.ad-infeed-text-only {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(30vmin, 300px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 10. In-Article Ad */
.ad-inarticle {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(35vmin, 300px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 11. Multiplex Vertical */
.ad-multiplex-vertical {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(55vmin, 400px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* 12. Multiplex Horizontal */
.ad-multiplex-horizontal {
  display: block;
  width: 97%;
  height: auto;
  min-height: min(55vmin, 400px);
  padding: 0.2vmin;
  margin: 1vmin auto;
}

/* color mode */
/* Light Mode */
:root.light-mode {
  --bg-main: #ffffff;
  --text-main: #000000;
  --bg-nav: #e9e9e9;
  --nav-text: #6e6e6e;
  --bg-moving-line: white;
  --moving-line-text: black;
  --bg-breaking-news: white;
  --bg-secondary: rgb(242, 242, 242);
  --secondary-text: black;
  --bg-complete-footer-ad: #ffffffff;
  --bg-footer-ad: #f1f1f1ff;
  --bg-footer-ad-main: #f1f1f1ff;
  --footer-ad-color: black;
  --share-icon-color: black;
  --news-section-border-color: black;
  --article-infeed-ads-container: black;
  --article-infeed-ads: black;
  --bg-ad-block: #f1f1f1ff;
  --ad-block-border: #4e4e4eff;
  --ad-block-para: black;
  --bg-box: #ffffff;
  --box-border: #4e4e4eff;
  --box-color: #05387f;
  --bg-all-news: #f1f1f1ff;
  --all-news-border: black;
  --bg-inner-artical-ads-container: #f1f1f1ff;
  --inner-artical-ads-container-color: black;
  --inner-artical-ads-container-border: black;
  --bg-inner-artical-ads: #f1f1f1ff;
  --inner-arical-ads-color: black;
  --inner-artical-ads-border: rgb(100, 100, 100);
}

/* Dark Mode */
:root.dark-mode {
  --bg-main: rgb(97, 97, 97);
  --text-main: #f5f5f5ff;
  --bg-nav: rgb(73, 72, 72);
  --nav-text: white;
  --bg-moving-line: #494949ff;
  --moving-line-text: #ffffff;
  --bg-breaking-news: #494949ff;
  --bg-secondary: rgb(83, 83, 83);
  --secondary-text: white;
  --bg-complete-footer-ad: rgb(97, 97, 97);
  --bg-footer-ad: rgb(83, 83, 83);
  --bg-footer-ad-main: rgb(83, 83, 83);
  --footer-ad-color: rgb(255, 255, 255);
  --share-icon-color: rgb(255, 255, 255);
  --news-section-border-color: rgb(255, 255, 255);
  --article-infeed-ads-container: rgb(255, 255, 255);
  --article-infeed-ads: rgb(255, 255, 255);
  --bg-ad-block: rgb(83, 83, 83);
  --ad-block-border: rgba(189, 189, 189, 1);
  --ad-block-para: rgba(240, 240, 240, 1);
  --bg-box: #b0b0b0;
  --box-border: #ffffff;
  --box-color: #062b7d;
  --bg-all-news: rgb(93, 93, 93);
  --all-news-border: rgb(83, 83, 83);
  --bg-inner-artical-ads-container: rgb(83, 83, 83);
  --inner-artical-ads-container-color: rgb(255, 255, 255);
  --inner-artical-ads-container-border: rgb(255, 255, 255);
  --bg-inner-artical-ads: rgb(83, 83, 83);
  --inner-arical-ads-color: rgb(255, 255, 255);
  --inner-artical-ads-border: rgb(196, 196, 196);
}

/* Apply these vars to relevant elements */
main {
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* Example targets */
.state-box, .city-box {
    background-color: var(--bg-nav);
    color: var(--nav-text)
}

.breaking-news{
    background-color: var(--bg-breaking-news);
}

.moving-line {
    background-color: var(--bg-moving-line);
    color: var(--moving-line-text);
}

.complete-news-section, .complete-all-news-section {
    background-color: var(--bg-secondary);
    color: var(--secondary-text);
}

.complete-footer-multiplex-ads {
    background-color: var(--bg-complete-footer-ad);
}

.footer-multiplex-ads {
    background-color: var(--bg-footer-ad);
}

.footer-ads-main-box {
    background-color: var(--bg-footer-ad-main);
    border-color: var(--footer-ad-color);
}

.share-button a {
    color: var(--share-icon-color);
}

.news-section {
    border-color: var(--news-section-border-color);
}

.article-infeed-ads-container, .article-infeed-ads {
    border-color: var(--article-infeed-ads-container);
}

.ad-block {
    border-color: var(--ad-block-border);
    background-color: var(--bg-ad-block);
}

.ad-block p {
    color: var(--ad-block-para);
}

.box {
    background-color: var(--bg-box);
    border-color: var(--box-border);
    color: var(--box-color);
}

.all-news {
    border-color: var(--all-news-border);
    background-color: var(--bg-all-news);
}

.inner-article-ads-container {
    border-color: var(--inner-artical-ads-container-border);
    background-color: var(--bg-inner-artical-ads-container);
    color: var(--inner-artical-ads-container-color);
}

.inner-article-ads {
    background-color: var(--bg-inner-artical-ads);
    color: var(--inner-arical-ads-color);
    border-color: var(--inner-artical-ads-border);
}

.clicked {
    color: #05387f !important;
    font-size: 1rem;
    background-image: linear-gradient(rgb(214, 115, 1),rgb(255, 255, 255), rgb(4, 114, 4));
}

/* the accessibility issues resolving */
#seeMoreBtn, #loadMoreBtn, #post-comment {
  background-color: #05387f; /* dark blue */
  color: #fff;
  font-weight: 600;
  padding: 0.8vmin 1.5vmin;
  border-radius: 0.4vmin;
  border: none;
}

/* error fixing of best practices ad helping faster approval of the webpage for the adsense and google news */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  color: #fff;
  padding: 1rem;
  text-align: center;
  z-index: 1000;
}

#cookie-banner button {
  margin-left: 1rem;
  padding: 0.3rem 1rem;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

/* search form */
.search-section {
    margin: auto;
}

.search-form form{
    margin: 3vmin;
    padding: 0.5vmin;
    margin: auto;
}
.search-form input{
    font-size: 1rem;
    padding: 0.5vmin;
    margin: auto;
}
.search-form button {
    font-size: 1rem;
    padding: 0.5vmin;
}