@import 'bulma-prefixed.min.css';

:root {
  --my-theme-50: hsl(185, 58%, 96%);
  --my-theme-100: hsl(182, 55%, 90%);
  --my-theme-200: hsl(185, 53%, 82%);
  --my-theme-300: hsl(186, 53%, 69%);
  --my-theme-400: hsl(186, 49%, 53%);
  --my-theme-500: hsl(187, 54%, 45%);
  --my-theme-600: hsl(190, 52%, 36%);
  --my-theme-700: hsl(191, 47%, 31%);
  --my-theme-800: hsl(193, 39%, 27%);
  --my-theme-900: hsl(195, 36%, 24%);
  --my-theme-950: hsl(196, 45%, 15%);

  --bulma-link-text: var(--my-theme-100);

  --bulma-text: var(--my-theme-300);
  --bulma-border: var(--my-theme-300);

  /* for the select */
  --bulma-arrow-color: var(--my-theme-300);
  --bulma-link-h: 186deg;
  --bulma-link-l: 90%;
}

.bulma-select select {
  background-color: inherit;
  color: var(--my-theme-100);
  border-color: var(--my-theme-300);
}

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

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

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

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

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

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

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

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

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

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

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

a[href] {
  text-decoration: underline;
}

body,
html {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Verdana;
  /* color: #f8f8f8; */
  /* background: #111; */
}

/* @media (prefers-color-scheme: light) {
  body {
    color: #111;
    background-color: #eee;
  }
} */

/* @media (prefers-color-scheme: dark) { */
body {
  color: var(--bulma-text);
  background-color: #111;
}
/* } */

.border {
  border: 1px solid var(--bulma-border);
}

h1 img {
  vertical-align: baseline;
}

.sidebar {
  line-height: 25px;
  flex-direction: column;
  justify-content: space-between;

  font-size: 90%;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-130%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-left {
  animation: slideInLeft 0.3s 0.5s ease-out 1 both;
}

@keyframes slideInRight {
  from {
    transform: translate3d(130%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-right {
  animation: slideInRight 0.3s 0.5s ease-out 1 both;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 130%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-up {
  animation: slideInUp 0.3s 0.5s ease-out 1 both;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -130%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-down {
  animation: slideInDown 0.3s 0.5s ease-out 1 both;
}

.controls {
  display: flex;
  justify-content: space-between;
}

h1 {
  font-size: 160%;
  font-weight: 400;
}

section {
  margin-bottom: 20px;
}

:disabled {
  opacity: 0.5;
}

a {
  color: #fff;
}

canvas {
  width: 100%;
  height: 100%;
}

canvas.dragging {
  opacity: 0.7;
}

canvas:focus {
  outline: 0;
}

.file-info {
  text-align: center;
  font-size: smaller;
  width: 220px;
  color: var(--bulma-text);
}

output {
  font-size: 90%;
  color: grey;
}

/* @media (prefers-color-scheme: light) { */
output {
  color: #d9d9d9;
}
/* } */

.flex {
  display: flex;
}

.just-between {
  justify-content: space-between;
}

select {
  min-width: 190px;
}

.text-center {
  text-align: center;
}

footer {
  text-align: center;
  padding-bottom: 10px;
}

.wrapper {
  flex-grow: 1;
}

[v-cloak] {
  opacity: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.absolute {
  position: absolute;
}

.right {
  right: 0;
}

.bottom {
  bottom: 0;
}

.widget {
  position: absolute;
  border-radius: 5px;
  margin: 10px;
  transform: translateZ(0);
  animation-delay: 2000ms;
}

.widget > img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.lil-gui {
  right: 10px !important;
}

.stats {
  position: absolute !important;
  right: -80px !important;
  left: unset !important;
}

.glass {
  backdrop-filter: blur(5px);
  background-color: hsla(196, 45%, 15%, 0.5);
}

.is-size-8 {
  font-size: 0.6rem !important;
}

.widget.right.bottom {
  max-width: 25vw;
}