@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono.ttf') format('truetype');
}

:root {
  /*BRAND COLOURS */
  --brand-primary: #1fb6b2;
  --brand-secondary: #f5a623;
  --brand-bg-dark: #1e1e1e;
  --brand-bg-light: #f6f7f8;
  --brand-fg-dark: #243447;
  --brand-fg-light: #f6f7f8;
  --brand-heading-font: 'IBM Plex Sans', system-ui, sans-serif;
  --brand-font-body: 'Source Sans 3', system-ui, sans-serif;
  --brand-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.start-screen {
  min-width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 20px;
  font-family: var(--brand-font-body);
}
.start-screen-title {
  position: fixed;
  top: 20px;
  left: 80px;
  display: none;
  font-family: var(--brand-heading-font);
  font-weight: 400;             /* small caps friendly */
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}
[class*=tile-] {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
.tiles-group {
  margin-left: 0;
  margin-top: 50px;
}
@media all and (min-width: 768px) {
  .start-screen-title {
    display: block;
  }
  .start-screen {
    padding: 140px 80px 0 0;
  }
  .tiles-group {
    left: 100px;
  }
  .tiles-group {
    margin-left: 80px;
  }
}

.pwaContent{
    height: 100%;
    width: 100%;
}

.pwaContent div:first-child{
    height: calc(100% - 6px);
}

.gl-orange-tile{
	background-color: #f5a623 !important;
}

.gl-cyan-tile{
	background-color: #1fb6b2 !important;
}

.gl-orange-tile .icon{
	max-width: 75%;
	height: 75%;
	top: 40%;
}

.gl-cyan-tile .icon{
	max-width: 75%;
	height: 75%;
	top: 40%;
}