html,
body {
  background-color: #eee;
  color: #3d4b60;
  font-family: "Open Sans", Arial, sans-serif;
  margin: 0;
}

p {
  margin: 1em;
}

.container {
  max-width: 75rem;
  padding: 2em 1.5rem;
  margin: 0 auto;
}


/* List View */
.app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
  margin-top: 2em;
}

.app-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  padding: 3rem 1.5rem 1.5rem 1.5rem;
  border: none;
  border-radius: 1em;
  background-color: #fff;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0,0,0,.1);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .25s ease,
    background-color .3s ease,
    color .25s ease;
}
.app-item:hover {
  background-color: #4299e1;
  color: #fff;
  transform: translate3d(0,-2px, 0);
}
.app-item::after {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='20' fill='white' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M5 3l14 9-14 9V3z'></path></svg>");
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  margin: 1.25rem;
}

.app-item .app-alias {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.app-item .app-name {
  opacity: .75;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* Run View */
.form-output {
  height: 100vh;
}