@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");

html {
    background: #2b2d2f;
    color: #fff;
    font-family: Raleway, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    overflow: hidden
}

body,
html {
    height: 100%
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2rem
}

p {
    word-spacing: .1rem
}

a {
    color: #ff073a;
    text-decoration: none
}

a:hover {
    color: #fff
}

.highlight-title {
    color: #ff073a;
    text-shadow: .25rem .25rem .25rem #ff073a
}

.highlight-link {
    box-shadow: inset 0 -.125rem 0 #ff073a;
    box-sizing: border-box;
    color: #ff073a;
    display: inline-block;
    padding: .125rem;
    transition: all .2s ease-in-out
}

.highlight-link:hover {
    box-shadow: inset 0 -2rem 0 0 #ff073a;
    color: #fff
}

.layout {
    margin: .5rem;
    max-width: 75em;
    padding: .5rem
}

.layout .card {
    background: linear-gradient(145deg, hsla(0, 0%, 45%, .15) 15%, #2b2d2f 80%);
    border-radius: 2rem;
    margin: 3rem 0;
    padding: 1rem 2rem
}

.layout .card .title {
    text-align: center;
    position: relative
}

.layout .card .subtitle {
    text-align: center
}

.layout .card .description {
    text-align: justify
}

.neumorphism-button {
    background: linear-gradient(145deg, hsla(240, 2%, 40%, .15) 15%, rgba(33, 33, 33, .4) 80%);
    box-shadow: -4px -3px 2px 0 hsla(0, 0%, 98%, .13), 4px 4px 2px 0 rgba(0, 0, 0, .4)
}

.neumorphism-card {
    box-shadow: inset 2px 2px 4px #000, inset -2px -2px 4px #636363
}

.neumorphism-card-big {
    box-shadow: 5px 5px 4px #161718, -5px -5px 4px #404346
}

#preloader {
    -ms-flex-align: center;
    align-items: center;
    background: #2b2d2f;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    margin: .5rem;
    padding: .5rem;
    position: absolute;
    right: 0;
    z-index: 999
}

#preloader .load {
    height: 6rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6rem
}

#preloader .load hr {
    animation: a 2s ease infinite;
    border: 0;
    height: 40%;
    margin: 0;
    position: absolute;
    width: 40%
}

#preloader .load :first-child {
    animation-delay: -1.5s;
    background: #fff
}

#preloader .load :nth-child(2) {
    animation-delay: -1s;
    background: #ff073a
}

#preloader .load :nth-child(3) {
    animation-delay: -.5s;
    background: #fff
}

#preloader .load :last-child {
    background: #ff073a
}

@keyframes a {

    0%,
    to {
        transform: translate(0)
    }

    25% {
        transform: translate(160%)
    }

    50% {
        transform: translate(160%, 160%)
    }

    75% {
        transform: translateY(160%)
    }
}

.footer {
    background: #2b2d2f;
    color: #fff;
    margin: .5rem;
    padding: 1rem;
    text-align: center
}

.footer a {
    color: #ff073a
}

#landing,
.footer a:focus,
.footer a:hover {
    background: #2b2d2f;
    color: #fff
}

#landing {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    text-align: center
}

#landing,
.landing-title {
    margin: .5rem;
    padding: .5rem
}

.landing-title {
    left: 0;
    position: absolute;
    right: 0;
    top: 40%
}

.landing-icons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.landing-icons .social-link {
    color: #fff;
    position: relative;
    height: 3rem;
    line-height: 3rem;
    margin: .25rem;
    width: 3rem
}

.landing-icons .social-link .circle {
    animation: c 1s ease-in-out forwards;
    fill: none;
    stroke-dasharray: 40;
    transition: all .2s ease-in-out
}

.landing-icons .social-link .social {
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    transition: all .5s ease-in-out;
    width: 100%
}

.landing-icons .social-link .social-svg {
    fill: #fff
}

.landing-icons .social-link .label {
    display: none
}

.landing-icons .social-link:hover {
    cursor: pointer
}

.landing-icons .social-link:hover .circle {
    animation: b 1s ease-in-out forwards, d 1s linear forwards;
    fill: #fff;
    fill-opacity: 1
}

.landing-icons .social-link:hover .social-svg {
    fill: #000
}

.landing-icons .social-link:hover .label {
    display: unset !important;
    position: relative;
    top: -2rem
}

.landing-icons .email:hover .circle {
    animation: b 1s ease-in-out forwards, e 1s linear forwards
}

.landing-icons .email:hover .social-svg {
    fill: #d44638
}

.landing-icons .linkedin:hover .circle {
    animation: b 1s ease-in-out forwards, f 1s linear forwards
}

.landing-icons .linkedin:hover .social-svg {
    fill: #007bb6
}

.landing-icons .twitter:hover .circle {
    animation: b 1s ease-in-out forwards, g 1s linear forwards
}

.landing-icons .twitter:hover .social-svg {
    fill: #1da1f2
}

