body {
    background-color: #232D33;
    color: #FEFFFB;
}

a, a:visited {
    color: #849696;
}

a:hover {
    color: #FF972C;
    text-decoration: none;
}

a.menu {
    // color: #FEFFFB;
    color: #FFFFFF;
}

a.active {
    color: #FF972C;
}

.content {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}

.headshot img {
    height: 100px;
}

.logotext {
    display: inline-block;
    color: #FF972C;
    font-size: 30px;
}

.navigation {
    display: inline-block;
}

.navigation ul {
    // display: none;
    list-style: none;
    // float: left;
}

.navigation ul li {
    // color: #b1c5c5;
    font-size: 16px;
    float: left;
    margin-right: 20px;
}

.navigation ul li:hover {
    color: #FF972C;
}

.main-content {
    font-size: 18px;
    font-weight: 300;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 550px;
}

@keyframes front-page-list-animation {
    from {margin-top: 60px; opacity: 0}
    to   {margin-top: 0px; opacity: 1}
}

.front-page-list {
    margin-left: -20px;
    animation-name: front-page-list-animation;
    animation-duration: 2s;
}

.front-page-list li {
    list-style: none;
}

.footer {
    position: fixed;
    bottom: 0;
    right: 10px;
}


/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
.hodor {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

/*
    https://color.adobe.com/ja/High-Tech-color-theme-2464373/

    #849696 >> gray
    >> possible variant - #b1c5c5
    #FEFFFB >> bone
    #232D33 >> dark
    #17384C >> blue
    #FF972C >> orange
*/