/* Import Google Font: Roboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

/* Global Styles */
body {
  font-family: 'Roboto Mono', monospace;
  background-color: #000;
  color: #fff;
  margin: 0;
  /* Center content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  text-transform: uppercase; /* Render all text uppercase */
}

/* Container for all page content */
.content-container {
  width: 100%;
  max-width: 800px;
  padding: 0 24px;
  margin: 0 auto;
}

/* Token List and Manual Input Sections: add vertical spacing between sections */
#tokenList,
#manualInput {
  margin-top: 120px;
}

/* Token List Item Styles */
.token-item {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-item img {
  max-width: 80px;
  margin-right: 10px;
  border: 1px solid #777;
  border-radius: 4px;
}

/* Button Styles: flat white with black text, 16px padding on all sides, custom cut corners */
button {
  padding: 16px;
  margin-left: 10px;
  cursor: pointer;
  background-color: #fff;
  color: #000;
  border: none;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  /* Create square top-left & bottom-right and 45°-angled top-right & bottom-left corners */
  clip-path: polygon(
    0% 0%,
    calc(100% - 10px) 0%,
    100% 10px,
    100% 100%,
    10px 100%,
    0% calc(100% - 10px)
  );
}

button:hover {
  background-color: rgb(0, 153, 255);
}

/* Hyperlink Styles */
a {
  text-decoration: underline;
  color: #fff;
  cursor: pointer;
}

a:hover {
  color: rgb(0, 153, 255);
}

/* Error Message */
.error {
  color: red;
  margin-top: 10px;
}

/* Manual Input Section Styles */
#manualInput {
  margin-top: 120px;
}

/* Form Row: place input and submit button on the same line with 16px gap */
#manualInput .form-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

/* Input Fields styled similar to buttons, but with black background, 1px white border, and sharp corners */
input[type="text"] {
  padding: 16px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  max-width: 300px;
  box-sizing: border-box;
}

/* Focus state for the input fields */
input[type="text"]:focus {
  border: 1px solid rgb(0, 153, 255);
	  border-radius: 0;
  outline: none;
}

/* Responsive Adjustments */
/* For viewports less than 800px wide, ensure full width with 24px side margins */
@media (max-width: 800px) {
  .content-container {
    max-width: calc(100% - 48px); /* 24px margin on each side */
  }
}