:root {
  --hi-background: #1d1a1f;
  --background: #080509;

  --hi-text: #cc9a30;
  --med-text: #a57f2c;
  --lo-text: #7c5f20;

  /* --hi-clickable: #a51053; */
  --hi-clickable: #b2135b;
  --lo-clickable: #870e44;
}

code
{
  background: var(--hi-background);
  color: var(--med-text);
  padding: 5px;
  margin: 5px;
}

.nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.material-symbols-outlined {
  font-size: initial;
}

body
{
  background: var(--background);
  color: var(--lo-text);
  font-family: Nunito, sans;
}

a
{
  color: var(--lo-text);
  text-decoration: underline double var(--hi-clickable);
}

h1
{
  color: var(--hi-text);
}

h2,
h3
{
  color: var(--med-text);
}

h1
{
  margin-bottom: 0.25em;
}

.text-tiny
{
  font-size: 0.75rem;
}

.pad-right-5
{
  padding-right: 5px;
}

.pad-right-10
{
  padding-right: 10px;
}

.tagline
{
  position: absolute;
  top: 25px;
  left: 120px;
  color: var(--med-text);
}

p
{
  max-width: 760px;
}

ul
{
  padding: 0;
  margin: 0;
}


#examples-nav,
#main-nav
{
  display: flex;
}

#examples-nav div,
#main-nav div,
#examples-nav a,
#main-nav a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 10px;
  padding: 10px;

  border-bottom: 2px solid var(--lo-clickable);
}

#examples-nav div:hover,
#main-nav div:hover,
#examples-nav a:hover,
#main-nav a:hover
{
  color: var(--hi-text);
  border-bottom: 2px solid var(--hi-clickable);
}


.cm-editor
{
  height: 600px;
  border: 1px solid var(--hi-text);
}

.editor-wrapper
{
  width: 50%;
}

#editors-container
{
  display: flex;
}

#output-editor
{
  margin-left: 1%;
}

.output-label,
#metaprogramming-button
{
  cursor: pointer;
  display: flex;
  width: 80%;
  height: 30px;

  margin: 25px 0 25px 8%;
  /* margin-bottom: 25px; */
  /* margin-left: 8%; */

  border: 2px solid var(--lo-clickable);
  border-radius: 5px;

  justify-content: center;
  align-items: center;
}

.output-label
{
  border: 2px solid var(--background);
}


#metaprogramming-button:hover
{
  color: var(--hi-text);
  border: 2px solid var(--hi-clickable);
}