@import url('/static/styles/tab-bar.css'); /* Import styles for tab-bar */

@font-face { /* Load custom font */
  font-family: 'SF Pro'; /* Set font name */
  src: url('/static/fonts/sf-pro.woff2') format('woff2'); /* Specify file and format */
}

html { /* Full document (root element) */
  font-size: 24px; /* Set base font size */
}

body { /* Body element (overall page layout) */
  background: #000; /* Set page background color */
  color: #fff; /* Set text color */
  margin: 0; /* Remove default margin */
  height: 100vh; /* Set body height to full viewport */
  display: flex; /* Enable flexbox layout */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  font-family: 'SF Pro', monospace; /* Apply custom font */
}

.center-stage { /* Content to be centered vertically and horizontally */
  display: flex; /* Enable flexbox for content */
  align-items: center; /* Center children horizontally */
  justify-content: center; /* Center children vertically */
  flex-direction: column; /* Arrange children vertically */
  width: 100%; /* Set container full width */
  height: 100vh; /* Set container full viewport height */
}

h1 { /* Headings */
  font-size: 1.4rem; /* Set heading font size */
  margin: 0 0 24px 0; /* Add bottom margin */
}

p { /* Paragraphs */
  font-size: 1rem; /* Set paragraph font size */
  margin-top: 24px; /* Add top margin */
  min-height: 34px; /* Set minimum height to match paragraph line-height */
}

a { /* Links */
  text-decoration: none; /* Remove underline from links by default */
}

a:hover { /* Links on hover */
  text-decoration: underline; /* Underline links on hover */
}

.icons { /* Icons container */
  display: flex; /* Enable flexbox for icons */
  flex-direction: column; /* Arrange icon rows vertically */
  gap: 20px; /* Add vertical space between icon rows */
  min-height: 34px; /* Set minimum height to match paragraph line-height */
  margin-top: 24px; /* Add top margin to icon section */
}

.icon-row { /* Icons row */
  display: flex; /* Enable flexbox for icon row */
  flex-direction: row; /* Arrange icons horizontally */
  gap: 32px; /* Add horizontal space between icons */
  justify-content: center; /* Center icons in the row */
}

.icon { /* Icon */
  width: 42px; /* Set icon width */
  height: 42px; /* Set icon height */
  border-radius: 8px; /* Round icon corners */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
}

.icon:hover { /* Icon on hover */
  transform: scale(1.1); /* Enlarge icon on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* Add subtle shadow on hover */

}