body {
  --bg-color: var(--tg-theme-bg-color);
  font-family: system-ui, sans-serif;
  background-color: var(--bg-color);
  color: var(--tg-theme-text-color);
  margin: 48px 24px;
  padding: 0;
  color-scheme: var(--tg-color-scheme);
}

main {
  min-height: calc(var(--tg-viewport-stable-height, 100vh) - 96px);
}

.container {
  max-width: 100%;
  margin: auto;
}

.caption-field textarea {
  width: 100%;
  font-size: 18px;
  padding: 8px 12px;
  border: 2px solid #4caf50;
  word-wrap: break-word;
  box-sizing: border-box;
  resize: none;
}

#caption-field.caption-field--over-limit {
  border-color: #a2acb4;
}

.caption-field {
  display: flex;
  flex-direction: column;
}

.caption-meta {
  margin-top: 8px;
  text-align: right;
  font-size: 14px;
  color: var(--tg-theme-hint-color, #6c757d);
}

#caption-counter.caption-counter--over-limit {
  color: var(--tg-theme-destructive-text-color, #d9534f);
}

#copy-caption {
  margin-bottom: 15px;
  padding: 0px;
  font-size: 18px;
  width: 100%;
  height: 40px;
  background-color: #04aa6d;
  border: none;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

#copy-caption:hover:not(:disabled) {
  background-color: #03915c;
}

#copy-caption:active:not(:disabled) {
  background-color: #02734a;
}

#copy-caption.copy-caption--disabled {
  background-color: #a2acb4;
  cursor: not-allowed;
}

#copy-caption:disabled {
  opacity: 0.8;
}

a {
  color: var(--tg-theme-link-color);
}

/* #viewport { */
/*   position: fixed; */
/*   left: 0; */
/*   right: 0; */
/*   top: 0; */
/*   height: var(--tg-viewport-stable-height, 100vh); */
/*   pointer-events: none; */
/*   transition: all 0.2s ease; */
/* } */
/* #viewport:after { */
/*   content: ""; */
/*   display: block; */
/*   position: absolute; */
/*   left: 0; */
/*   right: 0; */
/*   top: 0; */
/*   bottom: 0; */
/*   border-width: 4px; */
/*   border-style: solid; */
/*   border-image: linear-gradient( */
/*       45deg, */
/*       rgba(64, 224, 208, 0.5), */
/*       rgba(173, 255, 47, 0.5) */
/*     ) */
/*     1; */
/* } */
/**/
/* #viewport-params-size, */
/* #viewport-params-expand { */
/*   content: attr(text); */
/*   position: absolute; */
/*   display: inline-block; */
/*   background: var(--tg-theme-link-color, rgb(64, 224, 208)); */
/*   right: 4px; */
/*   left: auto; */
/*   font-size: 8px; */
/*   padding: 4px; */
/*   vertical-align: top; */
/* } */
/* #viewport-params-size { */
/*   top: 4px; */
/* } */
/* #viewport-params-expand { */
/*   top: 30px; */
/* } */