:root {
  --color-bg: #efefef;
  --color-bg-dark: #373532;
  --color-text: #373532;
  --color-error: #cf2e2e;
  --color-accent-start: #ccff01;
  --color-accent-end: #bfe136;

  --space-xs: 0.1875rem;
  --space-sm: 0.625rem;
  --space-md: 1.25rem;
  --space-lg: 2.5rem;
  --space-xl: 3.125rem;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2")
    format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Inter", sans-serif;
  background: var(--color-bg) url("back.png") no-repeat center top;
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  font-size: 2.825rem;
  font-weight: 600;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.125rem;
  font-weight: 500;
}

h4 {
  font-weight: 400;
}

a {
  color: currentColor;
}
a:hover {
  text-decoration: none;
}

/* Forms */

label {
  font-size: 1.25rem;
  font-weight: 600;
}

input,
select {
  font-size: 1.125rem;
  padding-inline: var(--space-sm);
  height: var(--space-lg);
  width: 100%;
  background-color: #fff;
  border: none;
  font-family: inherit;
  color: inherit;
}

input[type="file"] {
  padding-left: 0;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 3.125rem;
  background: #fff url("arrow.png") no-repeat right center/2.5rem;
}

button,
input[type="file"]::file-selector-button {
  height: 40px;
  padding: 0 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--color-accent-start) 0%,
    var(--color-accent-end) 100%
  );
  cursor: pointer;
  border: none;
}

input[type="file"]::file-selector-button {
  text-transform: lowercase;
}

input[type="number"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

input:invalid {
  border: 2px solid var(--color-error);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.error {
  color: var(--color-error);
}

.hint {
  font-size: 0.9rem;
  margin: 0;
}

/* Other */

.top-section {
  padding-inline: var(--space-md);
}

.heading {
  padding-block-start: var(--space-xl);
}

.register-type {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

.register-type__rtmr {
  border-top: 1px solid #546d6b;
  padding-block-start: var(--space-lg);
}

.footer {
  font-size: 0.9rem;
  padding-block: var(--space-md);
}

@media screen and (min-width: 768px) {
  .register-type {
    flex-direction: row;
  }
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.log-tag {
  border: 1px solid var(--color-text);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
}

.logo {
  width: inherit;
  height: inherit;
}

.logo-link {
  display: block;
  width: 40px;
  height: 40px;
}

/* Hash */

.hash-list {
  list-style: none;
  counter-reset: index -1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hash-list > li {
  display: flex;
  gap: var(--space-md);
}
.hash-list > li::before {
  counter-increment: index;
  content: counter(index);
  font-weight: 700;
  display: inline-block;
  width: 1rem;
}

.hash {
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  font-size: 0.875rem;
}