* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #fdfaf0;
  color: #000000;
  font: normal 400 20px EB Garamond, serif;
  margin: 0;
}

a {
  color: #a93e33;
  text-decoration: none;
}

/** Note: Since we have a fixed sized header, we can't just use the ID
    attribute on elements to target them for the links on our header, or else
    the browser will scroll down and 'cut off' part of the <H3> title element;
    instead, we use a non-visual <a> anchor tag and scroll to that. */
a.title-anchor {
  display: block;
  position: relative;
  top: -40px;
  visibility: hidden;
}

h3.title {
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase;
  font: normal 500 18px Montserrat, sans-serif;
  margin-top: 5em;
  margin-bottom: 1em;
}

.picture-of-me {
  border-radius: 50%;
  float: right;
  margin: 0.4em 1em 1em 1em;
}

p.follows-title {
  margin-top: 0;
}

.rss-box .rss-title {
  display: none;
}

.rss-box .rss-items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.rss-box li.rss-item {
  margin-top: 0.35em;
}

.rss-box a.rss-item {
  color: #2c1d14;
  text-decoration: none;
  background: transparent;
  font: normal 500 17px EB Garamond, serif;
  text-transform: uppercase;
}

.rss-box .rss-date {
  position: relative;
  top: -0.5em;
  color: rgba(0, 0, 0, 0.54);
  font: normal 400 12px Montserrat, sans-serif;
}

.rss-box .rss-item > div {
  display: none;
}


/* Mobile Phones */

body.small-screen {
  padding: 0.7em 1em;
  font-size: 18px;
  line-height: 1.5em;
}

.small-screen header h1 {
  font: normal 400 28px EB Garamond, serif;
  color: #2c1d14;
  text-transform: uppercase;
  margin: 0.5em 0 0.1em 0;
}

.small-screen header h2 {
  margin: 0 0 1em 0;
  color: rgba(0, 0, 0, 0.54);
  text-transform: uppercase;
  font: normal 500 18px Montserrat, sans-serif;
}

.small-screen header a:nth-of-type(1) {
  padding-top: 0.8em;
}

.small-screen header a {
  display: block;
  font-size: 20px;
  margin-top: 0.3em;
}

.small-screen h3.title:nth-of-type(1) {
  margin-top: 66px;
}

.small-screen h3.title {
  font-size: 20px;
}

.small-screen p,
.small-screen .twitter-timeline,
.small-screen .rss-box {
  margin-left: 0.3em;
}

/** The project carousel doesn't look good on mobile phones, so we have a simploer
    StretchText based project portfolio for mobild devices. */

.small-screen .slider .content > .learn-more,
.small-screen .slider-nav {
  display: none;
}

.small-screen .slider {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.small-screen .slider .content img.expanded {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid LightGray;
}

.small-screen .slider > div {
  margin-bottom: 4em;
}

.small-screen .slider .content .project-title-container {
  margin: 0;
  padding: 0.5em 0 0 0.5em;
  text-align: center;
}

.small-screen .slider .content .project-title-container h2 {
  margin: 0;
  color: #2c1d14;
  font: normal 500 18px EB Garamond, serif;
  text-transform: uppercase;
}

.small-screen .slider .content .project-title-container h3 {
  margin: 0.2em 0 0 0;
  color: rgba(0, 0, 0, 0.54);
  font: normal 400 14px Montserrat, sans-serif;
}

.small-screen .slider .content p {
  margin-top: 0.6em;
  font-size: 18px;
  line-height: 1.7em;
}

.small-screen .slider .content p .learn-more {
  padding-left: 0.2em;
  text-decoration: underline;
}

.small-screen .rss-box li.rss-item {
  margin-top: 1.2em;
}

.small-screen .rss-item a {
  font-size: 18px;
}

.small-screen .rss-item .rss-date {
  top: 0;
  font-size: 14px;
}

/* Laptops/Desktops/Tablets */

body.large-screen {
  padding: 0.5em 2.5em;
}

.large-screen header {
  position: fixed;
}

.large-screen header {
  display: block;
  left: 0;
  right: 0;
  top: 0;
  width: auto;
  z-index: 50;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: #fdfaf0;
  height: 48px;
}

.large-screen header .centered-top {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2.5em;  
}

.large-screen header .website-name {
  margin: 0;
  flex: 1 1 auto;
  order: 2;
  -webkit-box-flex: 1;
  min-width: 0;
  overflow: hidden;
}

.large-screen header .website-name h1 {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font: normal 400 24px EB Garamond, serif;
  color: #2c1d14;
  margin: 0;
  text-transform: uppercase;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  /** Note: the 32px is a hack in order to have the Coding in Paradise title
      line up and not be off by one pixel vs. the Blogger template */
  height: 32px;
}

.large-screen header .website-name h2 {
  display: none;
}

.large-screen header a {
  font: normal 400 14px Montserrat, sans-serif;
  line-height: 48px;
  outline: 0;
  display: inline-block;
  margin: 0;
  padding-left: 2.5em;
  text-align: right;
  text-transform: uppercase;
  word-break: normal;
  flex: 0 0 auto;
  -webkit-box-flex: 0;
}

.large-screen header .selected-projects-link {
  order: 3;
}

.large-screen header .about-me-link {
  order: 4;
}

.large-screen header .recent-blog-posts-link {
  order: 5;
}

.large-screen header .recent-twitter-posts-link {
  order: 6;
}

.large-screen header .other-link {
  order: 7;
}

.large-screen h3.title:nth-of-type(1) {
  margin-top: 66px;
}

.large-screen p,
.large-screen .twitter-timeline,
.large-screen .rss-box {
  margin-left: 1em;
}

/** Hide elements that have to do with our smaller mobile view. */

.large-screen .slider .content .thumbnail,
.large-screen .slider .content .stretchsummary {
  display: none;
}

.large-screen .slider .content p .stretchdetail {
  display: inline;
  background-color: transparent;
  margin-left: inherit;
  transition: none;
  opacity: 1;
}

/** Style the carousel. */

.large-screen .slider {
  /* Wait until everything is initialized by JS to avoid a flash of unstyled content. */
  visibility: hidden;
}

.large-screen .slick-prev,
.large-screen .slick-next {
  width: 60px;
  height: 60px;
  z-index: 1000;
}

.large-screen .slick-prev:before,
.large-screen .slick-next:before {
  color: black;
  font-size: 60px;
}

.large-screen .slick-next {
  right: 5px;
}

.large-screen .slick-details {
  margin-bottom: 10px;
}

.large-screen .slider-details .slick-slide.slick-current {
  outline: none;
}

.large-screen .slider-details .slick-slide {
  /**
    Make sure we have enough padding so that the drop shadow on .content doesn't get cut off
    on the top and bottom.
  */
  padding-top: 15px;
  padding-bottom: 25px;
}

.large-screen .slider-details .content {
  margin: auto;
  display: block;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19)
}

