<div class="check-toggle">
  <input type="checkbox" id="squared-paper" class="squared" />
  <label for="squared-paper">Make squared papber</label>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.
</p>
<p>
  Second paragraph Donec fringilla sem at eros vulputate tempus. Maecenas interdum leo a tortor lobortis in hendrerit est pellentesque. Vestibulum non leo et nisi sollicitudin rutrum. Aliquam tristique dui tempor sapien molestie mollis. Integer viverra faucibus nulla ut posuere. Sed quis dui dictum tortor imperdiet imperdiet ut scelerisque augue. Aenean sit amet libero sit amet metus pulvinar viverra et id tortor. Nulla iaculis bibendum nisi, quis elementum risus tempus et. Nullam rutrum, dolor id vulputate feugiat, lectus tortor auctor odio, et lacinia eros neque quis neque. Praesent nibh erat, varius porttitor cursus a, condimentum vel eros. Quisque odio urna, elementum a consequat id, facilisis eget mi. Praesent imperdiet congue velit, non tempus mi sollicitudin eu. Duis vitae nisi leo, ut ultrices leo. Aliquam dolor sapien, cursus suscipit fringilla et, lacinia et ligula. Proin eu lacus leo, at accumsan nisi. Nulla facilisi. Proin vehicula mi nec augue semper eleifend. Aliquam tempus vulputate quam at malesuada. Nulla a lacus sit amet urna varius cursus. Aliquam a nunc sapien.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.
</p>

@import url("https://fonts.googleapis.com/css2?family=Single+Day&display=swap");

:root {
  --font-size: 1.5rem;
  --line-height: 1.5em;
  --line-color: #95d9c3;
  --line-stroke: 2px;
}

body {
  font-family: "Single Day", cursive;
  font-size: var(--font-size);
  line-height: var(--line-height);
  vertical-align: bottom;
  margin: 0;
  background-color: ivory;
}

p {
  margin: 0;
  padding: 1lh 5vw 0;
  vertical-align: bottom;
  background-image: repeating-linear-gradient(
    to top,
    var(--line-color) 0 var(--line-stroke),
    transparent var(--line-stroke) 1lh
  );
}

body:has(.squared:checked) p {
  background-image: repeating-linear-gradient(
      to right,
      var(--line-color) 0 var(--line-stroke),
      transparent var(--line-stroke) 1lh
    ),
    repeating-linear-gradient(
      to top,
      var(--line-color) 0 var(--line-stroke),
      transparent var(--line-stroke) 1lh
    );
}

.check-toggle {
  display: flex;
  justify-content: center;
  padding-block: 1.2rem;
  background: black;
  color: white;
  & input {
    width: 1.5rem;
    margin-right: 0.5rem;
    accent-color: var(--line-color);
  }
}