/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*! Origin v1.2.1 | https://origin.plue.es | MIT License */
html *{box-sizing:border-box}video,audio{display:block}html,textarea{font-family:verdana,arial,sans-serif;font-size:16px}body{color:#444;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#c33;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;line-height:1.2;margin:0}h1{font-size:2em}h2{font-size:1.6em}h3{font-size:1.2em}p,ul,ol,form,table,figure,h1,h2,h3,h4,h5,h6{margin:0 0 .7em}blockquote{font-style:italic;margin:.7em 30px}img{height:auto;max-width:100%;vertical-align:top;width:auto\9}hr{border:0;border-top:1px solid #ddd;margin:2em 0}:hover,:focus,:active,a:focus{outline:0}table{width:100%;table-layout:fixed;border-collapse:collapse}td,th{border-bottom:1px solid #ccc;padding:.4em 1.5em;text-align:left}ul{list-style:outside}ul ul{list-style:circle;margin-bottom:0;padding-left:1.7em}nav ul,nav ul ul{list-style:none;padding-left:0;margin-bottom:0}pre,code{font-family:monaco,monospace,courier}code{background:#f9f9f9;border:1px solid #ccc;font-size:.8em;padding:.1em .2em}pre code{display:inline-block;padding:.5em .8em}::-webkit-input-placeholder{line-height:normal}.input{border:1px solid #ccc;box-sizing:border-box;color:inherit;line-height:normal;padding:.55em;vertical-align:middle;width:100%}.input:focus{border-color:#aaa}textarea.input{height:70px;min-height:70px;max-height:150px;resize:vertical}.btn{background:#444;border:0;cursor:pointer;color:#eee;display:inline-block;font-size:.9em;line-height:normal;overflow:visible;padding:.45em .6em;vertical-align:middle;margin:.5em 0}.btn:hover{background:#222;color:#fff;text-decoration:none}.btn:active,.btn.active{background:#444}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.clear{clear:both;display:block}

/*! Transfer */

:root {
  --color-base: #040405;
  --color-accent: #232326;
  --color-light: #434346;
  --color-extralight: #8091b1;
  --color-background: #f7f6f6;
  --fontsize-base: 16px;
  --fontsize-medium: 1.1rem;
  --fontsize-small: 0.8rem;
}

@media (max-width: 599px) {
  :root {
    --fontsize-base: 14px;
  }
}

html {
  font-size: var(--fontsize-base);
  height: 100%;
}

body {
  min-height: 100%;
  background-color: var(--color-background);
  color: var(--color-base);
  padding: 15px;
  display: flex;
  flex-direction: column;
}

body:not(.display) {
  background-image: url("image-10883294.png");
  background-position: 80% 10%;
  background-repeat: no-repeat;
  background-size: min(294px, 40vw);
}

a {
  color: var(--color-base);
  transition: all 200ms ease-in-out;
}

a:hover {
  color: var(--color-base);
  text-decoration: none;
}

header {
  color: var(--color-extralight);
}

header svg {
  margin: 0 2px -6px 0;
}

footer {
  color: var(--color-extralight);
  font-size: var(--fontsize-small);
  text-align: right;
  padding-top: 15px;
  opacity: 0;
  animation: fadeIn 500ms forwards;
}

footer a {
  color: var(--color-extralight);
}

footer a:hover {
  color: var(--color-accent);
}

footer p {
  margin-bottom: 0;
}

h1 {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 15px;
}

main {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 60px;
}

@media (max-width: 599px) {
  main {
    padding-bottom: 20px;
  }
}

body:not(.display) main > * {
  position: relative;
}

.btn {
  padding: 0.63rem 1.2rem 0.64rem;
  font-size: var(--fontsize-medium);
  background: var(--color-base);
  border-radius: 6px;
}

.btn:hover {
  background: var(--color-accent);
}

[type="text"] {
  padding: 0.63rem 1.2rem 0.64rem;
  font-size: var(--fontsize-medium);
  border: none;
  border: 1px solid var(--color-extralight);
  background: #fff;
  border-radius: 6px;
  width: 300px;
  max-width: 85vw;
  text-align: center;
  line-height: 1;
  margin: .5em 0;
  transition: all 200ms ease-in-out;
}

[type="text"]:focus {
  border-color: var(--color-accent);
}

::placeholder {
  color: var(--color-extralight);
  opacity: 1;
}

small {
  font-size: var(--fontsize-small);
}

.status {
  text-align: center;
  margin: 0;
  font-size: var(--fontsize-small);
  color: orange;
}

.caption {
  text-align: center;
}

.caption small {
  color: var(--color-extralight);
}

.caption a:hover {
  text-decoration: underline;
}

.preview {
  max-height: 50vh;
  margin-top: 50px;
}

audio.preview {
  margin-bottom: 10px;
}

.welcome ~ form#login {
  display: none;
}

form {
  margin: 0;
}

form#share {
  margin-top: 50px;
}

small.info {
  display: block;
  text-align: center;
  color: var(--color-extralight);
}

@keyframes fadeIn {
  0% { opacity: 0 }
  50% { opacity: 0 }
  100% { opacity: 1 }
}