/*  global  */

@font-face {
	font-family: Assassin;
	src: url("../fonts/Assassin$.ttf");
}

@font-face {
	font-family: KeepCalm-Medium;
	src: url("../fonts/KeepCalm-Medium.ttf");
}


/*  https://css-tricks.com/snippets/css/shake-css-keyframe-animation/   */

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}

@keyframes bg-color {
	0% {
		background-color: #253748;
	}
	100% {
		background-color: #1e2429;
	}
}

body {
	position: absolute;
	background-color: #1f1f1f;
/*  background-color: #253748;*/
/*	animation: bg-color 30s infinite alternate linear;*/
	color: #ffffff;
	font-family: 'Work Sans', sans-serif;
	margin: 0;
	padding: 0;
	left: 20%;
	width: 60%;
	height: 100%;
}

@media screen and (max-width: 1080px) {
	body {
		left: 10%;
		width: 80%;
	}
}

a {
	color: #30e030;
}

pre {
	background: #fff;
	color: black;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0px;
	white-space: pre-wrap;
}


/*  header  */

header {
	position: relative;
	word-break: keep-all;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: left;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 8px;
	font-family: Assassin;
	line-height: normal!important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

header div {
	display: inline-block;
}

header div.surname {
	color: #30e030;
}

header div.title {
	/* cursor: crosshair; */
	display: table-cell;
	color: #959595;
	font-size: 28px;
	letter-spacing: 6px;
}

header div.title:hover {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}


/*  nav */

nav {
	display: flex;
	flex-wrap: nowrap;
	font-family: "Times New Roman", Times, serif;
	font-style: oblique;
	margin-bottom: 10px;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	font-size: 22px;
	cursor: pointer;
	align-items: flex-end;
    justify-content: flex-end;
}

nav a {
	padding: 5px 10px 5px 10px;
	text-align: center;
	flex-grow: 2;
	color: #ffffff;
	text-decoration: none!important;
	transition: all 1.3s ease;
}

nav a:hover {
	color: #000000;
	background-color: #fff;
	transition:none;
}

nav div.social {
	display: flex;
	flex-grow: 1;
	flex-wrap: nowrap;
}