body {
    font-family: 'Source Sans Pro', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.mb-20 {
    margin-bottom: 20rem;
}

header img {
    margin: auto;
    display: block;
    max-width: 200px;
}
header {
    background: rgba(238,238,238,1);
    background: -moz-linear-gradient(45deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(238,238,238,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(45deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(45deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(45deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=1 );
}
header .container {
    max-width: 1140px;
}
header .row {
    height: 100vh;
}
header .name {
    display: block;
    font-family: 'Signika', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}
header .role {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
}


section .section-heading {
}
section .section-heading h3 {
    font-size: 1rem;
    font-weight: 700;
}

.container {
    max-width: 900px;
}

.section-intro {
    position: relative;
    padding: 1.5rem 0;
    min-height: 30vh;
    background: rgba(179,220,237,1);
    background: -moz-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(179,220,237,1)), color-stop(100%, rgba(41,184,229,1)));
    background: -webkit-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    background: -o-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    background: -ms-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    background: linear-gradient(to right, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#29b8e5', GradientType=1 );
}
.section-intro canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.section-intro p {
    font-size: 1.2rem;
    font-weight: 300;
}

.section-skill {
    min-height: 70vh;
}
.section-skill .skill-item {
    margin-top: 3rem;
}
.section-skill .col-md-4:last-of-type .skill-item {
    margin-bottom: 3rem;
}

.section-portfolio {
}
.section-portfolio .portfolio-item {
    text-decoration: none;
    opacity: 0.9;
    transition: 0.2s all;
}
.section-portfolio .portfolio-item:hover {
    opacity: 1;
}
.section-portfolio .portfolio-item .company {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.section-connect {
    min-height: 80vh;
}
.section-connect h3 {
    font-size: 2.5rem;
}
.section-connect p {
    font-size: 1.5rem;
    font-weight: 300;
}
.section-social {
    min-height: 12vh;
}
.section-social a {
    margin-right: 1rem;
    font-size: 2rem;
    text-decoration: none;
}
.section-social a:last-of-type {
    margin-right: 0;
}
.bg-dark-grey {
    background-color: #222;
}
footer {
    min-height: 8vh;
}

@media (min-width: 576px) {
    header img {
        max-width: 100%;
    }
    header .name {
        font-size: 2.5rem;
        text-align: left;
    }
    header .role {
        margin-bottom: 3rem;
        font-size: 1.5rem;
        text-align: left;
    }
    .section-intro p {
        font-size: 1.2rem;
    }
}


@media (min-width: 992px) {
    header .name {
        font-size: 4rem;
        text-align: left;
    }
    header .role {
        margin-bottom: 5rem;
        font-size: 2rem;
        text-align: left;
    }
    .section-intro p {
        font-size: 1.5rem;
    }
}