*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Grid */
.container {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  margin-top: 7%;
  padding: 0 20px;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* Devices larger than 400px (Mobile First) */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* Devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }
  .column,
  .columns {
    margin-left: 4%;
  }
  .column:first-child,
  .column:first-child {
    margin-left: 0;
  }

  /* Segemented columns for future developments */
  .one.column,
  .one.columns        { width: 4.66666666667%; }
  .two.columns        { width: 13.3333333333%; }
  .three.columns      { width: 22;             }
  .four.columns       { width: 30.6666666667%; }
  .five.columns       { width: 39.3333333333%; }
  .six.columns        { width: 48%;            }
  .seven.columns      { width: 56.6666666667%; }
  .eight.columns      { width: 65.3333333333%; }
  .nine.columns       { width: 74.0%;          }
  .ten.columns        { width: 82.6666666667%; }
  .eleven.columns     { width: 91.3333333333%; }
  .twelve.columns     { width: 100%; margin-left: 0; }
}

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

/* Base Style */
html {
}

body {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
}

/* Image Style */
.round {
border-radius: 50%;
width: 250px;
height: 250px;
overflow: hidden;
position: relative;
margin: 0 auto 35px;
text-align: center;

animation-duration: 0.8s;
animation-fill-mode: both;
animation-name: bounce;
-webkit-animation-duration: 0.7s;
-webkit-animation-fill-mode: both;
-webkit-animation-name: bounce;
}

.round:hover {
  opacity: 0.75;
}

/* Hovering over image on homepage  */
a.hverabt {
  text-decoration: none;
  color: inherit;
}

a.hverabt span {
  display: none;
  font-family: 'Raleway Dots', cursive;
}

a.hverabt:hover span {
  display: inline-block;
  width: 50px;
  position: absolute;
  top: 125px;

  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 0.05s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeOut;
  animation-duration: 3s;
  animation-delay: : 0.05s;
  animation-fill-mode: both;
}

/* Resizing profile image to icon */
#profileicon {
  width: 64px;
  height: 64px;
  float: none;
  margin-top: inherit;
  margin-bottom: 5px;
}

/* Hovering over #profileicon */
a.hverhome {
  text-decoration: none;
  color: inherit;
}

a.hverhome span {
  display: none;
  font-family: 'Raleway Dots', cursive;
}

a.hverhome:hover span {
  display: inline-block;
  width: 50px;
  position: absolute;
  top: 32px;

  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 0.05s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeOut;
  animation-duration: 3s;
  animation-delay: : 0.05s;
  animation-fill-mode: both;
}

/* Generating Glitch effect for 404 page */
section {
  width: 100%;
  height: 100vh;
  border-radius: 50%;
  background: url(../images/profile.jpeg);
}

section:hover {
  opacity: initial !important;
}

.glitch {
  position: relative;
  background-size: 100%;
}

.glitch:before,
.glitch:after {
  content: '';
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background: url(../images/profile.jpeg);
  background-size: 100%;
  opacity: .5;
  mix-blend-mode: hard-light;
  -webkit-animation: animate-glitch .2s linear infinite;
  animation: animate-glitch .2s linear infinite;
}

/* IMAGE ANIMATIONS */
/* Bounce Animation */
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, -1000px, 0);
  }
  60% {
    -webkit-transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
  }
  100% {
    -webkit-transform: none;
  }
}

@keyframes bounce {
  0% {
    transform: translate3d(0, -1000px, 0);
  }
  60% {
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: none;
  }
}

/* Glitch Animation */
@-webkit-keyframes animate-glitch {
  0% {
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  10% {
    background-position: 5px 0;
  }
  20% {
    background-position: -5px 0;
  }
  30% {
    background-position: 15px 0;
  }
  40% {
    background-position: -5px 0;
  }
  50% {
    background-position: -25px 0;
  }
  60% {
    background-position: -50px 0;
  }
  70% {
    background-position: 0 -20px;
  }
  80% {
    background-position: -60px -20px;
  }
  81% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 0;
    filter: hue-rotate(360deg);
  }
}

@keyframes animate-glitch {
  0% {
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  10% {
    background-position: 5px 0;
  }
  20% {
    background-position: -5px 0;
  }
  30% {
    background-position: 15px 0;
  }
  40% {
    background-position: -5px 0;
  }
  50% {
    background-position: -25px 0;
  }
  60% {
    background-position: -50px 0;
  }
  70% {
    background-position: 0 -20px;
  }
  80% {
    background-position: -60px -20px;
  }
  81% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 0;
    filter: hue-rotate(360deg);
  }
}

