/* ////////////////////////////////////////////////////////////////////// */
/* CSS STYLE FILE /////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////// */


/* default backup in case the user's browser does not support CSS variables */
/* this will be overridden by the CSS variables we define in globals.js */
/* will need to update this if we change the colors in globals.js */
:root {
  --canvas-background: #eae5de;
  --text: #3c3c3c;
  --cell-off: #ffffff;
  --cell-on: #3c3c3c;
  --button-background: #f7f5f2;
  --button-border: #c7b9a7;
  --button-hover-background: #ffffff;
  --button-highlighted-background: #ffeb3b;
  --button-highlighted-border: #fbc02d;
}

html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

/* Style all button elements */
button {
  background-color: var(--button-background);
  color: var(--text); /* Text color */
  font-family: "Arial", sans-serif; /* Font family */
  font-size: 16px; /* Font size */
  border: 1px solid var(--button-border); /* Border size, type, color */
  border-radius: 1px; /* Rounded corners */
  padding: 4px 7px; /* Padding inside the button */
  cursor: pointer; /* Mouse pointer on hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

/* Change background color on hover */
button:hover {
  background-color: var(--button-hover-background);
}

/* this creates a CSS class that styles a button to appear highlighted */
/* we can apply this class to any button we want to highlight (like the run button) */
button.highlighted {
  background-color: var(--button-highlighted-background); /* Yellow highlight */
  border: 2px solid var(--button-highlighted-border); /* Optional: Add a border for emphasis */
  transition: background-color 0.3s, border 0.3s; /* Smooth transition */
}

/* Adjust button styles for mobile devices */
/* Advanced Media Query for Touch Devices (e.g., Mobile) */
/* note this detects touch devices that do not have a mouse, not just small screens */
@media (pointer: coarse) and (hover: none) {
  button {
    font-size: 29px; /* Increased font size for better readability */
    padding: 8px 16px; /* Increased padding for easier tapping */
    border-radius: 8px; /* Enhanced rounded corners */
  }
}