/* Variables */

:root {
    --width-of-navigation: 220px;
    --max-content-width: 950px;
}
/* Whole document styles*/

body {
    font-family: hshieh, -apple-system, Times, HelveticaNeue-Thin, HelveticaNeue, Helvetica;
    margin: 0;
    box-sizing: border-box;
    font-color: white;
    -webkit-backdrop-filter: blur(10px);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

#nav-contents {
	padding: 20px;
    padding-top: 50px;

}

#name-plate {
    font-weight: 700;
    font-size: 30px;
    line-height: 85%;
}

#name-plate #top-name {
    text-transform: uppercase;
    font-size: 20px;
}

#name-plate #bottom-name {
    text-transform: lowercase;
}

#button-elements {
    padding-top: 30px;
    font-size: 18px;
}

.link {
    cursor: hand;
    color: #777;
    padding-top: 2px;
    padding-bottom: 2px;
    transition: color .1s ease-in-out;
    -moz-transition: color .1s ease-in-out;
    -webkit-transition: color .1s ease-in-out;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; 
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
}

.link:hover {
    color: #555;
}

.link:active {
    color: black;
}

.spacer {
    height: 20px;
}