/**
 * Reset basic elements
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
figure,
img {
  margin: 0;
  padding: 0;
  text-align: left;
}

html,
body,
div {
  box-sizing: border-box;
}

img {
  display: block;
}

img.square {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

img.thumbnail {
  width: 100%;
  max-width: 300px;
}

img.full-width {
  width: 100%;
  max-width: 100%;
}

/**
 * Basic styling
 */
body {
  font-size: 20px;
  font-family: "Titillium Web", sans-serif;
  font-weight: 300;
  line-height: 1.6rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  border: 0;
  color: #1E1E1E;
  background-color: #fcfcfc;
}

h1,
h2,
h3 {
  font-weight: 300;
}

h1 {
  font-size: 8rem;
  line-height: 6rem;
}

h2 {
  font-size: 2rem;
  line-height: 3rem;
  padding-top: 1rem;
}

h3 {
  font-size: 20px;
  line-height: 1.6rem;
}

a {
  text-decoration: none;
  color: #fcfcfc;
  background-color: #1E1E1E;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 2px;
}

p {
  padding-bottom: 1rem;
}

p.no-title {
  padding-top: 1rem;
}

/**
* Reusable Classes 
*/
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}

.grid-item:nth-child(odd) {
  grid-column: 1/span 6;
}

.grid-item:nth-child(even) {
  grid-column: 7/span 6;
}

.image-frame img {
  width: 100%;
}

.background-black {
  background-color: #1E1E1E;
  color: #fcfcfc;
}

.background-white {
  background-color: #1E1E1E;
  color: #fcfcfc;
}

.padding-large {
  padding: 50px;
}

.small-font {
  font-size: 0.8rem;
  line-height: 1rem;
}

