html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(68, 157, 209, 0.7)), to(#449dd1)), url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=");
  background: linear-gradient(rgba(68, 157, 209, 0.7), #449dd1), url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=");
  background-size: cover;
  color: #0a2342;
  font-family: 'Droid Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7rem; }

a:link,
a:visited {
  color: #ee4266;
  font-weight: bold;
  text-decoration: none; }

a:hover,
a:active {
  text-decoration: underline; }

.button {
  background-color: #fff;
  border: 1px solid #ee4266;
  border-radius: 2px;
  color: #ee4266;
  cursor: pointer;
  font-weight: bold;
  outline: none;
  padding: .4rem .5rem;
  -webkit-transition: all .2s;
  transition: all .2s; }

.button:hover,
.button:focus {
  background-color: #ee4266;
  border-color: #f2718c;
  color: #fff;
  text-decoration: none; }

.button:active {
  background-color: #b91134;
  text-decoration: none; }

.github,
.github:link,
.github:visited {
  border-color: #00bfb2;
  color: #00bfb2; }

.github:hover,
.github:focus {
  background-color: #00bfb2;
  border-color: #00f2e2;
  color: #fff; }

.github:active {
  background-color: #008c82; }

.container {
  margin: 1rem auto;
  position: relative;
  width: calc(768px - 2rem); }
  @media (max-width: 768px) {
    .container {
      margin: 1rem 0;
      width: 100%; } }

main {
  padding: 1rem; }

section {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 1rem;
  padding: 1rem; }
  section small {
    color: #1b5eb1; }

header {
  font-family: 'Droid Serif', serif;
  font-size: 1.3rem;
  line-height: 1.3rem;
  margin-bottom: .6rem;
  text-align: center; }

.me {
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 2rem;
  margin: 1rem;
  text-align: center; }
  .me img {
    border-radius: 15px;
    margin-top: 1rem; }

.center {
  text-align: center; }

.work div {
  margin: 0 auto;
  width: calc(768px - 4rem); }
  @media (max-width: 768px) {
    .work div {
      width: 100%; } }

.posts {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0; }
  @media (max-width: 768px) {
    .posts {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }
  .posts article {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 32%;
            flex: 0 0 32%;
    position: relative; }
    @media (max-width: 768px) {
      .posts article {
        margin-bottom: 1rem; }
        .posts article:last-of-type {
          margin-bottom: 0; } }
    .posts article header {
      background-color: #573d82;
      border-bottom: 1px solid #c0b1da;
      border-top-left-radius: 15px;
      color: #efefef;
      line-height: 1.5rem;
      padding: 1rem;
      padding-bottom: .2rem; }
      .posts article header small {
        color: #efefef;
        font-size: .9rem;
        font-weight: bold; }
    .posts article div {
      padding: 0 1rem 2.5rem; }
    .posts article footer {
      bottom: 1rem;
      position: absolute;
      right: 1rem; }

.project {
  border-radius: 15px;
  padding: 0; }
  .project::after {
    clear: both;
    content: ' ';
    display: table; }
  .project .image-wrapper {
    border: 1px solid #00bfb2;
    float: left;
    height: 255px;
    overflow: hidden;
    width: 400px; }
    @media (max-width: 768px) {
      .project .image-wrapper {
        float: none;
        position: relative;
        width: 100%; } }
  .project .right {
    float: right; }
    @media (max-width: 768px) {
      .project .right {
        float: none; } }
  .project img {
    height: 255px;
    max-width: 400px;
    min-width: 400px;
    -webkit-transition: all .5s;
    transition: all .5s; }
    @media (max-width: 768px) {
      .project img {
        height: auto;
        max-width: unset;
        min-height: 100%;
        min-width: unset;
        width: 100%; } }
  .project img:hover {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }
    @media (max-width: 768px) {
      .project img:hover {
        -webkit-transform: scale(1.5);
                transform: scale(1.5); } }
  .project .details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 255px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .project .details header {
      background-color: #573d82;
      border-bottom: 1px solid #c0b1da;
      color: #efefef;
      padding: .7rem; }
    .project .details .description {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 6rem;
              flex: 1 0 6rem; }
    .project .details div {
      padding: 0 1rem 1rem; }
  .project .buttons {
    height: auto; }