:root {
  --s: 80px;
  --c1: #071054;
  --c2: #353531;

  --_s: calc(2 * var(--s)) calc(2 * var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%, var(--c2) 68% 70%, #0000 72%;
}

body {
  font-family: sans-serif;
  margin: 1rem;
}

header,
footer,
section {
  max-width: 800px;
  margin: auto auto;
}

header {
  background:
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s) / var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s) / var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0 / var(--_s),
    radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0 / var(--_s),
    repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0 / var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s) / 2) / var(--s) var(--s)
      var(--c1);
  padding: 1rem;
  border-radius: 1rem;
  text-align: center;
  color: #fff;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-style: italic;
  font-size: 0.75rem;
  max-width: 30rem;
  color:#353531
}

#vttDropZone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
  height: 200px;
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 1rem;
  background-color: #eee;
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-size: 2rem;
  margin: auto auto;
}

#vttFileInput {
  display: none;
}

#vttFormatPreview {
  border: 1px solid;
  padding: 1rem;
  background-color: lightyellow;
  border-radius: 10px;
}

#vttFileName {
  font-size: 1.5rem;
}

button {
  background-color: rgb(159, 251, 159);
  border: 1px solid #000;
  padding: 1rem;
  border-radius: 10px;
  margin: 1rem 0;
}
button:hover {
  background-color: #eee;
}
.reset {
  background-color: antiquewhite;
}

.note {
  font-weight: bold;
  background-color: lightblue;
  border-radius: 10px;
  border-color: gray;
  padding: 1rem;
  color: #000;
  text-align: center;
  margin: 1rem auto;
  max-width: 50vw;
}

[hidden] {
  display: none !important;
}