html,
body { 
  height: 100%; 
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  width: 100%;
  max-width: 720px;
  justify-content: space-evenly;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  font-size: clamp(12px, 3.5vw, 18px);
}

.options { 
  flex: 0 0 auto;
  margin-bottom: 1em;
}

.content {
  position: relative;
  padding-right: 25px;
}

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(20px, 5vmin, 40px);
  background-color: var(--green);
  width: 30vmin;
  height: 30vmin;
  min-width: 15vmin;
  min-height: 15vmin;
  padding: 0;
  margin: 0;
  box-shadow: 10px 10px 10px 10px cyan;
}

@media (min-width: 690px) {
  .wrapper { 
    flex-direction: row; 
    justify-content: space-between;
  }
  .options { margin-bottom: 0;}
  .element {
    min-width: 200px;
    min-height: 200px;
  }
}

const color = document.querySelector('.color');
const element = document.querySelector('.element');

color.addEventListener('change', () => {
  element.style.boxShadow = `10px 10px 10px ${color.value} cyan`;
})