:root {
  --bg-primary: #efeaee;
  --bg-secondary: #fffaff;
  --bg-highlight: #cfcacc;

  --font-primary: #2f2a22;
}

@font-face {
  font-family: "Facade-Ouest";
  src:
    url("../assets/fonts/Facade-Ouest.otf") format("opentype"),
    url("../assets/fonts/Facade-Ouest.woff") format("woff");
}

body {
  font-family: "IBM Plex Mono", monospace;

  margin: 32px 16px;
  padding: none;

  background-color: var(--bg-primary);
  color: var(--font-primary);
}

#wrapper {
  display: flex;
  gap: 32px;
}

.region-container {
  display: flex;
  flex-direction: column;

  border: 2px solid var(--font-primary);
  padding: 16px;

  gap: 8px;

  width: 640px;
  height: 822px;
}

.region-title {
  margin: 0;
  margin-bottom: 4px;
}

.region-subtitle {
  margin: 0 0 8px 0;
}

#editor-docs-button {
  width: 32px;
  height: 32px;
}

#editor-examples {
  background-color: var(--bg-secondary);
  border: 2px solid var(--font-primary);

  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 14px;

  width: 240px;
  height: 36px;
}

#editor-examples:hover {
  cursor: pointer;
  background-color: var(--bg-highlight);
}

#editor-code-editor {
  resize: none;

  margin: 0;
  padding: 8px;

  border: 2px solid;

  font-size: 14px;
}

#region-header {
  display: flex;
  flex-direction: row;
  align-items: center;

  height: 40px;

  gap: 24px;
}

#region-button-container {
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 8px;
  margin-bottom: 8px;
}

.region-button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid var(--font-primary);
  background-color: var(--bg-secondary);

  padding: 0;

  width: 36px;
  height: 36px;
}

.region-button:hover {
  cursor: pointer;
  background-color: var(--bg-highlight);
}

#runner-canvas {
  width: 640px;
  height: 480px;

  margin-bottom: 16px;

  border: 2px solid var(--font-primary);
  background-color: var(--bg-secondary);
}

#runner-console {
  resize: none;

  padding: 8px;

  border: 2px solid var(--font-primary);
  color: var(--font-primary);
  background-color: var(--bg-secondary);

  font-size: 14px;

  width: 624px;
  height: 256px;
}

.credits-dialog-header {
  margin: 0;
  text-align: center;
}

.credits-dialog-subheader {
  margin: 0;
}

#credits-dialog-form {
  display: flex;
  justify-content: center;
}

#credits-dialog-button {
  width: 200px;
}