I'm thinking on how to make this "<label for="switch">Energy saving nightmode layer</label>" not to cover things when flag is triggered and content shown... because this "nightmode layer" should cover the whole area when activated but it don't allow to select text behind it.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS-only Multilingual eco-friendly site</title>
<style>
  .switch-container input[type="checkbox"] {
width: 18px;
height: 18px;
}

.switch-container label:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease-out;
}

.switch-container input[type="checkbox"]:checked ~ label:before {
opacity: 1;
}
  
  
  body, html {
  margin: 0;
  padding: 0;
  height: 100%;
    line-height: 1.6;
background-color: #f7f7f7;
}
  
  header {
  background-color: #4CAF50;
  color: #FFF;
  padding: 16px 0px 0px 0px;
  text-align: center;
      position: relative;
}

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%;

}

.left, .right {
  position: relative;
}

.left::before, .right::before {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 1px dashed #FFF;
  width: 40%;
}

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

.right::before {
  left: 100%;
  margin-left: 20px;
}
  
.flags-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --padding: 3px 0;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.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: run-in;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: 0px; /* language-option container text from top height */
}

#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;
}

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

<header>
  <h1>
    <span class="left">EcoWare</span>
    <span class="right">Earthwise</span>
  </h1>
</header>
  <div class="switch-container">
    <input type="checkbox" id="switch">
  <label for="switch">Energy saving nightmode layer</label>
</div>
  
<div id="english" class="language-option">
<p>english details going here</p>
</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>
</body>
</html>