<section id="section01" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=575)">
  <div class="content">
    <h2>Bell pepper</h2>
    <p>The bell pepper (also known as sweet pepper, pepper, or capsicum /ˈkæpsɪkəm/) is the fruit of plants in the Grossum cultivar group of the species Capsicum annuum. Cultivars of the plant produce fruits in different colors, including red, yellow, orange, green, white, and purple. Bell peppers are sometimes grouped with less pungent chili varieties as "sweet peppers".</p>
  </div>
  <a href="#section02" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section02" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=1016)">
  <div class="content">
    <h2>Tomato</h2>
    <p>The tomato is the edible berry of the plant Solanum lycopersicum, commonly known as a tomato plant. The species originated in western South America and Central America. The Nahuatl word tomatl gave rise to the Spanish word tomate, from which the English word tomato derived.</p>
  </div>
  <a href="#section03" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section03" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=869)">
  <div class="content">
    <h2>Eggplant</h2>
<p>Eggplant (US, Australia, New Zealand, anglophone Canada), aubergine (UK, Ireland, Quebec, and most of mainland Western Europe) or brinjal (South Asia, Singapore, Malaysia, South Africa) is a plant species in the nightshade family Solanaceae. Solanum melongena is grown worldwide for its edible fruit.</p>
  </div>
  <a href="#section04" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section04" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=506)">
  <div class="content">
  <h2>Lettuce</h2>
  <p>Lettuce (Lactuca sativa) is an annual plant of the daisy family, Asteraceae. It is most often grown as a leaf vegetable, but sometimes for its stem and seeds. Lettuce is most often used for salads, although it is also seen in other kinds of food, such as soups, sandwiches and wraps; it can also be grilled. </p>
    </div>
  <a href="#section05" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section05" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=1037)">
  <div class="content">
  <h2>Zucchini</h2>
  <p>
The zucchini (/zuːˈkiːni/; plural: zucchini or zucchinis), courgette (/kʊərˈʒɛt/; plural: courgettes) or baby marrow (Cucurbita pepo) is a summer squash, a vining herbaceous plant whose fruit are harvested when their immature seeds and epicarp (rind) are still soft and edible. It is closely related, but not identical, to the marrow; its fruit may be called marrow when mature.</p>
    </div>
  <a href="#section06" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section06" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=901)">
  <div class="content">
  <h2>Chutneys</h2>
  <p>
Onions are cultivated and used around the world. As a food item, they are usually served cooked, as a vegetable or part of a prepared savoury dish, but can also be eaten raw or used to make pickles or chutneys. They are pungent when chopped and contain certain chemical substances which may irritate the eyes.</p>
    </div>
  <a href="#section07" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section07" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=89)">
  <div class="content">
  <h2>Onion</h2>
  <p>
The onion (Allium cepa L., from Latin cepa "onion"), also known as the bulb onion or common onion, is a vegetable that is the most widely cultivated species of the genus Allium. The shallot is a botanical variety of the onion. Until 2010, the shallot was classified as a separate species.</p>
    </div>
  <a href="#section08" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section08" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=269)">
  <div class="content">
  <h2>Leek</h2>
  <p>
The leek is a vegetable, a cultivar of Allium ampeloprasum, the broadleaf wild leek. The edible part of the plant is a bundle of leaf sheaths that is sometimes erroneously called a stem or stalk. The genus Allium also contains the onion, garlic, shallot, scallion, chive, and Chinese onion.
Three closely related vegetables, elephant garlic, kurrat and Persian leek or tareh, are also cultivars of A. ampeloprasum, although different in their uses as food.</p>
    </div>
  <a href="#section09" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section09" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=890)">
  <div class="content">
  <h2 dir="rtl">الافتتاحية للمدير العام</h2>
  <p dir="rtl">الكلمة الافتتاحية للمدير العام لمنظمة الصحة العالمية في جلسة الاستماع العامالمتعلقة بوضع صك دولي جديد بشأن التأهب والاستجابة للجائحة - 12 نيسان/ نيسان/أبريل 2022. ولكن حتى ونحن نعمل على القضاء على هذه الجائحة، فإننا ندين لأولئك الذين لقوا حتفهم بسببها وأولئك الذين تضرروا منها بتعلم الدروس المؤلمة التي تقدمها لنا وإدخال التغييرات التي يجب أن نجريها للتأكد من أن العالم متأهب على نحو أفضل للجائحة التالية.</p>
    </div>
  <a href="#section10" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>
