:root {
  /* CSS HEX */
  --tea-green: #deefb7ff;
  --celadon: #98dfafff;
  --caribbean-current: #00635dff;
  --space-cadet: #251f47ff;
  --dark-purple: #260f26ff;

  /* CSS HSL */
  --tea-green: hsla(78, 64%, 83%, 1);
  --celadon: hsla(139, 53%, 74%, 1);
  --caribbean-current: hsla(176, 100%, 19%, 1);
  --space-cadet: hsla(249, 39%, 20%, 1);
  --dark-purple: hsla(300, 43%, 10%, 1);
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: DejaVuSansMono;
  src: url("./fonts/DejaVuSansMono.ttf");
}
* {
  font-family: DejaVuSansMono;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.flex-row > * {
  flex-grow: 2;
}
.frameeditor {
  width: 200px;
  height: min-content;
  overflow: hidden;
  margin: 4px;
}
.floatingui {
  position: fixed;
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - 20px);
  height: fit-content;
  padding: 5px;
  padding-top: 30px;
  background-color: var(--caribbean-current);
  box-shadow: 0 0 8px
    color-mix(
      in hsl shorter hue,
      var(--caribbean-current) 80%,
      blue 20%
    );
  border-radius: 5px;
}
.half-w {
  width: 50%;
}
/* 
.frame-title {
  position: absolute;
  box-sizing: border-box;
  border: 10px solid gray;
} */
.frame {
  position: absolute;
  box-sizing: border-box;
  border: 10px solid var(--caribbean-current);
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
}
.hide {
  display: none;
}

#dragarea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0000;
  z-index: 40;
}

/*  */
body,
html {
  background-color: var(--dark-purple);
  /* width: 500vw;
  height: 500vh; */
}
button,
input {
  background-color: var(--celadon);
  border-color: var(--tea-green);
}

.framebuttons{
  border: 4px solid var(--dark-purple);
  border-radius: 5px
}