.red {
    color: #ED6C89;
}

.orange {
    color: #EF9C70;
}

.yellow {
    color: #F9D878;
}

.green {
    color: #B4DA82;
}

.blue {
    color: #90DAE6;
}

.purple {
    color: #A89FEC;
}

html {
    box-sizing: border-box;
    background-color: #2D2B2E
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden
}

body {
    color: white;
    align-items: center;
    display: flex;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    justify-content: center
}

a,
a:link,
a:active {
    color: #000;
    font-weight: 600;
    text-decoration: none
}

a:hover {
    color: #000
}

a.bump {
    font-size: 1.5rem;
    line-height: 0
}

.wrapper {
    padding: 1rem;
    position: relative
}

@media screen and (min-width: 60rem) {
    .wrapper {
        padding: 0;
        max-width: 42rem;
        margin: 0 auto
    }
}

.about .about-content {
    color: #ffffff;
    font-size: 16px;
    
    line-height: 2;
    margin: 0
}

.name {
    display: block;
    font-size: 2rem
}

@media screen and (min-width: 60rem) {
    .name {
        font-size: 3.9rem
    }
}

.links {
    text-align: center;
    padding-left: 0;
    font-size: 13px;
    margin-top: 2rem
}

.links li {
    display: inline-block;
    margin-bottom: 12px
}

@media screen and (min-width: 60rem) {
    .links li {
        display: inline-block;
        margin: 12px 24px 0 0;
    }
}

.links li a {
    font-weight: bold
}

.links svg {
    width: 25px;
    height: 25px;
    fill: white;
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}