@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans+Condensed:300)

*
  margin: 0

body
  font-family: 'Open Sans Condensed', sans-serif


header
  position: fixed 
  top: 0 
  bottom: 0
  height: 50px
  width: 100%
  line-height: 50px
  background-color: rgba(0,0,0,.2)
    
.container
  display: flex
  margin: 0 auto
  flex-flow: row wrap
  max-width: 1000px
    
.logo
  flex: 1 10%
  line-height: 50px
  text-align: center
  font-size: 1.4em  
      
nav
  flex: 1 80%
  font-size: 1.2em
    
  & ul
    display: flex
        
  & ul li
    list-style-type: none
    flex: 1
    text-align: center
    line-height: 50px  
    
.search
  position: relative
  flex: 1 10%
  line-height: 50px
  text-align: center
  font-size: 1.1em
      
a
  text-decoration: none
  color: rgba(0,0,0,.7)
  transition: all .2s ease-out
  padding: 2px
    
a:hover
  color: rgba(0,0,0,1)
    
input[type=search]
  display: none
  width: 70%
  border: 1px solid rgba(0,0,0,.3)
  height: 25px
  border-radius: 3px
  padding: 5px
  font-family: 'Open Sans Condensed', sans-serif
 
.show
  display: inline-block
    
content
  display: block
  width: 100%
  background-color: #000
  height: 400px
  
img
  width: 100%
  
.hero-img
  width: 100%
  text-align: center
  line-height: 400px
  color: white
  font-size: 12em
  
footer
  padding-top: 4em
  background-color: #ebebeb
    
article
  position: relative
  flex: 1 40%
  text-align: center
  margin: 2em  
  border: 1px solid rgba(0,0,0,.2)
  background-color: white  
  
  & img
    width: 75px
    margin: 1em
    border-radius: 0 50% 50%
    
    
  & time
    display: block
    padding: 1em  
    text-align: left
    color: rgba(0,0,0,.5)
      
  & hr
    width: 200px
    margin: 0 auto
  
  & p
    margin: 1em 2.5em
    font-size: 1.4em
    
  & .fa-twitter
    color: #4aa3df
    margin: 1em 0
    font-size: 2em
  
  & ul
    text-align: right
    padding: 1em  
    
  & ul li
    display: inline-block
    padding: 0 .25em
    color: rgba(0,0,0,.5)
      
    & a:hover
      color: rgba(0,0,0,1)
        
        
      
@media screen and (max-width: 520px)
  nav 
    font-size: 1em
      
  .logo
    
    font-size: 1em