@keyframes b {
    to {
        stroke-dasharray: 510;
        stroke-width: .5rem
    }
}

@keyframes c {
    0% {
        stroke: #fff;
        stroke-dasharray: 510;
        stroke-width: .5rem
    }

    to {
        stroke: #fff;
        stroke-dasharray: 83;
        stroke-width: .5rem
    }
}

@keyframes d {
    to {
        stroke: #000
    }
}

@keyframes e {
    to {
        stroke: #b23121
    }
}

@keyframes f {
    to {
        stroke: #007bb6
    }
}

@keyframes g {
    to {
        stroke: #1da1f2
    }
}

#skills {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center
}

#skills div {
    padding: .2rem;
    transition: opacity .5s
}

#skills div[skill-type=language] {
    color: #e84a5f
}

#skills div[skill-type=framework] {
    color: #ff847c
}

#skills div[skill-type=tool] {
    color: #fecea8
}

#skills div[skill-weight="1"] {
    font-size: .75rem;
    line-height: .25rem
}

#skills div[skill-weight="2"] {
    font-size: 1.25rem;
    line-height: .75rem
}

#skills div[skill-weight="3"] {
    font-size: 1.75rem;
    line-height: 1.25rem
}

#skills div[skill-weight="4"] {
    font-size: 2.25rem;
    line-height: 1.75rem
}

#skills div[skill-weight="5"] {
    font-size: 2.75rem;
    line-height: 2.25rem
}

#skills .filter-button,
#skills input[type=radio] {
    display: none
}

.timeline-wrapper .timeline {
    list-style-type: none;
    padding: 0;
    position: relative
}

