body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #211;
    color: #cbb;
}
header {
    background: #fed700;
    color: #000;
}
quote {
}
h1, h2, h3 {
    font-family: 'Chakra Petch', sans-serif;
    text-align: center;
}
a {
    text-decoration: none;
}
kbd {
    vertical-align: text-top;
    box-shadow: 0 2px #a99, inset -1px -1px 0 2px #e6dddd;
    background: #f6f2f2;
    border-radius: 5px;
    margin: 0 0.4ch;
    padding: 0.4ch 0.8em;
    font: 600 0.9em monospace;
}
.logo {
    background: #211;
    border-radius: 10px;
}
.container {
    margin: auto;
}
.apps {
    display: grid;
    grid-template: repeat(3, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
    gap: 2vw;
    padding: 1vw;
    box-sizing: border-box;
}
.app a {
    color: #fff;
}
.app:hover {
    color: #ffcd00;
    background: #433;
}
.app {
    padding: 5px;
    background: #211;
    color: #cbb;
}
.app-icon {
  display: block;
  width: 100%;
  object-fit: contain;
}
.app-name {
  font-family: 'Chakra Petch', sans-serif;
  text-align: center;
  font-size: 14px;
  padding: 5px 0;
}

@media (min-width: 980px) {
    .container {
        width: 980px;
    }
    .apps {
        grid-template: repeat(3, minmax(0, 1fr)) / repeat(5, minmax(0, 1fr));
    }
}