/************
* variables *
************/
html, body, p {
  margin: 0;
  padding: 0;
  font-family: Comfortaa, Sans-Serif;
}

body ul, body li {
  padding: 0;
  margin: 0;
  list-style: none;
}
body #grid {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
@media screen and (max-width: 800px) {
  body #grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
  }
}
body #grid a {
  text-decoration: none;
  transition: filter 1s;
}
body #grid a:hover {
  filter: invert(1);
}
body #grid .box {
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  body #grid .box {
    font-size: 1rem;
  }
}
body #grid .group-h {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}
body #grid .group-v {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0px, 1fr));
}
body #grid #rowan {
  grid-column: 3/span 2;
  grid-row: 3/span 1;
  background-color: #fff;
  color: #000;
}
@media screen and (max-width: 800px) {
  body #grid #rowan {
    grid-column: 1/span 2;
    grid-row: 1/span 1;
  }
}
body #grid #webdev {
  grid-column: span 2;
  grid-row: span 1;
  background-color: #6E4155;
}
body #grid #sound {
  grid-column: span 1;
  grid-row: span 2;
  background-color: #8a68b9;
}
body #grid #ggw {
  grid-column: span 2;
  grid-row: span 1;
  background-color: #ddff00;
  color: #000;
}
body #grid #romp {
  grid-column: span 1;
  grid-row: span 1;
  background: #ffe url(http://www2.oberlin.edu/stuorg/dromp/assets/graphics/bg.png) 0 0 repeat;
  color: #000;
}
body #grid #pylodon {
  grid-column: span 3;
  grid-row: span 1;
  background-color: #67cc66;
}
body #grid #github {
  grid-column: span 1;
  grid-row: span 2;
  background-color: #24292e;
}
@media screen and (max-width: 800px) {
  body #grid #github {
    grid-column: span 2;
    grid-row: span 1;
  }
}
body #grid #masto {
  grid-column: span 3;
  grid-row: span 2;
}
body #grid #masto #tootcafe {
  grid-column: span 1;
  background-color: #ae91e8;
}
body #grid #masto #socialcoop {
  grid-column: span 1;
  background-color: #37852a;
}
body #grid #masto #cybrespace {
  grid-column: span 1;
  background-color: #C07A90;
}
body #grid #twitter {
  grid-column: span 1;
  grid-row: span 2;
  background-color: #1da1f2;
}
body #grid #blog {
  grid-column: span 2;
  grid-row: span 2;
  background-color: #000;
  color: #fff;
}
body #grid #morris {
  grid-column: span 1;
  grid-row: span 1;
  background-color: #663399;
}
body #grid #keybase {
  grid-column: span 3;
  grid-row: span 1;
  background-color: #33a0ff;
}