<div class="container">
        <div class="circle two"></div>
        <div class="circle three"></div>
        <div class="circle four"></div>
    </div>
    <div>
        <button id="palette1" onclick="palette1()">Color 1</button>
        <button id="palette2" onclick="palette2()">Color 2</button>
        <button id="palette3" onclick="palette3()">Color 3</button>
        <button id="palette4" onclick="palette4()">Color 4</button>
    </div>

* {
  margin: 0;
  padding: 0;
}

:root {
  --one: #f9ed69;
  --two: #f08a5d;
  --three: #b83b5e;
  --four: #6a2c70;
}

body {
  background-color: var(--one);
}

.container {
  display: flex;
  margin: 1em auto;
}

.button-container {
  display: flex;
  flex-direction: column;
}

.circle {
  height: 100px;
  width: 100px;
  margin-left: 1em;
  border-top-left-radius: 90%;
  border-bottom-right-radius: 90%;
}

.two {
  background-color: var(--two);
}

.three {
  background-color: var(--three);
}

.four {
  background-color: var(--four);
}

button {
  margin-left: 1em;
  padding: 0.5em;
  border: none;
  background-color: violet;
  border-radius: 10%;
  cursor: pointer;
  color: white;
}

var element = document.querySelector(":root")

console.log("HEELO WORLD")

const palette1 = () => {

    element.style.setProperty('--one', '#f9ed69')
    element.style.setProperty('--two', '#f08a5d')
    element.style.setProperty('--three', '#b83b5e')
    element.style.setProperty('--four', '#6a2c70')
}

const palette2 = () => {
    element.style.setProperty('--one', '#F38181')
    element.style.setProperty('--two', '#FCE38A')
    element.style.setProperty('--three', '#EAFFD0')
    element.style.setProperty('--four', '#95E1D3')
}

const palette3 = () => {
    element.style.setProperty('--one', '#08D9D6')
    element.style.setProperty('--two', '#252A34')
    element.style.setProperty('--three', '#FF2E63')
    element.style.setProperty('--four', '#EAEAEA')
}

const palette4 = () => {
    element.style.setProperty('--one', '#364F6B')
    element.style.setProperty('--two', '#3FC1C9')
    element.style.setProperty('--three', '#F5F5F5')
    element.style.setProperty('--four', '#FC5185')
}