*{

-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;

}