@import url(//fonts.googleapis.com/css?family=Oxygen);

body {
  font-family: Oxygen, Arial, Helvetica, sans-serif;
  background: #414657;
  color: #efefef;
  margin: 0;
}

h1 {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 0.25em 0 0.25em 0.5em;
  margin: 0;
  text-align: left;
  line-height: 2em;
  background: #ddc965;
  color: #f5f5f5;
}

h1 a {
  display: block;
  font-size: large;
  line-height: 1em;
  margin-top: -0.5em;
}

h1 a:link,
h1 a:visited,
h1 a:focus {
  border: solid thin #dfbb04;
  background: transparent;
  color: #64350b;
}

h1 a:hover {
  border: solid thin #c2a203;
  background: #64350b;
  color: #dfbb04;
}

h2 {
  color: #e3cb4c;
  cursor: pointer;
}

h2:hover {
  color: green;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  list-style-type: none;
  margin-left: 10px;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 90%;
  padding: 0.25em 0.5em;
  margin: 5px;
  text-align: left;
  line-height: 2.5em;
  border-radius: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a:link,
a:visited,
a:focus {
  background: #aa6f39;
  color: #efefef;
}

a:hover {
  background: #804815;
  color: #f1e8e8;
}

li[class='slide'] > a:before {
  content: '\1F537\0020';
}

li[class='note'] > a:link,
li[class='note'] > a:visited,
li[class='note'] > a:focus {
  background: #21640b;
}

li[class='note'] > a:hover {
  background: #1a4301;
  color: #f1e8e8;
}

li[class='project'] > a:link,
li[class='project'] > a:visited,
li[class='project'] > a:focus {
  background: #0c4272;
}

li[class='project'] > a:hover {
  background: #0d2e4b;
  color: #f1e8e8;
}

li[class='demo'] > a:link,
li[class='demo'] > a:visited,
li[class='demo'] > a:focus {
  background: #9c9200;
}

li[class='demo'] > a:hover {
  background: #6b6401;
  color: #f1e8e8;
}

li[class='exercise'] > a:link,
li[class='exercise'] > a:visited,
li[class='exercise'] > a:focus {
  background: #6e4b00;
}

li[class='exercise'] > a:hover {
  background: #4e3500;
  color: #f1e8e8;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(95vw, 400px));
  grid-auto-rows: minmax(min-content, max-content);
}

.grid-box {
  background: #16162b;
  padding: 0 1em;
  border-radius: 5px;
  margin: 1em;
}

.grid-box.collapsed {
  height: 110px;
}

.grid-box ul.collapsed {
  display: none;
}