<h1>Accent color</h1>

<div class="wrapper">
  <div class="container">
    <div>
      <input type="checkbox" id="Chakra" name="chakra"
             checked>
      <label for="chakra">Chakra</label>
      <input type="checkbox" id="material" name="material">
      <label for="material">Material</label>
    </div>

    <div>
      <input type="radio" id="rounded" name="radius" value="rounded"
             checked>
      <label for="rounded">Rounded</label>
      <input type="radio" id="standard" name="radius" value="standard">
      <label for="standard">Standard</label>
    </div>
    <div>
       <label for="volume">Volume:</label>
      <input type="range" id="volume" name="volume"
             min="0" max="11">
    </div>
    <label for="file">File progress:</label>

    <progress id="file" max="100" value="70"> 70% </progress>
  </div>

  <div class="container accentContainer">
    <div>
      <input type="checkbox" id="Chakra2" name="chakra2"
             checked>
      <label for="chakra2">Chakra</label>
      <input type="checkbox" id="material2" name="material2">
      <label for="material2">Material</label>
    </div>

    <div>
      <input type="radio" id="rounded2" name="radius2" value="rounded2"
             checked>
      <label for="rounded2">Rounded</label>
      <input type="radio" id="standard2" name="radius2" value="standard2">
      <label for="standard2">Standard</label>
    </div>
    <div>
       <label for="volume2">Volume:</label>
      <input type="range" id="volume2" name="volume2"
             min="0" max="11">
    </div>
    <label for="file2">File progress:</label>

    <progress id="file2" max="100" value="70"> 70% </progress>
  </div>
</div>

.accentContainer {
  accent-color: #DC89F5;
}



html {
  color-scheme: dark;
  font-size: 20px;
}

body {
  background: #292929;
  color: #DFDFDF;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
}

h1 {
  margin-bottom: 4rem;
}

div {
  margin-bottom: 0.5rem;
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}

input {
  background-color: red;
}