* {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
 "Helvetica Neue", sans-serif;
}

h2 {
  text-align: center;
  padding: 10px;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: center;
      align-self: center;
  min-height: 100vh;
  background: #171717;
  color: #dddddd;
}

body .container {
  position: relative;
  max-width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(300px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  -ms-grid-rows: minmax(100px, auto);
      grid-template-rows: minmax(100px, auto);
  margin: 20px;
  grid-auto-flow: dense;
  grid-gap: 20px;
}

body .container .projects {
  border: 1px solid grey;
  padding: 20px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

body .container .projects p {
  color: #707070;
}

body .container .projects p:nth-child(3) {
  color: white;
  margin-bottom: 20px;
}

body .container .projects a {
  text-decoration: none;
  margin-right: 10px;
  padding: 2px 5px;
  outline: none;
  border: none;
  background: #202020;
  border-radius: 5px;
  color: #e0e0e0;
}

body .container .projects:hover {
  background: none;
  background: #0e0e0e;
}

body .container .projects:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
}

body .container .projects:nth-child(2) {
  grid-column: span 1;
  grid-row: span 2;
}

body .container .projects:nth-child(3) {
  grid-column: span 1.5;
  grid-row: span 1.5;
}

body .container .projects:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}

body .container .projects:nth-child(8) {
  grid-column: span 2;
  grid-row: span 1;
}

@media (max-width: 800px) {
  .container {
    -ms-grid-columns: (minmax(50%, 1fr))[auto-fill];
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    -ms-grid-rows: minmax(auto, auto);
        grid-template-rows: minmax(auto, auto);
  }
  .container .projects {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}
/*# sourceMappingURL=projects.css.map */