<button class="btn-toggle-panel" type="button" aria-label="Toggle panel configurator" title="toggle panel configurator">
  <i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
</button>

<div class="panel">
  <div class="control-wrapper">
    <label for="font-family">Select font</label>
    <div class="inner">
      <select id="font-family" name="family">
        <option value="Arial">Arial</option>
        <option value="Fira Sans">Fira Sans</option>
        <option value="Inter">Inter</option>
        <option value="Lato">Lato</option>
        <option value="Montserrat">Montserrat</option>
        <option value="Raleway">Raleway</option>
        <option value="Roboto">Roboto</option>
        <option value="Ubuntu">Ubuntu</option>
      </select>
    </div>
  </div>
  <div class="control-wrapper">
    <label for="font-size">Font size</label>
    <div class="inner">
      <button class="btn-font-size btn-decrease" type="button" aria-label="decrease font-size" title="decrease font-size">
        <i class="fa-solid fa-minus" aria-hidden="true"></i>
      </button>
      <input id="font-size" type="number" value="10">
      <button class="btn-font-size btn-increase" type="button" aria-label="increase font-size" title="increase font-size">
        <i class="fa-solid fa-plus" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="control-wrapper">
    <label for="background-color">Bg color</label>
    <div class="inner">
      <input id="background-color" type="color" value="#ffffff">
    </div>
  </div>
  <div class="control-wrapper">
    <label for="text-color">Text color</label>
    <div class="inner">
      <input id="text-color" type="color" value="#000000">
    </div>
  </div>
  <div class="control-wrapper">
    <label for="image-style">Image style</label>
    <div class="inner">
      <select id="image-style" name="image-style">
        <option value="normal">Normal</option>
        <option value="grayscale">Grayscale</option>
        <option value="blur">Blur</option>
        <option value="rounded">Rounded</option>
      </select>
    </div>
  </div>
</div>

<section>
  <div class="container">
    <div class="text">
      <h2>Title here</h2>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
      <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
    </div>
    <figure>
      <img width="1920" height="1277" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg" alt="">
    </figure>
  </div>
</section>
<section>
  <div class="container">
    <div class="text">
      <h2>Another title here</h2>
      <p>Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox.</p>
      <p>The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!"</p>
    </div>
    <figure>
      <img width="1920" height="1290" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg" alt="">
    </figure>
  </div>
</section>
<section>
  <div class="container">
    <div class="text">
      <h2>Another title here</h2>
      <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains</p>
    </div>
    <figure>
      <img width="1920" height="1279" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg" alt="">
    </figure>
  </div>
</section>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET & BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
  box-sizing: border-box;
}

html {
  --default-font-family: Arial;
  --font-size: 10px;
  --black: #000;
  --white: #fff;
  --vampire-black: #070707;
  --anti-flash-white: #f1f1f1;
  --grey: grey;
  --silver: #d0d0d0;
  font-family: var(--font-family, var(--default-font-family)), sans-serif;
  font-size: var(--font-size);
  color: var(--text-color, var(--black));
  background-color: var(--background-color, var(--white));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
label {
  cursor: pointer;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  border: none;
  background: none;
}

input {
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

[type="number"] {
  -moz-appearance: textfield;
}

[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type="color"]::-webkit-color-swatch {
  border: none;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  margin-top: 50px;
  font-size: 1.8rem;
  line-height: 2.6rem;
}

.container {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 1000px;
}

/* PANEL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn-toggle-panel,
.panel {
  position: fixed;
  left: 10px;
  z-index: 1;
  color: var(--vampire-black);
  background: var(--anti-flash-white);
}

.btn-toggle-panel {
  top: 10px;
  font-size: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.panel {
  top: 70px;
  font-size: 16px;
  line-height: normal;
  padding: 30px 20px;
  border-radius: 30px;
  transform: translateX(calc(-100% - 10px));
  transition: transform 0.4s;
}

.panel.show {
  transform: none;
}

.control-wrapper {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.control-wrapper .inner {
  display: flex;
  justify-content: center;
  width: 120px;
}

.control-wrapper label {
  font-weight: bold;
  width: 140px;
  margin-bottom: 5px;
}

.control-wrapper input,
.control-wrapper select {
  text-align: center;
  background: var(--white);
  border: 2px solid var(--silver);
}

.control-wrapper input {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
}

.control-wrapper button {
  width: 32px;
  color: var(--grey);
}

.control-wrapper select {
  width: 100%;
  height: 32px;
  border-radius: 16px;
}

@container style(--type: grayscale) {
  img {
    filter: grayscale(1);
  }
}

@container style(--type: blur) {
  img {
    filter: blur(3px);
  }
}

@container style(--type: rounded) {
  img {
    border-radius: 50px;
  }
}

/* SECTION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
  margin-bottom: 50px;
}

section .text {
  max-width: 700px;
  margin: 0 auto 50px;
}

section img {
  background: var(--anti-flash-white);
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  background: var(--white);
  font-size: 16px;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const html = document.documentElement;
const togglePanelBtn = document.querySelector(".btn-toggle-panel");
const panel = document.querySelector(".panel");
const fontFamilySelect = document.querySelector('[name="family"]');
const fontSizeInput = document.querySelector('[type="number"]');
const fontSizeBtns = document.querySelectorAll(".btn-font-size");
const colorInputs = document.querySelectorAll('[type="color"]');
const imageStyleSelect = document.querySelector('[name="image-style"]');
let selectedFontSize = fontSizeInput.value;

// toggle panel
togglePanelBtn.addEventListener("click", function () {
  panel.classList.toggle("show");
});

// font family
fontFamilySelect.addEventListener("input", function (e) {
  const value = e.target.value;
  if ("Arial" === value) {
    html.style.setProperty("--font-family", value);
    return;
  }
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = `https://fonts.googleapis.com/css2?family=${value.replaceAll(
    " ",
    "+"
  )}:wght@400;700&display=swap`;
  document.head.appendChild(link);
  html.style.setProperty("--font-family", value);
});

// font size
fontSizeBtns.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const inputValue = Number(fontSizeInput.value);
    if (
      e.target.classList.contains("btn-decrease") ||
      e.target.parentElement.classList.contains("btn-decrease")
    ) {
      if (fontSizeInput.value <= 10) return;
      fontSizeInput.value--;
    } else {
      if (fontSizeInput.value >= 20) return;
      fontSizeInput.value++;
    }
    selectedFontSize = fontSizeInput.value;
    html.style.setProperty("--font-size", `${selectedFontSize}px`);
  });
});

fontSizeInput.addEventListener("change", function () {
  const value = this.value;
  if (value < 10 || value > 20) {
    this.value = selectedFontSize;
  } else {
    selectedFontSize = value;
  }
  html.style.setProperty("--font-size", `${selectedFontSize}px`);
});

// colors
colorInputs.forEach(function (input) {
  input.addEventListener("input", function () {
    html.style.setProperty(`--${this.id}`, this.value);
  });
});

// image style
imageStyleSelect.addEventListener("input", function (e) {
  html.style.setProperty("--type", e.target.value);
});