style.css

html {
box-sizing: border-box;
font-family: "ff-meta-serif-web-pro", serif;
color: #555;
font-size: 12px; }

@media (min-width: 6.25em) {
html {
font-size: 20px; } }

@media (min-width: 12.5em) {
html {
font-size: 18px; } }

@media (min-width: 18.75em) {
html {
font-size: 19px; } }

@media (min-width: 25em) {
html {
font-size: 20px; } }

@media (min-width: 31.25em) {
html {
font-size: 21px; } }

@media (min-width: 37.5em) {
html {
font-size: 22px; } }

@media (min-width: 43.75em) {
html {
font-size: 23px; } }

@media (min-width: 50em) {
html {
font-size: 24px; } }

@media (min-width: 56.25em) {
html {
font-size: 25px; } }

@media (min-width: 62.5em) {
html {
font-size: 26px; } }

@media (min-width: 68.75em) {
html {
font-size: 27px; } }

@media (min-width: 75em) {
html {
font-size: 28px; } }

@media (min-width: 81.25em) {
html {
font-size: 29px; } }

@media (min-width: 87.5em) {
html {
font-size: 30px; } }

@media (min-width: 93.75em) {
html {
font-size: 31px; } }

@media (min-width: 100em) {
html {
font-size: 32px; } }

@media (min-width: 106.25em) {
html {
font-size: 33px; } }

@media (min-width: 112.5em) {
html {
font-size: 34px; } }

@media (min-width: 118.75em) {
html {
font-size: 35px; } }

@media (min-width: 125em) {
html {
font-size: 36px; } }

*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0; }

a {
text-decoration: none; }

/**
* The fixed Side
*/
.side {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
width: 50px;
border-right: 1px dashed rgba(0, 0, 0, 0.3);
color: white;
font-family: "nimbus-sans", sans-serif;
text-transform: uppercase;
letter-spacing: .0875rem;
font-size: 10px;
transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1); }
.side:hover {
color: rgba(0, 0, 0, 0.5); }
.side .side__inner {
position: relative;
height: 100%;
white-space: nowrap; }
.side a {
color: white;
word-spacing: 0;
transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1); }
.side .top,
.side .bottom {
position: absolute;
left: 0;
transform: rotate(-90deg) perspective(1px);
transform-origin: 50px 50px;
height: 50px;
line-height: 50px;
white-space: nowrap;
word-spacing: .5rem; }
.side .top {
top: 25px;
text-align: right;
color: white; }
.side .bottom {
top: auto;
bottom: 75px; }
.side .bottom:hover a {
color: white; }
.side .bottom:hover a:hover {
color:white; }

/**
* The first navigation
*/
.anchornav {
margin: 0;
padding: 0;
list-style: none; }
.anchornav li {
display: block; }
.anchornav li::after {
content: '';
width: 1.3rem;
display: block;
height: 2px;
background: black; }
.anchornav li:last-child::after {
display: none; }
.anchornav a {
display: block;
padding: 1em 0;
font-family: "nimbus-sans", sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1.4px;
color: inherit;
transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1); }
.anchornav a span {
display: inline;
padding: .5em 0 0;
opacity: .3;
letter-spacing: normal;
font-family: "ff-meta-serif-web-pro", serif;
text-transform: none; }
.anchornav a:hover {
color: #de5f5f; }
.anchornav a:hover span {
opacity: 1;
color: #ffffff; }

/**
* The different sections
*/
.section {
position: relative;
display: flex;
flex-flow: column wrap;
align-items: stretch;
min-height: 60vh;
width: 100%;
align-content: center;
padding: 20vh 50px 20vh 75px; }
.section svg {
position: absolute;
top: -50px;
left: 0;
right: 0;
width: 100%;
height: 50px; }
.section svg.bottom {
bottom: 0;
top: auto;
fill: grey; }
.section .section__inner {
height: 100%;
max-width: 70%;
margin: auto auto auto 0; }
.section.section--hello {
background-color: #555;
color: #ffffff; }
.section.section--intro {
background-color: #555;
color: #ffffff; }
.section.section--about {
background-color: #de5f5f;
color: white; }
.section.section--about svg {
fill: #de5f5f; }
.section.section--clients {
background-color: #343436;
color: white; }
.section.section--clients svg {
fill: #343436; }
.section.section--portfolio {
background-color: #2cbaaa;
color: white; }
.section.section--portfolio svg {
top: -20px;
fill: #1baaaa; }
.section.section--portfolio svg.bottom {
top: auto;
bottom: -50px; }
.section.section--portfolio1 {
background-color: #2cbaaa;
color: white; }
.section.section--portfolio1 svg {
top: -50px;
fill: #2cbaaa; }
.section.section--pepperhill svg {
top: -50px;
fill: #3A99D8; }
.section.section--contact svg {
top: -50px;
background-color: #555;
fill: #555; }

/**
* Typo
*/
h1, .h1, h2, .h2, h3, .h3, h4, .h5 {
font-family: "nimbus-sans", sans-serif;
font-weight: bold;
margin: 0 0 1em;
line-height: 1;
letter-spacing: -1px; }

@media (min-width: 30rem) {
h1, .h1, h2, .h2, h3, .h3, h4, .h5 {
letter-spacing: -2px; } }
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h5 a {
color: inherit; }
h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h5 a:hover {
border-bottom: .1875rem solid; }
h1 span, .h1 span, h2 span, .h2 span, h3 span, .h3 span, h4 span, .h5 span {
color: #de5f5f; }

h1, .h1 {
font-size: 1.2rem; }

@media (min-width: 30rem) {
h1, .h1 {
font-size: 2.1rem; } }

h2, .h2 {
font-size: 1.1rem; }

@media (min-width: 30rem) {
h2, .h2 {
font-size: 2rem; } }

.pre {
display: inline-block;
font-size: 12px;
margin: 0;
opacity: .8;
letter-spacing: 1px;
word-spacing: .2rem;
text-transform: uppercase;
margin-bottom: 1em;
color: white;
}
.pre span {
font-size: .9em;
margin-right: .4em;
opacity: .5; }
.pre:hover {
opacity: 1; }

p {
font-size: .75rem;
line-height: 1.4; }

@media (min-width: 30rem) {
p {
font-size: .875rem; } }
p a {
font-weight: bold;
color: grey; }
p a:hover {
border-bottom: .1875rem solid; }

.lead {
display: block;
font-size: .875rem;
margin: 0;
color: inherit}

@media (min-width: 30rem) {
.lead {
font-size: 1rem; } }

.experience {
font-size: .75rem;
color: inherit}
.experience.block {
display: inline-block;
width: 100%; }

@media (min-width: 30rem) {
.experience.block {
width: 30%; } }
.experience.link {
display: block;
margin: 2em 0 0 0;
color: inherit;
letter-spacing: 2px;
font-size: 12px; }
.experience p {
font-size: inherit;
color: inherit;
opacity: .7; }