:root {
    --background-color: #fff;
    --foreground-color: #333;
    --link-color-hue: 151;
    --link-color: hsl(var(--link-color-hue), 44.7%, 50%);
    --link-color-hover: hsl(var(--link-color-hue), 44.7%, 45%);
    --header-foreground-color: #eee;
    --header-link-color: #ddd;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background-color: #111;
    margin: 0;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--foreground-color);
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}

.list-inline>li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

a, a:focus {
    transition: color .3s ease-in-out;
    color: #428bca;
    text-decoration: none;
}

a:hover, a:active {
    color: var(--link-color-hover);
}

ul, ol {
    padding-left: 25px;
}

header {
    color: var(--header-foreground-color);
    padding: 40px;
}

header h1 {
    text-transform: uppercase;
    font-size: 50px;
    letter-spacing: 15px;
    margin: 0 0 0 4px;
}

@media (max-width: 767px) {
    header {
        padding: 30px;
    }
    header h1 {
        letter-spacing: 5px;
        font-size: 40px;
    }
    .list-inline li {
        display: list-item;
    }
}

header h1 a, header h1 a:focus {
    color: var(--header-link-color);
}

header h1 a:hover {
    text-decoration: none;
}

header ul {
    margin: 25px 0 0;
}

header ul li {
    padding-bottom: 20px;
}

header ul a {
    color: var(--header-link-color);
    font-weight: 700;
}

.linkedin:hover {
    color: #0077B5;
}

.mail:hover {
    color: #EA4335;
}

.projects:hover {
    color: #8241f9;
}

.x:hover {
    color: #1DA1F2;
}