html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    padding: 1em;
}

: not(: defined) {
    visibility: hidden;
}

fluent - card {
    padding: 16px;
    display: flex;
    flex - direction: column;
}

h2 {
    font - size: var(--type - ramp - plus - 5 - font - size);
    line - height: var(--type - ramp - plus - 5 - line - height);
}

#button {
    align - self: flex - end;
}

#error-area {
    border: 1px solid red; /* Red border to indicate error */
    background-color: #ffcccc; /* Light red background */
    color: red; /* Red text */
    padding: 10px; /* Some padding for aesthetics */
    margin-bottom: 20px; /* Margin for spacing */
    display: none; /* Hide it by default */
}