@import "./colors.css";

:root {
  --heading-font: "Space Mono", system-ui;
  --body-font: "IBM Plex Sans", system-ui;

  --color-brand: #02ff00;
  --color-brand-muted: rgb(2, 150, 0);

  --padding-horizontal: 90px;

  --page-background: black;
  --page-background-alpha: rgba(0, 0, 0, 0.8);

  --result__background-color: black;
  --result__primary-color: var(--color-brand);
  --result__foreground-color: white;
  --result__muted-color: rgb(165, 165, 165);

  --card-width: 352px;

  --page-width: 1152px;

  --snippets_container-background-unfocused: #171717;
  --snippets_container-background-focused: #0017e9;
  --snippets_container-background: var(
    --snippets_container-background-unfocused
  );
  --snippets_container-muted-color: rgb(153, 153, 153);
}

body {
  color: white;
  margin: 0;

  padding: 0;
  font-family: var(--body-font);
  background-color: var(--page-background);
  color: var(--result__muted-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#reactroot,
#__next,
body,
html {
  height: 100%;
}

.RenderCounter {
  border: 10px solid var(--snippets_container-background-focused);
  margin: 10px;
  padding: 10px;
  animation: flash 0.2s linear;
  animation-fill-mode: forwards;
}

.RenderCounter-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: -10px;
  padding: 10px;
  background-color: #111;
}

.RenderCounter-lastRender,
.RenderCounter-title {
  white-space: nowrap;
  color: rgb(153, 153, 153);
}

@keyframes flash {
  from {
    border-color: var(--snippets_container-background-focused);
  }

  to {
    border-color: var(--snippets_container-background-unfocused);
  }
}

.Button {
  display: block;

  border: 1px solid rgb(20, 180, 0);
  background-color: rgb(2, 150, 0);
  color: white;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  width: fit-content;
  cursor: pointer;
}