<section id="section10" class="demo" style="--url: url(https://picsum.photos/1920/1334?image=903)">
  <div class="content">
  <h2>Lorem Ipsum</h2>
  <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  <a href="#section01" class="mouse__scroll">
<svg t="1652778075382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M952.576 475.424q0 30.272-21.152 51.424l-372 372.576q-22.272 21.152-52 21.152-30.272 0-51.424-21.152l-372-372.576q-21.728-20.576-21.728-51.424 0-30.272 21.728-52l42.272-42.848q22.272-21.152 52-21.152 30.272 0 51.424 21.152l168 168 0-402.272q0-29.728 21.728-51.424t51.424-21.728l73.152 0q29.728 0 51.424 21.728t21.728 51.424l0 402.272 168-168q21.152-21.152 51.424-21.152 29.728 0 52 21.152l42.848 42.848q21.152 22.272 21.152 52z" p-id="2593"></path></svg>
  </a>
</section>

<div class="control">
  <input type="checkbox" id="scroll-behavior" name="scroll-behavior" />
  <label for="scroll-behavior">scroll-behavior:smooth</label>
</div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100vh;
  width: 100vw;
  --scroll-behavior: auto;
  scroll-behavior: var(--scroll-behavior);
  scroll-snap-type: y mandatory;
}

body {
  background: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(
      135deg,
      rgba(84, 232, 220, 1) 0%,
      rgba(241, 231, 103, 1) 25%,
      rgba(240, 229, 104, 1) 50%,
      rgba(254, 182, 69, 1) 75%,
      rgba(250, 118, 47, 1) 100%
    );
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%;
  background-blend-mode: hard-light, overlay, screen, saturation;
  font-family: Josefin;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  scroll-snap-stop: always;
    scroll-snap-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  
  --url: url(https://picsum.photos/1200/800?image=575);
  background: var(--url) center / cover no-repeat;
}
section::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 80%;
  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
  z-index: 2;
}



.content {
   backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
  max-inline-size: 60vmax;
  z-index: 3;
  margin: auto;
  padding: 2rem;
  font-family: "Exo", Arial, sans-serif;
}

.content > * + * {
  margin-block-start: 2rem;
}

.content p {
  line-height: 1.625;
}


.control {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 88px;
  background: rgb(16 18 27 / 60%);
  backdrop-filter: blur(20px);
  font-family: "Exo", Arial, sans-serif;

}

label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0.25em;
  position: relative;
  line-height: 1;
  color: #fff;
  font-family: "Exo", Arial, sans-serif;
  font-size: 1.2em;
  cursor: pointer;
}

input[type="checkbox"] {
  height: 1px;
  overflow: hidden;
  width: 1px;
  position: absolute;
  clip-path: inset(50%);
}

label::before {
  content: "";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #cbcbcb;
  background: #fff;
  color: #cbcbcb;
  width: 24px;
  aspect-ratio: 1;
  transition: all 0.2s ease;
}


input[type="checkbox"]:checked + label::before {
  content: "✔";
  border-color: #0075ff;
  background-color: #0075ff;
  color: #fff;
  font-size: 0.75em;
}



.mouse__scroll {
  min-width:80px;
  padding: 40px 0;
aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  opacity: .5;
  text-decoration: none;
  transition: all .28s linear;
  flex-direction: column;
  color: #fff;
}

.mouse__scroll:hover {
  opacity: 1;
}

.mouse__scroll svg {
  font-size: 32px;
  width: 1em;
  height: 1em;
  color: #fff;
  fill: currentColor;
  animation: shakeY 2s linear infinite; 
}


.mouse__scroll::after {
  content: "Scroll";
  font-family: "Exo", Arial, sans-serif;
  font-size: 1.25em;
  margin-top: .25em;
}

.mouse__scroll[href="#section01"] {
  transform: scaleY(-1);
}
.mouse__scroll[href="#section01"]::after {
  transform: scaleY(-1);
  content: "Go to Top";
  margin-top: 0;
  margin-bottom: .25em;
}

const rootElement = document.documentElement;
const checkbox = document.getElementById('scroll-behavior')

checkbox.addEventListener("change", (etv) => {
  rootElement.style.setProperty(
    `--scroll-behavior`,
    checkbox.checked ? `smooth` : `auto`
  )
});