.large-screen .slider-details .text-details {
  margin: 40px 46px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.large-screen .slider-details .text-details h2 {
  margin: 0;
  padding: 0;
  font-size: 23.4px;
}

.large-screen .slider-details .text-details h3 {
  font-size: 16px;
  color: gray;
  font-weight: lighter;
  margin: 0.1em 0 0.5em 0;
  padding: 0;
}

.large-screen .slider-details .text-details p {
  margin: 0;
  font-size: 20px;
}

.large-screen .slider-details .content {
  height: 400px;
}

.large-screen .slider-details .content img {
  opacity: 0.15;
}

.large-screen .slider-details .content .learn-more {
  position: absolute;
  display: inline-block;
  bottom: 75px;
  left: 0;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.large-screen .slider-details .content .learn-more:focus {
  outline: none;
}

.large-screen .slider-details #details-virtualtelescope {
  width: 610px;
}

.large-screen .slider-details #details-autocalibration {
  width: 711px;
}

.large-screen .slider-details #details-autoocr {
  width: 684px;
}

.large-screen .slider-details #details-docscanner-ocr {
  width: 800px;
}

.large-screen .slider-details #details-coworking {
  width: 800px;
}

.large-screen .slider-details #details-cloudless {
  width: 601px;
}

.large-screen .slider-details #details-personal-photos-model {
  width: 605px;
}

/* Give some more room for the text on the Inkling Habitat card. */
.large-screen .slider-details #details-inkling-habitat {
  /*width: 601px;*/
  width: 800px;
}

.large-screen .slider-details #details-inkling-habitat img.expanded {
  width: 100%;
  overflow: hidden;
  height: inherit;
}

.large-screen .slider-details #details-hyperscope {
  width: 764px;
}

.large-screen .slider-details #details-html5 {
  width: 800px;
}

.large-screen .slider-details #details-html5 img.expanded {
  opacity: 0.06;
}

.large-screen .slider-details #details-svgweb {
  width: 800px;
}

.large-screen .slider-details #details-stretch-text {
  width: 640px;
}

.large-screen .slider-details #details-stretch-text img.expanded {
  opacity: 0.06;
}

.large-screen .slider-details #details-open-library {
  width: 735px;
}

.large-screen .slider-details #details-paper-airplane {
  width: 667px;
}

.large-screen .slider-details #details-rojo {
  width: 762px;
}

.large-screen .slider-nav * {
  outline: none;
}

.large-screen .slider-nav .slick-dots {
  bottom: -40px;
}

.large-screen .slider-nav .slick-slide {
  cursor: pointer;
  margin-right: 1em;
}

.large-screen .slider-nav .img-container {
  height: 135px;
  min-height: 135px;
  position: relative;
}

.large-screen .slider-nav .slick-slide img {
  width: 200px;
  max-width: 200px;
  border: 1px solid LightGray;
  padding: 1%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.large-screen .slider-nav .slick-slide h3 {
  color: rgba(0, 0, 0, 0.54);
  margin-top: 0.3em;
  margin-bottom: 0;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding: 0;
  text-align: center;
  font-size: 18px;
}


/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)  {
  /* The carousel navigation thumbnails get crowded, add some extra space. */
  .large-screen .slider-nav .slick-slide .img-container img {
    width: 90%;
  }

  .large-screen .slider-details .content {
    overflow: hidden;
    width: 650px;
    max-width: 650px;
  }

  .large-screen .slider-details .text-details p {
    font-size: 17px;
  }
}