/* ========== GLOBAL RESET & LAYOUT ========== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0; /* remove default spacing */
  display: flex; 
  flex-direction: column; /* stack elements vertically */
}

body {
  transition: background-color 0.5s ease; /* color changes smoothness*/
}

/* ========== TYPOGRAPHY ========== */
h1,
h2 {
  text-align: center; /* center align headings */
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 1rem 0; /* spacing above/below */
}

/* ========== MAIN STRUCTURE ========== */
main {
  flex: 1; /* grow to fill available space (pushes footer down) */
}

img {
  display: block; /* remove inline spacing */
  height: 300px; /* cat image,fixed height  */
  margin: 0 auto; /* center horizontally */
}

/* ========== REMOTE CONTROL STYLES ========== */
ul {
  width: 100px;
  border: 3px solid black;
  margin: 0 auto; 
  list-style: none; /* remove bullets, Remote Color*/
  padding: 0;
  border-radius: 10px; /* rounded outer container */
}

button {
  width: 94px;
  height: 65px;
  border-radius: 8px; /* curve color button */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  align-items: center; /* button text vertically center */
  justify-content: center; /* button text horizontally center*/
  font-weight: bold;
  color: white;
  cursor: pointer; /* pointer on hover */
  border: none; /* remove default button borders; else would have border around color */
}

button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* === Color Button Backgrounds === */
#purple {
  background: #9b59b6;
}
#green {
  background: #2ecc71;
}
#blue {
  background: #3498db;
}
#orange {
  background: #f39c12;
}

/* === Reset Button Styles === */
#reset {
  background: #333;
  color: white;
  font-size: 0.8rem;
}

/* ========== BACK TO TOP BUTTON ========== */
.btt-container {
  text-align: center;
  margin-top: 20px;
}

.btt {
  padding: 8px 18px;
  background-color: rgba(28, 42, 42, 1);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease;
}

.btt:hover {
  background-color: rgba(0, 140, 133, 1); /* teal hover */
}

/* ========== FOOTER ========== */
footer {
  text-align: center;
  padding: 1rem 0; /* space inside footer */
}

footer a {
  color: inherit; /* same as parent text color */
  text-decoration: underline;
  font-weight: 600;
}

footer a:hover {
  color: #3498db; /* highlight link on hover */
  text-decoration: none;
}

/* ========== RESPONSIVE STYLES ========== */
@media (max-width: 600px) {
  body {
    background-color: #f0f4ff; /* light blue background on small screens */
  }
}

/* ========== ANIMATIONS ========== */
@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 0); }
  50% { transform: translate(5px, 0); }
  75% { transform: translate(-5px, 0); }
  100% { transform: translate(0, 0); }
}

.cat-shake {
  animation: shake 0.3s; /* triggers shake effect */
}