I broke my brain to understand how to apply a nightmode, while section background. to cover the background of the body with nightmode background for text. and using only css and html, without any javascripts.: <style>

body,
html {
margin: 0;
padding: 0;
height: 100%;
    width: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
line-height: 1.6;
transition: background-color 2s, color 3s;
    --overflow:hidden;

}

header {
background-color: #4caf50;
color: #fff;
padding: 16px 0px 0px 0px;
text-align: center;
position: absolute;
transition: background-color 2s;
  width: 100%;
height: 18px;
right: 0px;
  z-index:999;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
width: 90%;
height: 1%;
}

  .background {
background: linear-gradient(to bottom right, #5FB548, #A6D608);
color: white;
font-size: 80px;
font-weight: bold;
padding: 50px;
text-align: center;
text-shadow: 2px 2px #37472B;
    height: 100%;
    width: 100%;

  z-index:-1;

}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: -35px;
padding-top: 35px;
height: 100%;
}

@keyframes wave {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
.left,
.right {
position: relative;
}

.left::before,
.right::before {
content: "🌿";
position: absolute;
top: 5px;
border-bottom: 1px dashed #fff;
width: 40%;
}

.left::before {
right: 100%;
margin-right: 20px;
}

.right::before {
left: 100%;
margin-left: 20px;
}

.flags-container {
  width: 100%;
position: relative;
top: 0;
right: 0px;
padding: 1px 0;
background-color: darkgreen;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}

.flag-radio {
display: none;
}

.flag-label {
cursor: pointer;
margin: 0 10px;
transition: 0.3s;
opacity: 0.6;
font-size: 24px;
}

.flag-label:hover {
opacity: 1;
}

.language-option {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: none;
justify-content: center;
align-items: center;
padding-top: 64px;
  width: 100%;
height: 100%;
}

#english-flag:checked ~ #english,
#hindi-flag:checked ~ #hindi,
#hebrew-flag:checked ~ #hebrew,
#chinese-flag:checked ~ #chinese,
#french-flag:checked ~ #french,
#spanish-flag:checked ~ #spanish {
display: block;
}

#night-mode-toggle:checked ~ body,
#night-mode-toggle:checked ~ header,
#night-mode-toggle:checked ~ .language-option, section {
background-color: #dddddd;
color: #000;
}

#night-mode-toggle:checked ~ .flags-container {
background-color: #121;
}

#night-mode-toggle:checked ~ .switch-container label {
color: #fff;
}

.switch-container {
position: absolute;
top: 5px;
right: 16px;
display: flex;
align-items: center;
  justify-content: center;

z-index: 2;
}

.switch-container label {
    content: "&#x1F319;";

position: relative;
margin-left: 0px;
cursor: pointer;
user-select: none;
  align-items: center;
  justify-content: center;
}

.switch {
  content: "&#x1F319;";

position: relative;
cursor: pointer;
width: 64px;
height: 32px;
margin-right: 5px;
background-color: darkgreen;
border-radius: 15px;
transition: background-color 3s;
}

.switch:before {
content: "🌙";
display: block;
position: absolute;
top: 2px;
left: 2px;
height: 0px;
width: 0px;
background-color: #121;
border-radius: 50%;
transition: left 1s;
}

#night-mode-toggle:checked ~ .switch-container .switch {
background-color: #121;
}

#night-mode-toggle:checked ~ .switch-container .switch:before {
left: calc(100% - 28px);
}
</style>
</head>
<body>

<input id="english-flag" type="radio" name="flags" class="flag-radio">
<input id="hindi-flag" type="radio" name="flags" class="flag-radio">
<input id="hebrew-flag" type="radio" name="flags" class="flag-radio">
<input id="chinese-flag" type="radio" name="flags" class="flag-radio">
<input id="french-flag" type="radio" name="flags" class="flag-radio">
<input id="spanish-flag" type="radio" name="flags" class="flag-radio">

<div class="flags-container">
<label for="english-flag" class="flag-label">🇬🇧</label>
<label for="hindi-flag" class="flag-label">🇮🇳</label>
<label for="hebrew-flag" class="flag-label">🇮🇱</label>
<label for="chinese-flag" class="flag-label">🇨🇳</label>
<label for="french-flag" class="flag-label">🇫🇷</label>
<label for="spanish-flag" class="flag-label">🇪🇸</label>
</div>

<header>
<h1>
<span class="left">EcoWare</span>
<span class="right">Earthwise</span>
</h1>
</header>

<!-- Night Mode Switch -->
<input type="checkbox" id="night-mode-toggle" />
<div class="switch-container">
  <label for="night-mode-toggle">
    <div class="switch"></div>
  </label>
</div>

<div id="english" class="language-option">
<section id=“home”>
<p>Our mission is to educate and inspire people to take action for a greener, more sustainable future. We believe that together, we can make a difference in protecting our planet for generations to come.</p>
<p><a href=“#topics”>Explore our environmental topics</a> to learn more about the issues we face and how you can get involved.</p>
</section>

<section id=“topics”>
<h2>Environmental Topics</h2>
<section id=“climate-change”>
<h3>Climate Change</h3>
<p>Climate change is a long-term shift in global or regional climate patterns, primarily caused by human activities such as burning fossil fuels, deforestation, and industrial processes. The effects of climate change include increased global temperatures, extreme weather events, ice melting, and rises in sea level. We promote greenhouse gas reduction strategies and enforce measures to adapt to the impacts of climate change.</p>
</section>
</div>

<div id="hindi" class="language-option">
<p>hindi details going here</p>
</div>

<div id="hebrew" class="language-option">
<p>hebrew details going here</p>
</div>

<div id="chinese" class="language-option">
<p>chinese details going here</p>
</div>

<div id="french" class="language-option">
<p>french details going here</p>
</div>

<div id="spanish" class="language-option">
<p>spanish details going here</p>
</div>
    <div class="background">YES, WE CARE!<div>

</body>
</html>