/* Fadeout animation for texts shown on hovering */
@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Welcome Message Style */
#greeting {
  font-weight: 100;
  font-size: 2.0em;
}

#greeting a {
  text-decoration: none;
  color: inherit;
}

#greeting a:hover {
  color: red;
}

/* Page Title Style */
#pagetitle {
  font-family: Open Sans;
  font-weight: 300;
  font-size: 2.0em;
  float: none;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Line Break */
hr {
  width: 50%;
  /* border: dashed; */
  border-color: #d9d9d9;
}

/* Short bio on about page  */
#bio{
    font-family: inherit;
    font-weight: 200;
    font-size: 1.2em;
    word-wrap: normal;
    text-align: left;
}

/* 404 Page Text Styles */
#goback {
  font-weight: 100;
  font-size: 2.0em;
}

#goback a {
  text-decoration: none;
  color: red;
  font-weight: 200;
}

/* Collapsible Mobile Menu */
.collapsible-menu .rise {
  font-size: 2em;
  display: none;
  cursor: pointer;
}

.collapsible-menu .fall {
  font-size: 2em;
  display: none;
  cursor: pointer;
}

input#menu {
  display: none;
}
input:checked ~ .rise{
  display: none;
}
input:checked ~ .fall {
  display: block;
}
input:checked ~ .menu-content {
  max-height: 100%;
}

/* Navigation Style */
.nav {
  display: inline-block;
  list-style: none;
  text-align: center;
  margin: 0 auto;
}


.nav li {
  float: left;
}

.nav li a {
  padding: 15px 30px;
  text-decoration: none;
}

/* Navigation style for mobile & phablets */
@media screen and (max-width: 550px) {
  .nav li {
    float: none;
    width: 100%;
  }

  .menu-content {
    max-height: 0;
    overflow: hidden;
  }

  .collapsible-menu .rise {
    display: block;
  }
}

/* Navigation text colors */
#blog {
  color: rgb(18, 16, 14);
}

#fb {
  color: rgb(68, 105, 176);
}

#twitter {
  color: rgb(42, 163, 239);
}

#github {
  color: rgb(34, 34, 34);
}

#linked {
  color: rgb(0, 0, 0);
}

#in {
  color: rgb(0, 119, 181);
}

#email {
  color: rgb(221, 83, 75);
}

/* Blog Index Style */
ul {
  list-style: none;
  margin: inherit;
  padding: inherit;
  text-align: left;
}

ul li {
  margin: 25px 0;
}

.post-title a {
  max-width: 100%;
  word-wrap: normal !important;
  font-weight: 400;
  font-size: 1.5em;
  text-decoration: none;
  color: inherit;
}

.post-title a:hover {
  color: red;
}

.post-date {
  float: right;
  font-family: Open Sans;
  color: #d3d3d3;
  text-transform: uppercase;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

/* Pagination Style */
.pagination {
  font-family: Open Sans;
  font-weight: 400;
  font-size: 1.1em;
}

.pagination a {
  text-decoration: none;
  font-size: 0.9em !important;
  color: #d3d3d3;
}

.pagination a:hover {
  color: red;
}

/* Blog Post Styles */
.blogtitle {
  font-family: inherit;
  font-size: xx-large;
  color: red;
  text-align: left;
  margin-bottom: 1%;
}

.blogdate {
  color: #b3b3b3;
  float: left;
}

.blogcontent {
  font-family: Open Sans;
  text-align: left;
  margin-top: 3%;
}

.post-navigation {
  font-family: Open Sans;
}

.post-navigation a {
  text-decoration: none;
  color: #d3d3d3;
}

.post-navigation a:hover {
  color: red;
}

/* Footer Styles */
.footer {
  padding: 15px 0;
  margin: 15px 0 0;
  font-size:  0.8rem;
  color: #e6e6e6;
  text-align: center;
  position: relative;
}

.footer:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 75%;
  border-top: 1px solid #f2f2f2;
}

.footer:after{
  content: "";
  display: block;
  margin: 0 auto;
  width: 75%;
  border-bottom: 1px solid #f2f2f2;
}

.footer a {
  color: inherit;
}