.timeline-wrapper .timeline:before {
    background: linear-gradient(180deg, #f3f3f3 0, #d5d5d5 8%, #d5d5d5 92%, #f3f3f3);
    content: " ";
    height: 100%;
    left: 50%;
    margin-left: -.0675rem;
    position: absolute;
    width: .125rem;
    z-index: -1
}

.timeline-wrapper .timeline li {
    padding: 1rem 0
}

.timeline-wrapper .hexagon {
    background: #ff073a;
    height: .5rem;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: -.8rem;
    width: 1rem
}

.timeline-wrapper .hexagon:after,
.timeline-wrapper .hexagon:before {
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-left-width: .5rem;
    border-right-width: .5rem;
    content: "";
    left: 0;
    position: absolute
}

.timeline-wrapper .hexagon:before {
    border-bottom: .25rem solid #ff073a;
    top: -.25rem
}

.timeline-wrapper .hexagon:after {
    border-top: .25rem solid #ff073a;
    bottom: -.25rem
}

.timeline-wrapper .flag-wrapper {
    position: relative;
    text-align: center
}

.timeline-wrapper .flag {
    background: #2b2d2f;
    border-radius: .5rem;
    font-weight: 600;
    padding: .25rem .5rem
}

.timeline-wrapper .flag span {
    position: relative;
    transition: .4s
}

.timeline-wrapper .flag span:after {
    content: "≫";
    color: #ff073a;
    position: absolute;
    opacity: 0;
    right: -1rem;
    transition: .4s
}

.timeline-wrapper .flag:hover span {
    letter-spacing: .05rem;
    padding-right: 1.25rem
}

.timeline-wrapper .flag:hover span:after {
    opacity: 1;
    right: 0
}

.timeline-wrapper .time-wrapper {
    color: #fff;
    display: block;
    line-height: .5rem;
    margin-top: .3rem
}

.timeline-wrapper .time {
    background: #2b2d2f;
    border-radius: .5rem;
    display: inline-block;
    padding: .6rem
}

.timeline-wrapper .desc {
    background: #2b2d2f;
    border-radius: 1rem;
    margin: 1em 0 0;
    padding: .75em;
    text-align: center
}

.project {
    border-radius: 1rem;
    margin: 1rem 0;
    padding: .5rem 1rem
}

.project .name-link-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.project .name-link-wrapper .links {
    font-size: 1.5rem;
    margin: 1rem .5rem
}

.project-desc {
    line-height: 1rem
}

.project-stars-forks {
    fill: #fff;
    font-family: Josefin Sans, sans-serif
}

.tag-wrapper {
    margin: 1rem 0 0
}

.tag {
    border-radius: .5rem;
    display: inline-block;
    margin-bottom: .25rem;
    padding: .5rem
}

.contact-icons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.contact-icons .social-link {
    position: relative;
    height: 3rem;
    line-height: 3rem;
    margin: .25rem;
    text-align: center;
    width: 3rem
}

.contact-icons .social-link .social {
    font-size: 1.5rem
}

.contact-icons .social-link .social-svg {
    fill: #ff073a
}

.contact-icons .social-link:hover {
    cursor: pointer;
    animation: h 1s infinite alternate
}

.contact-icons .social-link:hover .social-svg {
    fill: #fff
}

.contact-icons .black:hover .social-svg {
    fill: #000
}

.contact-icons .linkedin:hover .social-svg {
    fill: #007bb6
}

.contact-icons .twitter:hover .social-svg {
    fill: #1da1f2
}

@media only screen and (min-width:48em) {
    .layout {
        margin: .5rem auto;
        padding: 2rem
    }

    .layout .card .description,
    .layout .card .subtitle {
        font-size: 1.25rem
    }

    .landing-title h1 {
        font-size: 3rem
    }

    .landing-icons .social-link {
        width: 4rem;
        height: 4rem;
        line-height: 4rem
    }

    .landing-icons .social-link .social {
        font-size: 2rem
    }

    #skills div[skill-weight="1"] {
        font-size: 1rem;
        line-height: 0
    }

    #skills div[skill-weight="2"] {
        font-size: 2rem;
        line-height: 1rem
    }

    #skills div[skill-weight="3"] {
        font-size: 3rem;
        line-height: 2rem
    }

    #skills div[skill-weight="4"] {
        font-size: 4rem;
        line-height: 3rem
    }

    #skills div[skill-weight="5"] {
        font-size: 5rem;
        line-height: 4rem
    }

    #skills .filter-button {
        border-radius: .5rem;
        cursor: pointer;
        display: unset;
        margin: 0 .5rem 1rem;
        padding: .5rem .25rem;
        text-align: center;
        width: 21%
    }

    #skills .filter-button:hover {
        letter-spacing: .25rem
    }

    #skills input[type=radio]:checked+.filter-button {
        color: #ff073a;
        font-weight: 600;
        background: linear-gradient(150deg, hsla(0, 0%, 8%, .4) 10%, hsla(0, 0%, 45%, .15) 80%);
        box-shadow: 1px 1px 2px 0 hsla(0, 0%, 82%, .4), -1px -1px 2px rgba(0, 0, 0, .4), inset 3px 3px 2px 0 rgba(0, 0, 0, .4), inset -1px -2px 2px hsla(0, 0%, 82%, .4)
    }

    #skills input[id=framework]:checked~div[skill-type=language],
    #skills input[id=framework]:checked~div[skill-type=tool],
    #skills input[id=language]:checked~div[skill-type=framework],
    #skills input[id=language]:checked~div[skill-type=tool],
    #skills input[id=tool]:checked~div[skill-type=framework],
    #skills input[id=tool]:checked~div[skill-type=language] {
        height: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        width: 0
    }

    .timeline-wrapper .timeline {
        margin: 0 auto;
        width: 39.25rem
    }

    .timeline-wrapper .timeline li:after {
        clear: both;
        content: "";
        display: block
    }

    .timeline-wrapper .direction-l {
        float: left;
        text-align: right;
        width: 18.5rem
    }

    .timeline-wrapper .direction-l .hexagon {
        left: auto;
        right: -1.6rem;
        top: .4rem
    }

    .timeline-wrapper .direction-l .flag-wrapper {
        display: inline-block;
        text-align: right
    }

    .timeline-wrapper .direction-l .time-wrapper {
        float: left;
        margin-top: -.1rem
    }

    .timeline-wrapper .direction-l .desc {
        text-align: right
    }

    .timeline-wrapper .direction-r {
        float: right;
        text-align: left;
        width: 18.5rem
    }

    .timeline-wrapper .direction-r .hexagon {
        left: -1.6rem;
        right: auto;
        top: .4rem
    }

    .timeline-wrapper .direction-r .flag-wrapper {
        display: inline-block;
        text-align: left
    }

    .timeline-wrapper .direction-r .time-wrapper {
        float: right;
        margin-top: -.1rem
    }

    .timeline-wrapper .direction-r .desc {
        text-align: left
    }

    .projects-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .projects-wrapper>* {
        width: 44%
    }

    .contact-icons .social-link {
        width: 4rem;
        height: 4rem;
        line-height: 4rem
    }

    .contact-icons .social-link .social {
        font-size: 2rem
    }
}

@media only screen and (min-width:62em) {
    .layout {
        padding: 3rem
    }

    .layout .card {
        padding: 1rem 3rem
    }

    #skills .filter-button {
        width: 21.5%
    }

    .timeline-wrapper .timeline {
        width: 49rem
    }

    .timeline-wrapper .direction-l,
    .timeline-wrapper .direction-r {
        width: 23.35rem
    }

    .projects-wrapper>* {
        width: 45%
    }
}

@media only screen and (min-width:75em) {
    .layout {
        padding: 5rem
    }

    #skills .filter-button {
        width: 22%
    }

    .timeline-wrapper .timeline {
        width: 58rem
    }

    .timeline-wrapper .direction-l,
    .timeline-wrapper .direction-r {
        width: 27.9rem
    }

    .projects-wrapper>* {
        width: 46%
    }
}

@keyframes h {
    0% {
        bottom: 0
    }

    50% {
        bottom: .5rem
    }

    to {
        bottom: 0
    }
}