.hidden {
  display: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/**
 * Header and Navigation bar
 */
.header {
  width: 100%;
  height: 80px;
  background-color: #fcfcfc;
  color: #1E1E1E;
}

.header .content {
  max-width: 1390px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.header .content .title {
  font-size: 2rem;
  line-height: 80px;
}

.header .content .title a {
  background: none;
  color: #1E1E1E;
}

.header .content nav {
  flex-grow: 1;
  text-align: right;
}

.header .content nav a {
  font-size: 0.8rem;
  line-height: 2rem;
  text-decoration: underline;
  background: none;
  color: #1E1E1E;
}

.header .content nav a.nodecoration {
  text-decoration: none;
}

.header.black {
  background-color: #1E1E1E;
  color: #fcfcfc;
  height: 2rem;
}

.header.black .content .title a {
  color: #fcfcfc;
}

.header.black .content nav a {
  color: #fcfcfc;
}

.header.black .content .title {
  font-size: 0.8rem;
  line-height: 2rem;
}

/**
* About
*/
.about {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 0.8rem;
  line-height: 1rem;
}

.about h2 {
  padding-top: 0;
}

.about a {
  text-decoration: underline;
  color: #1E1E1E;
  background: none;
  padding: 0;
  border: 0;
}

.about .grid .logo {
  grid-column: 3/span 8;
  margin-bottom: 15px;
}

.about .grid-item {
  grid-column: 3/span 4;
}

.about .grid-item.right {
  grid-column: 7/span 4;
}

/**
* Notes
 */
.notes {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.notes a {
  padding: 0;
  color: #1E1E1E;
  background: none;
}

.notes .content a {
  text-decoration: underline;
}

.notes .contents {
  font-size: 0.8rem;
  line-height: 1rem;
}

.notes .contents ul {
  list-style: none;
}

.notes .contents h3 {
  display: inline;
  font-size: 0.8rem;
  line-height: 1rem;
  font-weight: 600;
}

.notes .contents a {
  text-decoration: none;
}

.notes .contents a:hover {
  text-decoration: underline;
}

/**
* Archive
*/
.archive {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 0.8rem;
  line-height: 1rem;
}

.archive .menu {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.archive .menu a {
  background-color: #fcfcfc;
  color: #1E1E1E;
  text-decoration: overline;
}

.archive .menu a:hover {
  cursor: pointer;
  text-decoration: overline;
}

.archive h3 {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1rem;
}

.archive a {
  text-decoration: none;
  color: #1E1E1E;
  padding: 0;
  border: 0;
}

.archive a:hover {
  text-decoration: underline;
}

.archive .grid .logo {
  grid-column: 3/span 8;
  margin-bottom: 15px;
}

.archive .grid-item:nth-child(odd) {
  grid-column: 3/span 4;
}

.archive .grid-item:nth-child(even) {
  grid-column: 7/span 4;
}

.archive .grid-item:nth-child(odd) h3,
.archive .grid-item:nth-child(odd) p {
  text-align: right;
}

.archive .grid-item:nth-child(even) h3,
.archive .grid-item:nth-child(even) p {
  text-align: left;
}

/**
* Footer
*/
section.footer {
  margin-top: 80px;
  margin-bottom: 15px;
}

section.footer p {
  font-size: 0.8rem;
  text-align: center;
}

section.footer a {
  background-color: #fcfcfc;
  color: #1E1E1E;
  border: 0;
}

/**
 * Default (blog-post) article
 */
article {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

article p img {
  max-width: 100%;
}

article ol.references {
  font-size: 0.8rem;
}

article p img.full-spaced {
  padding-top: 5px;
}

article section.title h2 {
  font-weight: 600;
}

article section.title h2 span {
  font-weight: 300;
}

article.blog section {
  padding-left: 15px;
  padding-right: 15px;
}

/**
 * blog-photo article
 */
article.blog-photo {
  max-width: 1390px;
  margin-top: 0;
}

article.blog-photo img {
  display: block;
}

article.blog-photo img.pad {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

article.blog-photo p {
  padding: 0;
}

article.blog-photo p.square-text-above {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

article.blog-photo p.square-text-below {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/**
 * photography article
 */
article.photography {
  max-width: 100%;
}

article.photography p {
  padding-bottom: 0;
}

article.photography section.introduction {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 0.8rem;
  line-height: 0.8rem;
  text-align: right;
}

article.photography section.introduction p {
  text-align: right;
}

article.photography section.gallery-masonry {
  columns: 4 300px;
  column-gap: 0;
  margin: 5px;
}

article.photography section.gallery-masonry .image-frame {
  width: 100%;
  display: block;
  padding: 0;
  padding: 5px;
}

/**
 * music article
 */
article.music {
  max-width: 100%;
}

article.music p {
  padding-bottom: 0;
}

article.music a {
  color: inherit;
  background-color: inherit;
  padding: 0;
  border-radius: 0;
}

article.music nav a.selected {
  background-color: #1E1E1E;
}

article.music nav a {
  text-decoration: none;
  color: #fcfcfc;
  background-color: #8d8d8d;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 2px;
  cursor: pointer;
}

article.music section.title {
  margin-left: 5px;
  padding-left: 5px;
  margin-right: 5px;
  padding-right: 5px;
}

article.music section.title p {
  font-size: 0.8rem;
  line-height: 0.8rem;
  text-align: right;
}

article.music section.title.albums-title h2 {
  display: inline;
}

article.music section.title.albums-title div {
  display: inline;
}

article.music section.title.albums-title div a {
  text-decoration: underline;
  padding-left: 5px;
  font-size: 0.8rem;
  line-height: 0.8rem;
}

article.music section.music-masonry {
  columns: 8 150px;
  column-gap: 0;
  grid-auto-flow: column;
  margin: 5px;
}

article.music section.music-masonry .image-frame {
  width: 100%;
  display: block;
  padding: 0;
  padding: 5px;
  position: relative;
}

article.music section.music-masonry .image-frame .description {
  position: absolute;
  bottom: 0;
  left: 5px;
  padding-right: 5px;
  z-index: 100;
  background-color: #fcfcfc;
}

article.music section.music-alphabetic h2 {
  margin-left: 5px;
  padding-left: 5px;
  margin-right: 5px;
  padding-right: 5px;
  padding-top: 0;
}

article.music section.music-alphabetic .album {
  margin-left: 5px;
  padding-left: 5px;
  margin-right: 5px;
  padding-right: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  margin-top: 5px;
  padding-top: 5px;
  display: flex;
}

article.music section.music-alphabetic .image-frame {
  width: 150px;
  min-width: 150px;
  margin-right: 5px;
}

article.music section.music-alphabetic .description {
  margin-left: 5px;
}

/**
 * Gallery
 */
ul.gallery {
  list-style-type: none;
  column-count: 3;
  column-gap: 5px;
  padding-top: 0;
  background-color: #1E1E1E;
  padding-left: 5px;
  padding-right: 5px;
}

ul.gallery li {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 0;
  break-inside: avoid;
  padding-top: 5px;
}

ul.gallery li img {
  width: 100%;
}

@media (max-width: 800px) {
  ul.gallery {
    column-count: 1;
    column-gap: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (max-width: 620px) {
  .header {
    height: 2rem;
  }
  .header .content .title {
    font-size: 0.8rem;
    line-height: 2rem;
  }
  .archive .grid {
    column-gap: 15px;
    row-gap: 0;
  }
  .archive .grid-item:nth-child(odd) {
    grid-column: 3/span 8;
  }
  .archive .grid-item:nth-child(even) {
    grid-column: 3/span 8;
  }
  .archive .grid-item:nth-child(odd) h3,
  .archive .grid-item:nth-child(odd) p {
    text-align: left;
  }
  .archive .grid-item:nth-child(even) h3,
  .archive .grid-item:nth-child(even) p {
    text-align: left;
  }
  .about .grid-item {
    grid-column: 3/span 8;
    text-align: left;
  }
  .about .grid-item.right {
    grid-column: 3/span 8;
  }
  article.photography section.gallery-masonry {
    columns: 1;
    column-gap: 0;
    margin: 0;
  }
  article.photography section.gallery-masonry .image-frame {
    padding: 0;
  }
}

/*# sourceMappingURL=main.9.1.0.css.map */