* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: normal normal normal 1.2em 'Courier New', Courier, monospace;
  min-height: 100vh;
  height: 100vh;
  background-color: #a5a5ff;
}

.c64-wrapper {
  border: 0;
  padding: 60px;
}

.c64-wrapper .c64 {
  border: 0;
  height: calc(100vh - 120px);
  padding: 20px 40px;
  color: #a5a5ff;
  background-color: #4242E7;
  overflow: auto;
}

.c64-wrapper .header {
  text-align: center;
  vertical-align: top;
  height: 5em;
}

.c64-wrapper .body {
  /*
  potentially set height:
  height: calc(100vh - 140px -5em);
   */
}

.c64-wrapper .cursor {
  border-right: .6em solid #a5a5ff;
  animation: blink-cursor .75s step-end infinite;
}

@keyframes blink-cursor {
  from, to { border-color: transparent; }
  50% { border-color: #a5a5ff; }
}