@font-face {
    font-family: 'LCARS';
    src: url('./fonts/lcarsgtj3-webfont.eot');
	src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LCARS Lower';
    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LCARS Block';
    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root{
  --space1: 5px;
  --textpadding1: 5px 10px;
  --regText: 'Open Sans', sans-serif;
  --fancyText: 'LCARS', sans-serif;
  --hoverBack: #cdf;
  --hoverText: #821;
  --lcarsFirst: #cc6699;
  --lcarsSecond: #ff9933;
  --lcarsThird: #99ccff;
  --lcarsGrey: #171113;
  --lcarsMid: #241721;
}


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

  font-size:1.4em;
  letter-spacing: 0.05em;
}

h1,h2,h3,h4,h5 {
  letter-spacing: 0.05em;
  font-family: var(--regText);
  text-transform: uppercase;
  margin: 0.5em;
  padding: 0.5em;
}

/* Layout Related */

.mainContainer{
 display: flex;
 flex-direction: row;
}

.left {
  flex: 4;
}

.right {
  flex: 5;
}

/* Other Shit */

.heading {
  margin: 1em;
  font-size: 2em;
}

.course-list {
  margin: 2em;
  border-radius: 0.6em;
  border: 1px solid var(--lcarsMid);
  padding: 1em;
}

.subject {
  font-family: var(--regText);
  text-transform: uppercase;
  font-size: 0.7em;
  color: var(--lcarsSecond);
}

.course-list:hover {
  background: var(--lcarsMid);
  color: var(--hoverBack);
}