menu-height: 50px;
windows-cursor: url('data:image/x-icon;base64,AAACAAEAICACAAIABAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAHAAAABwAAAA4AAAAOAAAAHAAAABwAAAQ4AAAGOAAAB3AAAAfwAAAH/4AAB/8AAAf+AAAH/AAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////+P////B////wf///4P///+D///fB///zwf//8YP///CD///wB///8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3/////////////////////////8='), auto;

@font-face {
  font-family: 'Aansa';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.eot?') format('eot'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/aansa.ttf') format('truetype');
}
* {
  box-sizing: border-box;
  cursor: $windows-cursor !important;
}
body, html {
  overflow:hidden;
  font-family: 'Aansa', monospace;
  background-color: #000;
  // font-family: monospace;
}

a:visited{
    text-decoration: none;
    color: white;
    }

.screen {
  height: 100vh;
  width: 100vw;
  background-color: teal;
  position: relative;
}
.screen__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.start {
  background-color: #b6bbb7;
  height: $menu-height;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  box-shadow: 0px 0px 0px 2px #f7f9f6, 0px 0px 0px 4px #d5dad6;
  padding: 0 6px;
  display: flex;
  align-items: center;
}

.start__button {
  $button-height: $menu-height - 16px;
  font-size: $button-height;
  height: $button-height;
  display: inline-block;
  line-height: 1.25em;
  padding: 4px;
  box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #000, -1px -1px 0px 1px #fff;
  vertical-align: middle;
  user-select: none;
  cursor: default;
  
  &:active {
    box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #fff, -1px -1px 0px 1px #000;
  }
}

.start__icon {
  transform: translateY(-20%);
}

.box {
  height: 25px;
  width: 25px;
  background-color: red;
  cursor: $windows-cursor !important;
}

.icon {
  height: 52px;
  width: 52px;
  background-size: cover, calc(100% - 4px);
  background-position: 50%, 2px 2px;
  position: relative;
  background-repeat: no-repeat;
}
.icon__text {
  position: absolute;
  bottom: -1em;
  padding: 0.2em;
  padding-top: 0.8em;
  line-height: 0;
  left: 50%;
  transform: translateX(-50%);
}

.icon--left {
  top: 30%;
  left: 30%;
}
.icon--right {
  top: 40%;
  left: 70%;
}

.icon--highlight {
  .icon__text {
    background-color: rgba(0, 0, 255, 0.2);
  }
}

.icon--calendar {
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png');
  .icon__text {
    left: 55%;
  }
  &.icon--highlight {
    background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/calendar-48.png');
  }

.hide {
  pointer-events: none;
  opacity: 0;
}