@font-face {
  font-family: "Schoolbell";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/schoolbell.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Schoolbell", sans-serif;
}

@keyframes fadeInSpotlight {
  to {
    opacity: 1;
  }
}

html,
body {
  --pencil-cursor: url("data:image/png;base64,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")
      4 4,
    auto;
  --cursor: url("/assets/img/fcursor.png") 4 4, auto;
  cursor: var(--cursor);
}

body {
  font-family: Schoolbell, sans-serif;
  letter-spacing: 0.7;
}

.navbar {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #36454f;
  border-radius: 8px;
  width: calc(100% - 24px);
  height: 45px;
  padding: 0 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: bold;
  margin-right: 64px;
}

.navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: bold;
}

.navbar-title a {
  color: #22333b;
}

.scene {
  font-family: Play, sans-serif;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 720px;
  height: 480px;
}

.window {
  border-radius: 4px;
  border: 1px solid #363636;
  width: 488px;
  height: 344px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
}

.window-nav {
  margin: -1px -1px 0 -1px;
  background: #2d2d2d;
  height: 28px;
  border-radius: 4px 4px 0px 0px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  display: flex;
}

.method-name {
  padding-top: 2px;
  padding-left: 8px;
  display: flex;
  align-items: stretch;
  height: 100%;
  background: white;
  font-size: 16px;
}

.method-parameter {
  padding-left: 5px;
  padding-right: 20px;
  background: #dedede;
  margin-left: 5px;
  border-top-left-radius: 4px;
  height: 100%;
}

.method-type {
  color: #7289da;
  font-weight: bold;
}

.playground-editor {
  border-radius: 4px;
  border: 1px solid #363636;
  background: #1a1a1a;
  color: white;
  max-height: 700px;
  overflow-y: scroll;

  padding: 0 4px;
  position: fixed;
  top: 20;
  right: 4;
  z-index: 9999;
}

/* .playground-editor code {
  max-width: 400px;
  overflow-x: scroll;
  display: block;
  padding: 4px 0;
  border-bottom: 1px solid #363636;
} */

.playground-highlight {
  position: fixed;
  pointer-events: none;
  padding: 1px;
  outline: 2px solid cornflowerblue;
  z-index: 9998;
}

.labeled {
  position: relative;
}

.label {
  position: absolute;
  background: cornflowerblue;
  color: white;
  padding: 0 8px;
  top: 100%;
  left: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.debug {
  font-size: 14px;
  background: #d9d9d9;
  margin: 42px 0 0 24px;
  width: fit-content;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  height: 18px;
  width: 18px;
}

.debug-button {
  background: none;
  outline: none;
  border: 0;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 2px;
  border-radius: 4px;
}

.debug-value {
  background: #d9d9d9;
  width: fit-content;
  border-radius: 4px;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-left: 64px;
  margin-top: 64px;
  color: #7289da;
  border: 2px solid #7289da;
}