.loader {
  flex: none;
  left: 0px;
  height: 4px;
  width: 0px;
  margin-left: 0;
  box-shadow: 0 4px 0 0 inset var(--color-primary);
}

.loaderAnimation {
  animation: loaderKeyframes 10s ease-out infinite 0.25s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

@keyframes loaderKeyframes {
  from {
    margin-left: 0;
    width: 0px;
  }

  49% {
    margin-left: 0;
    width: 100%;
  }
  50% {
    margin-left: auto;
    width: 100%;
  }

  to {
    margin-left: auto;
    width: 0px;
  }
}

:root {
  --color-palette-10: white;
  --color-palette-20: rgb(239, 241, 245);
  --color-palette-30: rgb(159, 167, 187);
  --color-palette-40: rgb(112, 118, 133);
  --color-palette-50: rgb(65, 71, 86);
  --color-palette-70: rgb(23, 27, 41);
  --color-palette-90: rgb(16, 16, 19);

  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;

  --color-primary: var(--color-palette-50);
  --color-weak: var(--color-palette-40);
  --color-strong: var(--color-palette-70);
  --color-background: white;
  --color-background-alt: var(--color-palette-20);
  --color-contrast: white;
  --color-background-input: white;
  --color-border: var(--color-strong);
  --color-accent: rgb(14, 131, 108);
  --color-warning: rgb(211, 14, 0); /*rgb(176, 225, 0);*/

  --logo: url('./icon-transparent-512.png');
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--color-palette-30);
    --color-weak: var(--color-palette-50);
    --color-strong: white;
    --color-background: var(--color-palette-70);
    --color-background-alt: var(--color-palette-90);
    --color-contrast: var(--color-palette-70);
    --color-background-input: var(--color-palette-90);
    --color-border: var(--color-weak);
    --color-accent: rgb(131, 219, 202);
    --color-warning: rgb(253, 80, 80); /*rgb(200, 255, 0)*/

    --logo: url('./icon-transparent-inverse-512.png');
  }
}

body,
#root {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
    Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: var(--color-primary, rgb(65, 71, 86));
  background-color: var(--color-background, white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100%;
}

.bg {
  background-color: var(--color-background);
}

.bg-emphasis {
  background-color: var(--color-background-input);
}

.logo {
  background-image: var(--logo);
}

.b--weak {
  border-color: var(--color-weak, rgb(65, 71, 86));
}

.helvetica {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
    Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-weight: 200;
}

/* Normalize buttons */
button,
select {
  text-transform: none;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  line-height: 1;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  white-space: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* background: transparent; */
  /* background-clip: border-box; */

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  appearance: none;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

a,
.link {
  text-decoration: none;
  color: var(--color-accent, rgb(14, 131, 108));
  font-weight: 300;
  user-select: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  height: fit-content;
}

a:hover,
a:focus,
.link:hover,
.link:focus,
.link:focus-within {
  box-shadow: 0 -2px 0 0 inset var(--color-accent);
  outline: none;
}

.link-icon:hover,
.link-icon:focus,
.link-icon:focus-within {
  box-shadow: 0 0 0 2px inset var(--color-accent);
  outline: none;
  border-radius: 50%;
}

.bump-right {
  margin-left: auto;
}

.button {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-contrast);
  padding: var(--spacing-small);
  border-radius: 0.25rem;
  border: none;
  box-sizing: border-box;
  /* font-size: 1rem; */
  line-height: 1;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
    Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-weight: 300;
  height: max-content;
  user-select: none;
}

.button.warning {
  background-color: var(--color-warning);
  color: var(--color-contrast);
}

.button.warning:hover,
.button.warning:focus {
  /* background-color: var(--color-warning); */
  color: var(--color-contrast);
}

@media (prefers-color-scheme: dark) {
  .button.warning {
    background-color: var(--color-warning);
    color: var(--color-contrast);
  }
}

.file-input:hover + .button,
.file-input:focus + .button,
.button:hover,
.button:focus,
.button:active {
  background-color: var(--color-strong);
}

.button[disabled] {
  background-color: var(--color-palette-40);
  cursor: no-drop;
}

.file-input:focus + .button,
.button:focus {
  box-shadow: 0 2px 0 0 var(--color-accent);
  outline: rgb(131, 219, 202);
}

.button + .button {
  margin-left: var(--spacing-small);
}

.button-group .button {
  background: transparent;
  color: var(--color-primary);
  border-radius: 0;
  border-top: 2px solid transparent;
}

.button-group .button[data-selected='true'] {
  border-top: 2px solid var(--color-primary);
}

.button-group .button:hover,
.button-group .button:focus {
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 1px 0 0 inset var(--color-accent);
  color: var(--color-accent);
}

.select_container {
  position: relative;
  color: inherit;
}

.select_container:after,
.select_container:before {
  position: absolute;
  content: '';
  display: block;
  right: 0.5rem;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  pointer-events: none;
}

.select_container:before {
  border-bottom: 5px solid var(--color-primary);
  top: calc(0.875rem - 6px);
}

.select_container:after {
  border-top: 5px solid var(--color-primary);
  bottom: calc(0.875rem - 6px);
}

.select_container .select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
}

.select {
  height: calc(1.875rem + 2px);
  width: 100%;
  border: 1px solid var(--color-border, black);
  border-radius: 0.25rem;
  background-color: var(--color-background-input, transparent);
  color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input,
input[type='password'],
input[type='text'],
input[type='email'],
input[type='number'],
textarea {
  background-color: var(--color-background-input, transparent);
  border-color: var(--color-border, black);
}

input.touched:invalid {
  border-color: var(--color-warning, red);
  box-shadow: 0 0 0 2px var(--color-warning, red);
}

input:focus:invalid {
  border-color: var(--color-border, black);
  box-shadow: none;
}

/* label.required::before {
  display: inline-block;
  content: '*';
  color: var(--color-warning);
  padding-right: var(--spacing-extra-small);
} */

/* input:autofill,
input:-webkit-autofill {
  background: black;
  border: inherit;
  color: inherit;
} */

.image {
  max-height: calc(100vh - 100px);
  object-fit: scale-down;
}

.image-upload {
  max-height: calc(100vh - 200px);
}

.cover {
  background-size: cover;
  object-fit: cover;
}

.pull-ma1 {
  margin: calc(var(--spacing-extra-small, 0.25rem) * -1);
}

.assistive-text {
  position: absolute !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

nav a,
nav .link {
  padding: var(--spacing-small);
}

.last-image {
  color: var(--color-accent);
}

.last-image::before,
.last-image::after {
  display: inline-flex;
  content: '';
  height: 0.75rem;
  width: auto;
  box-shadow: 0 1px 0 0 var(--color-accent);
  flex: 1 1 auto;
  margin: 0 1rem;
}

.meta {
  color: var(--color-weak);
}

/* 

img {
  max-width: 100%;
}

nav {
  width: 100%;
  background: #108db8;
}

nav a {
  color: white;
  padding: 1rem;
  display: inline-block;
}



.content {
  padding: 1rem;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} */

.loading {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-background);
  opacity: 0.5;
}

.menu {
  transition: height 0.5s ease;
}

.menu.open {
  height: 56px;
}

.menu.close {
  height: 0px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.5rem 0.5rem;
  place-items: center;
  grid-auto-flow: row;
}

.error {
  color: var(--color-warning, red);
}