protospace-lcars/dist/css/main.css

:root{
  --space1: 4%;
  --textpadding1: 2% 4% 2% 4%;
  --regText: 'Open Sans', sans-serif;
  --fancyText: 'Orbitron', sans-serif;
  --hoverBack: #cdf;
  --hoverText: #821;
}

html, body{
  margin:0;
  padding:0;
  background:#111;
  color:#fff;
  font-family: var(--fancyText);

}

.mainContainer{
background:#111;
display: flex;
flex-direction: row;
height:100vh;
}

/* Left Side */

.leftColumn{
  flex:4;
  background:#333;
  display:flex;
  flex-direction: row;
}

.infoLeft{
  flex:6;
  background:#222;
}

.lcarsLeft{
  background:#111;
  flex:4;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.lcarsLeft div{
  margin:var(--space1);
  padding:var(--textpadding1);
}

.lcarsLeft div:hover{
  background:var(--hoverBack);
  color:var(--hoverText);
}

.lcarsLeftItem{
  flex:1;
  background:#99ccff;
}
.lcarsLeftItemBig{
  flex:4;
  background:#cc6699;
}
.lcarsLeftItemMed{
  flex:2;
  background:#ff9933;
}

/* Right Side */

.rightContainer{
  flex:10;
  background: #111;
  display:flex;
  flex-direction: column;
}

.rightTop{
  flex: 3;
  background:#222;
}

.rightBottom{
  flex: 6;
  background:#333;
}