the current code outputing multilingual text through flag pressing "<div id="english" class="language-option">", which then suppose to be able to apply a nightmode through the styles, but it wont because I'm using background for section to cover the main background at     "<div class="background">YES, WE CARE!<div>". and in that case I cannot use nightmode switcher properly, it isn't function withing section background applied.without any wrappings? this wrapper method isn’t functioning, because it ruins the flag selection text output. can you output full page.: <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>

</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>