@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

* {
  margin: 0;
  padding: 0;
}

h1,
h2,
button,
select {
  color: #cccccc;
  font-family: 'Titillium Web', sans-serif;
}

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
}

body {
  padding: 40pt;
  background-color: #2a2a2a;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto;
  row-gap: 20pt;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto;
  gap: 20pt;
  max-width: 100%;
  overflow: hidden;
}

#output-header-wrapper {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#editor {
  grid-column: 1;
  grid-row: 2;
}

#output {
  grid-column: 2;
  grid-row: 2;
}

#editor,
#output {
  border: 1px solid #6c6c6c;
}

#toolbar {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  column-gap: 10pt;
}

#button-run,
#dropdown-examples {
  font-size: 1.1rem;
  height: 32pt;
  border: none;
}

#button-run {
  box-sizing: border-box;
  background-color: #276da7;
}

#button-run:hover {
  background-color: #3880ba;
}

#button-run:active {
  background-color: rgb(99, 163, 216);
}

#dropdown-examples {
  background-color: #1f1f1f;
  border: 1px solid #6c6c6c;
  padding-left: 8pt;
}

#dropdown-examples:hover {
  background-color: rgb(50, 50, 50);
}

#editor,
#output,
#button-run,
#dropdown-examples {
  border-radius: 4px;
  overflow: hidden;
}