html,
body {
  margin: 0;
  height: 100%;
}

/* Header */

.header {
  margin: 0;
  width: calc(100% - 1em);
  height: 4em;
  padding: 0.5em;
  background-color: gray;
  display: flex;
  justify-content: center;
}

.header .center {
  width: calc(100% - 350px);
  display: flex;
  justify-content: center;
  text-align: right;
  align-items: center;
}

.header .right {
  display: flex;
  justify-content: right;
  text-align: right;
  align-items: center;
  color: white;
  width: 350px;
}
#port {
  min-width: 8em;
  margin-left: 1em;
  margin-right: 1em;
}

.header .right span {
  color: white;
}

.header .right input {
  margin-left: 1em;
  margin-right: 1em;
}

.header button {
  margin-right: 1em;
}

.header group.selectors {
  width: 30em;
  display: inline-flex;
  text-align: center;
  vertical-align: center;
}

.header group.selectors div {
  position: relative;
  flex: 1;
}

.header group.selectors input {
  width: 100%;
  height: 3em;
  opacity: 0;
}

.header group.selectors label {
  position: absolute;
  top: 0;
  left: 0;
  color: #b6b6b6;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-right: 1px solid #b6b6b6;
}

.header group.selectors div input:checked + label {
  background: #40a8e4;
  font-weight: 500;
  color: #fff;
}

.header group.selectors div input:hover:checked + label {
  color: #fff;
}

.header group.selectors div input:hover + label {
  color: #40a8e4;
}

/* Buttons */

#run,
#save,
#load {
  background-color: transparent;
  border: none;
}

#run svg {
  fill: white;
}

#run:hover svg {
  fill: #40a8e4;
}

#run:active svg,
#run:disabled svg {
  fill: #4ee23a;
}

#save svg {
  fill: white;
}
#save:hover svg {
  fill: rgb(43, 214, 66);
}

#load .back {
  fill: rgb(32, 67, 71);
  stroke: #fff;
  stroke-width: 1.5px;
}

#load .front {
  fill: white;
}

#load:hover .back {
  fill: rgb(52, 75, 69);
  stroke: rgb(43, 214, 66);
}

#load:hover .front {
  fill: rgb(43, 214, 66);
}

/* Contents */

div.contents {
  width: 100%;
  height: calc(100% - 5em);
  display: flex;
}

/* Console */

.console-area {
  width: 320px;
  height: 100%;
  background-color: #333;
  color: white;
}

.console-area .area-header {
  width: 100%;
  color: white;
  text-align: center;
  height: 1.5em;
  background-color: rgb(21, 17, 59);
}

#console {
  height: calc(100% - 3.5em - 1.5em - 250px);
  overflow-y: scroll;
  padding: 1em;
}

#console p.command {
  color: rgb(232, 243, 170);
  margin-top: 0;
  margin-bottom: 0.3em;
}

#console p.command::before {
  color: rgb(232, 243, 170);
  content: '> ';
}

#console p.stdout {
  color: rgb(78, 206, 99);
}

#console p.stderr {
  color: rgb(206, 78, 110);
}

#console p.warn {
  color: rgb(202, 219, 44);
  font-weight: bold;
}

#console p.warn::before {
  color: rgb(202, 219, 44);
  font-weight: bold;
  content: '⚠';
}

#console p.error {
  color: rgb(206, 78, 78);
  font-weight: bold;
}

#console p.error::before {
  color: rgb(206, 78, 78);
  font-weight: bold;
  content: '🚫';
}

#console p.log {
  color: rgb(93, 93, 93);
}

/* Blockly, C++ Code Area */

.code-area {
  width: calc(100% - 300px);
  background-color: white;
  position: relative;
}

.code-container {
  position: absolute;
  background-color: white;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#cpp-area {
  overflow-y: scroll;
  display: none;
}

#cpp-area pre {
  margin-left: 1em;
}
