* 
  box-sizing: border-box

html, body
  height: 100%
  min-height: 600px

body
  background-color: #222224
  background-image: linear-gradient(#17191f,#252a35)
  height: 100%
  font-family:  'roboto','helvetica neue', arial, sans-serif

.carousel 
  position: relative
  width: 600px
  height: 400px
  overflow: hidden
  margin: 0 auto
  box-shadow: 0 2px 6px rgba(0,0,0,0.3)
  
  &:hover
    .slide:after,
    .counter,
    .slide:before
      opacity: 1

.slide 
  float: right
  position: absolute
  z-index: 1
  width: 600px
  height: 400px
  background-color: #eee
  text-align: center
  transition: opacity 0.4s
  opacity: 1

  &:before
    content: attr(annot)
    display: block
    position: absolute
    left: 20px
    bottom: 20px
    color: rgba(255,255,255,0.9)
    font-size: 14px
    font-weight: 300
    z-index: 12
    opacity: 0
    transition: opacity 0.3s
    text-shadow: 0 0 1px black
  
  &:after
    content: attr(slide)
    display: block
    position: absolute
    bottom: 0
    transition: opacity 0.3s
    width: 100%
    height: 80px
    opacity: 0
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5))
    text-align: left
    text-indent: 549px
    line-height: 101px
    font-size: 13px
    color: rgba(255,255,255,0.9)
    text-shadow: 0 0 1px black

.counter
  position: absolute
  bottom: 20px
  right: 1px
  height: 20px
  width: 60px
  z-index: 2
  text-align: center
  color: #fff
  line-height: 21px
  font-size: 13px
  opacity: 0
  transition: opacity 0.3s

.faux-ui-facia 
  top: 0
  right: 0
  float: right
  position: absolute
  margin-top:0
  z-index: 9
  height: 100%
  width: 100%
  opacity: 0
  cursor: pointer
  
  &:checked 
    z-index: 8
  
    + .slide 
      opacity: 0

    &:nth-child(1):checked
      z-index: 9
    
  &:nth-child(1):checked
    float: left
    z-index: 9
    
    + .slide
        opacity: 1
    
    ~ .faux-ui-facia
      float: left
      z-index: 8

      + .slide
        opacity: 0
      
      &:checked
        z-index: 9

        + .slide
          opacity: 1


/* --- Intro text --- */
.intro
  padding: 80px 0 60px 0
  text-align: center
  color: #fff
  margin: auto
  width: 800px

  .intro__title 
    font-weight: 200
    font-size: 32px
    color: #fff

  .intro__body
    color: #fff
    font-size: 16px
    line-height: 24px
    font-weight: 300
    opacity: 0.48
    padding: 0 160px
    margin: 0

/* --- About Me Card --- */

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}