index.scss

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  // font-weight: 100;
  src: url(https://fonts.gstatic.com/s/lexend/v19/wlptgwvFAVdoq2_F94zlCfv0bz1WCzsWzLdneg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;

  font: 14px "Raleway", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  color: #f1f1f1;

  min-width: 230px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-weight: 300;

  background-color: #111111;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 48px;
  padding-bottom: 10px;
  font-family: "Lexend", sans-serif;
  width: 100%;
  font-weight: 100;
  text-align: center;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.cheatsheet {
  font-size: 26px;
  padding: 10px;
  font-family: "Lexend", sans-serif;
  font-weight: 200;
  line-height: 1.6em;
}

a {
  color: #F1F2F3;
  text-decoration: none;
}

a:hover {
  color: #04AA6D;
}

a:visted {
  color: #F1F2F3;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 64px;
  padding-bottom: 20px;
  font-family: "Lexend", sans-serif;
  width: 100%;
  font-weight: 100;
  text-align: center;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}


.cellule {
  display: inline-block;
  border: 1px solid #cccccc;
}

.pane {
  flex: 1;
  border: 2px solid #3f3f3f;
  padding: 2% 5%;
  height: 100%;
}

.cells {
  margin: auto;
  line-height: 0;
}

.editor {
  margin: auto;
  height: 100%;
}

.code-editor {
  transition-duration: 0.2s;
  text-align: left;
  font-size: 25px;
  border: 2px solid #111111;
  height: 60%;
}

.controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  align-items: center;
  text-align: center;
  font-size: 36px;
  font-family: "Raleway", sans-serif; //sans-serif if raleway does not exist
}

.button {
  background-color: #f1f1f1;
  border: 2px solid #111111;
  height: 50px;
  width: 100%;
  padding: 5px;
  font-size: 16px;
}

.button:hover{
  background-color: #04AA6D;
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  align-items: center;
  text-align: center;
  font-size: 36px;
  font-family: "Raleway", sans-serif; //sans-serif if raleway does not exist
}

.nav-button {
  border: none;
  height: 50px;
  width: 95%;
  font-size: 24px;
}

.nav-button:hover{
  border: 2px solid black;
}

.selected{
  border: 4px solid black;
}

.editor-height {
  height: 100%;
}

.A {
  background-color: #F1F2F3;
}

.B {
  background-color: #00FFFF;
}

.C {
  background-color: #98FF98;
}

.D {
  background-color: #FAF884;
}

.E {
  background-color: #FFF44F;
}

.F {
  background-color: #FFDAB9;
}

.G {
  background-color: #FF7F50;
}

.H {
  background-color: #FF6B6B
}

.I {
  background-color: #E6E6FA;
}

.J {
  background-color: #C8A2C8
}

.K {
  background-color: #87CEEB;
}

.L {
  background-color: #4169E1;
}

.M {
  background-color: #4B0082;
}

.N {
  background-color: #708090;
}

.O {
  background-color: #36454F;
}

.P {
  background-color: #001F1F;
}