body {
  --background-color: #ECEFF1;
  --secondary-background-color: #CFD8DC;
  --trinary-background-color: #B0BEC5;
  --foreground-color: #000000;
  --secondary-foreground-color: #424242;

  --info-color: #90caf9;
  --error-color: #f06292;
  --error-color-light: #f48fb1;

  background-color: var(--background-color);
  color: var(--foreground-color);
  margin: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
}

#mainwrapper {
  height: 100%;
  width: 100%;
  flex: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  box-sizing: border-box;
}

#upload_form {
  width: 100%;
  max-width: 500px;
}
#upload_form form {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 8px;
}

#upload_input {
  width: 100%;
  padding: 20px 0px;
}
#upload_button {
  width: 100%;
}
#upload_checkbox {
  display: flex;
  align-self: start;
}
#upload_checkbox > input {
  margin: 16px;
}

#options {
  padding: 16px 8px;
}


@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes slide { from { bottom: 0px; } to { bottom: -100%; } }

#flash_wrapper {
  position: fixed;
  bottom: 0px;
  width: 100%;
  animation: slide cubic-bezier(0.4, 0, 0.2, 1) 1;
  animation-fill-mode: forwards;
  animation-delay: 4s;
  animation-duration: 1s;
  pointer-events: none;
}

.flash {
  width: 100%;
  padding: 16px 32px;
}
.flash > p {
  margin: 0px;
}
.flash {
  background-color: var(--info-color);
}

@keyframes pulse {
  0% { background-color: var(--error-color); }
  20% { background-color: var(--error-color-light); }
  100% { background-color: var(--error-color); }
}
.flash.error {
  background-color: var(--error-color);
  animation: pulse ease 2;
  animation-fill-mode: backwards;
  animation-duration: 0.5s;
}

.codeblock {
  background-color: var(--secondary-background-color);
  color: var(--secondary-foreground-color);
  font-family: 'Roboto Mono', monospace;
  padding: 8px 16px;
  box-sizing: border-box;
}

a.nostyle:link {
  text-decoration: inherit;
  color: inherit;
}
a.nostyle:visited {
  text-decoration: inherit;
  color: inherit;
}
button.nostyle {
  border: none;
  background: transparent;
}

@media only screen and (max-width: 780px) {
  body {
    flex-direction: column;
  }
}