body {
    background-color: #F4EDE3;
    margin: 0px;
    padding: 0px;
}

div.doge {
    overflow: hidden;
}

textarea {
    font-size: 20px;
    width: 300px;
    height: 200px;
}

button {
    font-weight: bold;
    color: white;
    cursor: pointer;
}
button > * {
  vertical-align: top;
}
button#wow {
    background-image: linear-gradient(to bottom, #000075 0%, #366FFF 100%);
    display: block;
}
button#download {
    background-image: linear-gradient(to bottom, #067000 0%, #58E848 100%);
}
button#imgur {
    background-image: linear-gradient(to bottom, #000000 0%, #7A7A7A 100%);
}

.tips {
    margin-top: 20px;
    font-family: "Arial";
    background-size: 10px;
    color: gray;
}

.tips a {
    color: #4183c4;;
}

footer {
  margin-left: 18px;
}

@font-face {
    font-family: 'doge';
    src: url('/dogeFont.ttf');
}

.share-buttons {
  display: table;
}

.share {
  text-align: center;
  display: inline-block;  
  color: #fff;
  width: 18px;
  height: 18px;
}
  .share.facebook {
    background-color: #305891;
  }
  .share.twitter {
    background-color: #2CA8D2;
  }
  .share.google-plus {
    background-color: #CF4B35;
  }
  .share.tumblr {
    background-color: #37475D;
  }

@media screen and (min-width: 700px) {
  canvas, aside {
    display: inline-block;
    float: left;
    margin-top: 18px;
    margin-left: 18px;
  }
  button {
      height: 30px;
      border-radius: 5px;
      font-size: 18px;
      outline: none;
      display: inline-block;
  }
  button#wow {
      width: 60px;
  }
  button#download {
      width: 200px;
  }
  div.actions {
      margin-top: 8px;
      margin-left: 18px;
  }
  .imgur-logo {
    display: inline;
    height: 23px;
  }
  .imgur-text {
    display: none;
  }
  .share-buttons {
    position: absolute;
    right: 0;
    top: 40%;
  }
  .share {
    display: block;
    padding: 12px;
    cursor: pointer;
  }
  .share:hover {
    text-shadow: 0px 1px 20px #444;
  }
}

@media screen and (max-width: 700px), (device-aspect-ratio: 2/3), (device-aspect-ratio: 40/71) {
    body {
        width: 600px;
    }
    canvas, aside {
        display: block;
        float: none;
    }
    .github-ribbon {
        display: none;
    }
    textarea {
        width: 100%;
        font-size: 40px;
    }
    button {
        width: 100%;
        height: 100px;
        font-size: 40px;
    }
    .tips {
        display: none;
    }
    .imgur-logo {
      display: none;
    }
    .imgur-text {
      display: inline;
    }
    .share-buttons {
      display: none; /* disable sharing on mobile for now */
      width: 100%;
    }
    .share {
      display: table-cell;
      font-size: 30px;
      padding: 40px;
    }
}