/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  background: linear-gradient(#cfefff, #9fd6ff);
}

/* Variable EB Garamond font */
@font-face {
    font-family: 'EB Garamond';
    src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700; /* variable font supports weights from 100 to 700 */
    font-style: normal;
}

h1 {
    color: black;
    font-family: 'EB Garamond', serif;
    font-weight: 50; /* Light weight for Think Different style */
}

/* Base Aqua button */
.mac-aqua-button {
  position: relative;
  display: block;
  margin-bottom: 1rem;
  text-align: center;
  text-decoration: none;
  color: black;
  border-radius: 20px;
  font-size: 14px;
  padding: 0.2rem 2rem;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    2px 2px 5px 1px rgba(0,0,0,0.15);
  max-width: 64px !important;
  user-select: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}

/* Gloss highlight */
.mac-aqua-button::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 8%;
  width: 84%;
  height: 7px;
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,255,255,0.15) 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

/* Hover */
.mac-aqua-button:hover {
  filter: brightness(1.15) saturate(1.2);
}

/* Active */
.mac-aqua-button:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* Colour variants */
.aqua-button-grey   { background: linear-gradient(#c5c5c5, #ffffff 80%); }
.aqua-button-red    { background: linear-gradient(#b90303, #ff9a9a); }
.aqua-button-orange { background: linear-gradient(#d66a00, #ffd28a); }
.aqua-button-yellow { background: linear-gradient(#d6b800, #fff3a0); }
.aqua-button-green  { background: linear-gradient(#0a8f3a, #9effc2); }
.aqua-button-blue   { background: linear-gradient(#0342b9, #83dffd); }
.aqua-button-purple { background: linear-gradient(#5a2ca0, #d2b6ff); }
.aqua-button-pink   { background: linear-gradient(#c61b6e, #ffb6d9); }

.button-bar {
  display: flex;
  justify-content: center;     /* center the row */
  align-items: flex-start;     /* don’t stretch buttons */
  gap: 10px;                   /* space between buttons */
  padding: 10px 0;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 20px;
  flex-wrap: wrap;             /* allow multiple rows if needed */
}

/* Buttons inside the bar */
.button-bar .mac-aqua-button {
  display: inline-block;       /* size to content */
  padding: 6px 12px;
  font-size: 14px;
  white-space: normal;         /* allow text to wrap */
  max-width: 150px;            /* optional: limit width to avoid super-long buttons */
  text-align: center;
  overflow: visible;           /* allow wrapped text to show */
}