html body
  font-family: 'Source Serif Pro', sans-serif

.list 
  text-align: left
  padding-left: 4rem


.list h2 
  border-top: 1px solid #eee
  padding-top: 1rem


.list h3 
  color: #999


.list-ul 
  list-style: none
  margin: 0
  padding: 0
  padding-bottom: 4rem


@media (min-width: 768px) 
  .list h3 
    float: left
    margin-top: 1.5rem
  

  .list-ul 
    padding-left: 7rem    
  


.list-ul li 
  padding: 1rem


.list-ul .list-date 
  font-weight: normal
  padding-left: 0.6rem
  padding-right: 0.6rem
  color: white
  background-color: var(--accent)
  border-radius: 2rem
  margin-top: 1.5rem
  float: left  


.list-ul div 
  margin-left: 60px


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover 
  background-color: white !important
  border-color: var(--accent) !important


/** commento specific **/
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
.commento-root .commento-round-check input[type=radio]:checked+label:before 
  background: var(--accent) !important
  border: 1px solid var(--accent) !important


.commento-root .commento-markdown-help tr td pre 
  padding: 0 !important


.commento-button 
  color: white !important
  background: var(--accent) !important


.commento-google-button:before 
   content: "\f1a0"
   font-family: FontAwesome
   display: inline-block
   padding-right: 3px
   vertical-align: middle

.commento-github-button:before 
   content: "\f09b"
   font-family: FontAwesome
   display: inline-block
   padding-right: 3px
   vertical-align: middle

.commento-twitter-button:before 
   content: "\f099"
   font-family: FontAwesome
   display: inline-block
   padding-right: 3px
   vertical-align: middle


.commento-oauth-buttons button 
  width: auto !important


.commento-root a,
.commento-email-button 
  color: var(--accent) !important


.commento-name 
  font-size: 14pt !important    


.commento-root .commento-card .commento-body p,
.commento-root textarea 
  font-size: 12pt !important  


.commento-root *,
.commento-root-font * 
  font-family: 'Source Serif Pro', sans-serif !important
  line-height: 1.7 !important
  color: #333
  text-align: left !important


/** index.html **/

ul 
  list-style: circle


div.highlight 
  padding-top: 1.5rem
  padding-bottom: 1.5rem


.text-justify img 
  display: block
  margin-left: auto
  margin-right: auto
  border: 1px solid #ccc !important
  border-radius: 4px
  margin-top: 1.5em
  margin-bottom: 1.5em


figure img 
  margin-bottom: 0


figure 
  margin-bottom: 1.5em !important


figure figcaption 
  margin-top: 1rem !important  


figure figcaption h4, figure figcaption p 
  text-align: center
  margin-top: 0 !important
  font-size: 1.7rem !important 
  font-style: italic
  font-weight: normal
  color: #aaa


.avatar-container 
  width: 50px
  margin-left: 45px

.avatar-container  .avatar-img-border 
  width: 100%
  border-radius: 50%
  margin-left: -50%
  display: inline-block
  box-shadow: 0 0 8px rgba(0, 0, 0, .8)
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8)
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8)

.avatar-container  .avatar-img 
  width: 100%
  border-radius: 50%
  display: block


.intro .freshly-baked 
  visibility: hidden


.intro 
  margin-top: -150px


@media only screen and (min-width: 500px) 
  .intro .freshly-baked 
    visibility: visible
  


@media only screen and (min-width: 768px) 
  .intro 
    margin-top: -40px
  

  .avatar-container 
    width: 100px
  
  
  .avatar-container  .avatar-img-border 
    width: 100%
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
  
  
  .avatar-container  .avatar-img 
    width: 100%
  


/** general **/

main, blockquote 
  font-size: 14pt !important
  line-height: 1.7


nav 
  font-family: 'Open Sans', sans-serif !important
  font-size: 14px !important
  line-height: 1.4 !important


h1, h2, h3, h4, h5, h6 
  line-height: 1.8 !important
  font-weight: bold !important


h2 
  font-size: 26pt !important


h3 
  font-size: 22pt !important


h4 
  font-size: 16pt !important


h5 
 font-size: 14pt !important 


h4 a 
  font-weight: normal


pre 
  font-size: 12pt !important


@media (max-width: 767px) 
  main, blockquote 
    font-size: 12pt !important
  
  h2 
    font-size: 24pt !important
  

  h3 
    font-size: 20pt !important
  

  h4 
    font-size: 14pt !important
  

  h5 
    font-size: 13pt !important 
  

  pre 
    font-size: 10pt !important
  


/* -- voor 20'+ breedbeeldschermen */
@media only screen and (min-width: 1600px) 
  main 
    max-width: 930px !important
	

  .big-img .container 
    height: 250px !important
  


/* -- voor fatsoenlijke schermen */
@media only screen and (min-width: 768px) 
  /* indien header image, hoogte vergroten */
  .big-img .container 
    height: 200px
  


blockquote 
  color: #888 !important
  border-left: 5px solid var(--accent) !important


main 
	padding-top: 0 !important


main .text-justify p 
  margin: 0 0 20px !important


main .text-justify blockquote p 
  margin: 0 !important


a:link, a:visited 
    color: var(--accent) !important


.big-img 
  background: no-repeat center center
  -webkit-background-size: cover
  -moz-background-size: cover
  background-size: cover
  -o-background-size: cover

  border-top: 2px solid lightgray
  border-bottom: 1px solid var(--accent)


.item-tag 
    color: var(--accent)
    background-color: white !important
    border: 1px solid var(--accent)
    font-size: 1.3rem



/* --- goodreads widget styles --- */
.goodreadswidget 
  border-bottom: 3px solid var(--accent)
  padding: 0px
  padding-bottom: 10px


.goodreadswidget h2 
  visibility: hidden
  display: none


.goodreadswidget .gr_grid_branding 
  padding-right: 20px
  font-size: 14pt !important


@media (min-width: 768px) 
  .gr_grid_book_container 
    height: 600px !important
  


.gr_grid_book_container 
  float: left
  width: 25%
  height: 300px
  padding: 5px
  overflow: hidden


.gr_grid_book_container img 
  width: 100%
  height: 100%


.gr_grid_book_container:hover img 
    opacity: 0.3


.gr_grid_book_container img:hover 
  background: rgba(100, 100, 100, 0.7)