@font-face {
font-family: 'font';
src: url(https://jussijaakola.co.uk/font.ttf) format('truetype');
}
body {
background: #f5f5f5;
font-family: 'font', serif;
font-size: 100%;
font-style: normal;
font-weight: normal;
color: #212121;
line-height: 1.2em;
text-align: justify;
}
h3 {
font-size: 1em;
font-style: normal;
font-weight: normal;
}
h4 {
font-size: 1em;
font-style: normal;
font-weight: normal;
}
p {
font-size: 1em;
font-style: normal;
font-weight: normal;
}
a:link {
color: #212121;
text-decoration: none;
}
a:visited {
color: #212121;
text-decoration: underline;
}
a:hover {
color: #f5f5f5; -webkit-text-fill-color: transparent;
background: linear-gradient(to right, #DAA520, #FFDF00); -webkit-background-clip: text;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.truth {
text-transform: none;
background-image: linear-gradient(
-225deg,
#9e9e9e 0%,
#bdbdbd 29%,
#e0e0e0 67%,
#f5f5f5 100%
);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #757575;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 10s linear infinite;
display: inline-block;
font-size: 1em;
font-style: normal;
font-weight: normal;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 10s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fa-bars {
margin-right: 0px;
}
.navigation-menu {
background: #000000;
height: 100%;
width: 100%;
padding: 0px 0;
margin: 0;
list-style: none;
text-align: center;
position: fixed;
right: -100%;
top: 0;
transition: all 1s;
z-index: 1;
font-size: 1em;
font-style: normal;
font-weight: normal;
}
.navigation-menu li {
padding: 10px 0;
}
.navigation-menu li:nth-of-type(2n) {
background: #000000;
}
.navigation-menu li:hover {
background: #212121;
}
.navigation-menu a {
color: #f5f5f5;
text-decoration: none;
display: block;
}
.classical {
width: 90%;
margin: -10px auto;
padding-top: 0px;
transition: all 1s;
position: fixed;
left: 30px;
}
/* Hide checkbox */
#toggle {
display: none;
}
/* Toggle sliding menu */
label[for="toggle"] {
cursor: pointer;
font-size: 1em;
font-style: normal;
font-weight: normal;
margin-left: 22px;
}
/* Slide menu when checkbox checked */
input#toggle:checked + ul.navigation-menu {
right: 0;
}
/* Slide content when checkbox checked */
input#toggle:checked ~ .classical {
left: -100%;
}