Personal-Website/css/style.css

.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
  padding: 0;
  margin: 0;
  text-indent: 0; }

/*
 * Covers for projects section
 */
#sierra {
  background-image: url("../images/ChuckNew.jpg"); }

#virtualKeyality {
  background-image: url("../images/keyality.jpg"); }

#ohack16 {
  background-image: url("../images/ohackscreenshot.png");
  background-size: contain; }

/*
 * sections
 */
body {
  font-family: serif;
  font-size: 1em;
  line-height: 1.6; }

#top {
  padding-top: 10px;
  width: 100%;
  position: fixed;
  background: black;
  z-index: 999; }
  #top div {
    margin: auto;
    max-width: 800px; }
  #top h2 {
    font-weight: normal; }

#mast {
  margin-top: 10px;
  background: none;
  line-height: 1.2;
  color: white; }
  #mast a {
    color: white;
    font-style: italic; }
  #mast a:hover {
    color: #ed1a76; }
  #mast .sub {
    font-style: italic;
    color: #ccc; }
  #mast img {
    transition-duration: .2s; }
  #mast h2 {
    transition-property: size;
    transition-duration: .2s; }

.small .hideable {
  display: none;
  opacity: 0; }

.small img {
  max-width: 200px; }

.small h2 {
  font-size: 1em; }

.large img {
  width: 100%;
  max-width: 380px; }

.large .hideable {
  opacity: 1; }

.nojs body {
  background: white; }

.nojs #mast {
  background: black; }

/*
 * standalone elements
 */
.slide {
  padding: 0px;
  width: 100%;
  /* width wrapping */ }
  .slide div {
    max-width: 800px;
    margin: auto;
    /* Project bits */ }
    .slide div .project {
      width: 390px;
      padding: 0 0 1em 0;
      border: 1px solid #aaa;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 1px 1px 4px #888;
      background: white; }
      .slide div .project .cover {
        height: 15em;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0px;
        padding: 1em; }
      .slide div .project .details {
        padding: 1em 1em 0 1em; }
        .slide div .project .details h2 {
          line-height: 1;
          margin: 0 0 .5em 0; }
        .slide div .project .details p {
          margin: 0 0 .5em 0; }
        .slide div .project .details .tag {
          float: left;
          padding: 0 .3em 0 .3em;
          background: #eee;
          border: 1px solid #ccc;
          margin: .2em;
          border-radius: 5px; }
        .slide div .project .details .cat {
          background: #B7EEFF;
          border: 1px solid #8AC9DD; }
        .slide div .project .details .award {
          float: right;
          background: none;
          border: none;
          margin: 0 0 .5em .5em; }
          .slide div .project .details .award div {
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            padding: 0; }
            .slide div .project .details .award div h3 {
              margin: 0;
              padding: 0;
              font-size: 1.4em;
              line-height: 1;
              font-weight: normal;
              font-style: italic; }
            .slide div .project .details .award div p {
              font-size: .8em; }
        .slide div .project .details .award::before {
          vertical-align: middle;
          background-image: url(../images/laurelleft.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          display: inline-block;
          content: "";
          width: 1.6em;
          height: 3em;
          position: relative;
          left: .09em; }
        .slide div .project .details .award::after {
          vertical-align: middle;
          background-image: url(../images/laurelright.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          display: inline-block;
          content: "";
          width: 1.6em;
          height: 3em;
          position: relative;
          right: .11em; }
  .slide table {
    line-height: 1.3;
    margin: 0;
    padding: 2px;
    border-spacing: 0;
    border-collapse: collapse;
    vertical-align: text-top; }
  .slide ul {
    margin: 5px; }
  .slide p {
    text-indent: 2em;
    max-width: 800px;
    margin: auto; }
  .slide h1 {
    font-size: 2em;
    font-style: italic;
    max-width: 800px;
    margin: auto;
    margin-top: 1.7em; }
  .slide h4 {
    max-width: 800px;
    margin: auto; }
  @media (max-width: 800px) {
    .slide div .project {
      width: 90%;
      float: none;
      display: block;
      margin: 0 0 .5em 5%; }
    .slide p,
    .slide h1,
    .slide h2,
    .slide a {
      margin-right: .8em;
      margin-left: .8em; } }

@media (max-width: 800px) {
  #mast {
    padding-left: 1em; } }

h2 {
  font-style: italic; }

a {
  transition-duration: .2s; }