--------------------------------------------- -->
<!-- Image inspired by Tide, a pomodoro app I use. -->
<!-- Check it out at: https://tide.moreless.io/en/ -->
<!-- --------------------------------------------- -->
<div id="pomodoro">
  <div id="clock">
    <div id="timer">
      <div id="title">Ready?</div>
      <div id="countdown">
        <span id="minutes">30</span>
        <span id="seconds">00</span>
      </div>
      <div id="controls" class="reset">
        <div id="start"><i class="fas fa-play"></i> Start</div>
        <div id="pause"><i class="fas fa-pause"></i> Pause</div>
        <div id="reset"><i class="fas fa-sync-alt"></i> Reset</div>
      </div>
    </div>
  </div>
  <div id="options">
    <div id="session">
      <i id="incrSession" class="fas fa-angle-double-up"></i>
      <span class="option-title">Session</span>
      <input id="sessionInput" type="number" value="30" max="60" min="5">
      <i id="decrSession" class="fas fa-angle-double-down"></i>
    </div>
    <div id="break">
      <i id="incrBreak" class="fas fa-angle-double-up"></i>
      <span class="option-title">Break</span>
      <input id="breakInput" type="number" value="5" max="10" min="1">
      <i id="decrBreak" class="fas fa-angle-double-down"></i>
    </div>
  </div>
</div>
<div id="audio-selector">
  <div id="forest" class="theme"><!--🌲 -->Forest</div>
  <div id="ocean" class="theme"><!--🌊 -->Ocean</div>
  <div id="rainy" class="selected theme"><!--🌧 -->Rainy</div>
  <div id="peace" class="theme"><!--🧘 -->Peace</div>
  <div id="cafe" class="theme"><!--☕ -->Caf&eacute;</div>
</div>
<audio loop autoplay="false" src="https://joeweaver.me/codepenassets/freecodecamp/challenges/build-a-pomodoro-clock/rain.mp3">