body {
  background: #f2f2f2;
  color: #111;
  font-family: "Courier New", monospace;
  margin: 0;
  padding: 40px;
}

/* container */
.terminal {
  max-width: 800px;
}

/* header */
.header {
  font-size: 12px;
  margin-bottom: 40px;
  opacity: 0.6;
}

/* list */
.item {
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* hover */
.item:hover::before {
  content: ">";
  margin-right: 10px;
}
.item:hover {
  background: rgba(0,0,0,0.05);
}

.back {
  display: inline-block;
  margin-bottom: 40px;

  text-decoration: none;
  color: black;

  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.5;
}

.back:hover {
  opacity: 1;
}

@media (max-width: 768px) {

  body {
    padding: 20px;
    background: #f2f2f2;
    font-family: 'Courier New', Courier, monospace;
  }

  .terminal {
    width: 100%;
  }

  .header {
    font-size: 10px;
    margin-bottom: 30px;
  }

  .item {
    font-size: 16px;
    margin: 12px 0;
  }

  .item:active {
    opacity: 0.5;
    transform: translateX(5px);
  }

  .back {
    margin-top: 40px;
  }

}