html {
    background-color: black;
    min-height: 100%;
    height: auto;     
}

body {
  font-family: Arial, sans-serif;
  color: white;
  size: 8;

}

.page-container {
	margin-left: 10%;
	margin-right: 10%;
}



.metallic-btn {
  /* Dimensions & Typography */
  padding: 12px 32px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  
  /* Metallic Copper Background */
  background: linear-gradient(145deg, #b87333, #d48d46, #8c4f19);
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.4), 
    inset -3px -3px 6px rgba(0, 0, 0, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.2);
  
  /* Stainless Steel Silver Text */
  background: linear-gradient(to bottom, #f0f2f5, #b8bec5, #8a939e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Smooth transitions */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

/* Push effect on click */
.metallic-btn:active {
  transform: translateY(2px);
  box-shadow: 
    inset 4px 4px 6px rgba(0, 0, 0, 0.4), 
    inset -2px -2px 4px rgba(255, 255, 255, 0.2);
}