html {
    min-height: 100%;
    position: relative;
}

body {
    height: 100%;
    color: #333333;
    background-color: #FAFAFA;
    margin: 0;
}

#main {
  position: absolute;
  font-family: 'Roboto Slab', serif;
  width: 100%;
}

/* ******************** */
/* introduction section */
/* ******************** */
#top {
  width: 70%;
  text-align: center;
  margin: auto;
  padding-top: 10%;
}

#intro {
  font-weight: bold;
  font-size: 35pt;
  padding-bottom: 10pt;
}

#bio {
  font-size: 15pt;
}

/* ******************** */
/* contact info section */
/* ******************** */
.contactCircle {
    /*color: black;*/
    border-radius: 50%;
    width: 50px;
    height: 50px;
    /*background: #fff;*/
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    margin: 10px;
    display: inline-block;
}

.contactCircle a {
    color: #333333;
}

.contactCircle:hover {
    background: #333333;
    transition: background-color 0.2s ease-out;
}

.contactCircle:hover .fa-linkedin {
    color: #fafafa;
    transition: background-color 0.2s ease-out;
}

.contactCircle:hover .fa-github {
    color: #fafafa;
    transition: background-color 0.2s ease-out;
}

.contactCircle:hover .fa-film {
    color: #fafafa;
    transition: background-color 0.2s ease-out;
}

.contactCircle:hover .fa-twitter {
    color: #fafafa;
    transition: background-color 0.2s ease-out;
}

.contactCircle:hover .fa-envelope {
    color: #fafafa;
    transition: background-color 0.2s ease-out;
}

.logo:hover {
    color: #fafafa;
    background: #333333;
    transition: background-color 0.2s ease-out;
    cursor: pointer;
}

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

@media only screen and
(orientation: portrait) {
    #top {
      padding-top: 35%
    }

    #intro {
      font-size: 50pt;
      padding-bottom: 20pt;
    }

    #bio {
      font-size: 35pt;
    }

    #bio br {
      display: none;
    }

    #contact {
      margin-top: 40pt;
    }

    .contactCircle {
      font-size: 60px;
      width: 110px;
      height: 110px;
      line-height: 105px;
    }
}

@media only screen and
(orientation: landscape) {
    #top {
      /*padding-top: 35%*/
    }

    #intro {
      /*font-size: 50pt;*/
      /*padding-bottom: 20pt;*/
    }

    #bio {
      /*font-size: 35pt;*/
    }

    #bio br {
      /*display: none;*/
    }

    #contact {
      margin-top: 30pt;
    }

    .contactCircle {
      font-size: 30px;
      /*width: 110px;*/
      /*height: 110px;*/
      /*line-height: 105px;*/
    }
}