// Get the buttons and the scheme name element
const scheme1Button = document.getElementById('scheme1');
const scheme2Button = document.getElementById('scheme2');
const scheme3Button = document.getElementById('scheme3');
const schemeName = document.getElementById('schemeName');

// Add event listeners to each button
scheme1Button.addEventListener('click', setScheme1);
scheme2Button.addEventListener('click', setScheme2);
scheme3Button.addEventListener('click', setScheme3);

// Function to set the page style to Scheme 1
function setScheme1() {
  // Remove other scheme classes
  document.body.classList.remove('scheme2', 'scheme3');
  
  // Add scheme 1 class
  document.body.classList.add('scheme1');
  
  // Change individual style properties
  document.getElementsByTagName('h1')[0].style.fontSize = '48px';
  document.getElementsByTagName('p')[0].style.lineHeight = '1.5';
  document.getElementsByTagName('button')[0].style.padding = '10px 20px';
  
  // Update scheme name
  schemeName.innerText = 'Scheme 1';
}

// Function to set the page style to Scheme 2
function setScheme2() {
  // Remove other scheme classes
  document.body.classList.remove('scheme1', 'scheme3');
  
  // Add scheme 2 class
  document.body.classList.add('scheme2');
  
  // Change individual style properties
  document.getElementsByTagName('h1')[0].style.fontSize = '36px';
  document.getElementsByTagName('p')[0].style.lineHeight = '1.2';
  document.getElementsByTagName('button')[0].style.padding = '5px 10px';
  
  // Update scheme name
  schemeName.innerText = 'Scheme 2';
}

// Function to set the page style to Scheme 3
function setScheme3() {
  // Remove other scheme classes