/* INTRO */
.intro-block {
	user-select: none;
}
.hi-block {
	position:relative;
	width:340px;
	height:108px;
	margin:96px auto 32px auto;
	font-family:"Oliver", cursive;
}
.hi-block .avatar {
	position:absolute;
	display:inline-block;
	left:0;
	width:74px;
	transform:rotate(-10deg);
	cursor:url('/img/cursor-pointer.png') 18 0, auto;

	user-drag:none;
	-ms-user-drag: none;
	-moz-user-drag: none;
	-webkit-user-drag: none;

	transition:transform 300ms var(--timing-bounce);
}

.hi-block .avatar:not(.pressed):hover{
	transform:scale(1.1);
}

.hi-block .hi {
	position:absolute;
	top:10px;
	left:80px;

	font-size:52px;

	transform-origin:bottom left;
	transition-duration:300ms;
	transition-property: transform;
	transition-timing-function: var(--timing-bounce);
}
.hi-block .hi.hidden {
	transform:scale(0);
}

.hi-block .hi:after {
	content:'!';
	display:inline-block;
	transform: translate(0, -20px);
}

.hi-block .name {
	position:absolute;
	top:64px;
	left:92px;

	font-size:36px;
}



/* POSITION */
.position-block {
	position:relative;
	width:500px;
	height:288px;
	margin:0 auto;
}

.line1, .line2, .line3 {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));
	font-size:64px;
	font-family: "Boldonse", monospace;
	text-transform:uppercase;
	line-height:1;

	display:inline-block;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
	padding: 24px;

	position:absolute;
	left:64px;
}
.line1 { top:0; padding-bottom:0; z-index:1 }
.line2 { top:84px; }
.line3 { top:192px; padding-top:0; z-index:1}

.line1 .ampersand {
	font-family:"Oliver", cursive;
	display:inline-block;
	transform: translate(-8px, -12px);
}

.position-block .side {
	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-family: "Oliver", cursive;
	font-size:48px;

	display:inline-block;
	padding:2px 16px;
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));

	position:absolute;
	top:266px;
	left:0;
	transform-origin:top left;
	transform:rotate(-90deg);
}

.position-block .side.animated .sep-letter {
	transform:scale(0);
	animation-name:scale-up;
	animation-timing-function:var(--timing-bounce);
	animation-duration:600ms;
	animation-fill-mode:forwards;
}
.position-block .side .sep-letter:nth-child(2) { animation-delay:0ms; }
.position-block .side .sep-letter:nth-child(2) { animation-delay:120ms; }
.position-block .side .sep-letter:nth-child(3) { animation-delay:240ms; }
.position-block .side .sep-letter:nth-child(4) { animation-delay:360ms; }
.position-block .side .sep-letter:nth-child(5) { animation-delay:480ms; }
.position-block .side .sep-letter:nth-child(6) { animation-delay:600ms; }
.position-block .side .sep-letter:nth-child(7) { animation-delay:720ms; }
.position-block .side .sep-letter:nth-child(8) { animation-delay:840ms; }
.position-block .side .sep-letter:nth-child(9) { animation-delay:960ms; }
.position-block .side .sep-letter:nth-child(10) { animation-delay:1080ms; }
.position-block .side .sep-letter:nth-child(11) { animation-delay:1200ms; }
.position-block .side .sep-letter:nth-child(12) { animation-delay:1320ms; }
.position-block .side .sep-letter:nth-child(13) { animation-delay:1440ms; }

.intro-block .links {
	padding:0;
	margin:32px 0;
	list-style:none;
	text-align:center;
}
.intro-block .links li {
	display:inline-block;
	margin:0 20px;
}
.intro-block .links a {
	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-size:16px;
	text-decoration:none;
	padding:8px 12px;

	display:inline-block;
	transition:transform 300ms;
	transition-timing-function: var(--timing-bounce);
}
.intro-block .links a:hover {
	transform:translate(0, -8px);
}

.intro-block .links .link-cv img {
	transform: translateY(2px);
}
.intro-block .links .link-linkedin a {
	color: light-dark(var(--light-linkedin), var(--dark-linkedin));
}
.intro-block .links .link-linkedin img {
	transform: translate(2px, 1px);
}
.intro-block .links .link-whatsapp a {
	color: light-dark(var(--light-whatsapp), var(--dark-whatsapp));
}
.intro-block .links .link-whatsapp img {
	transform: translate(2px, 2px);
}

@media(max-width: 768px) {
	.position-block {
		margin-left:auto;
		margin-right:auto;
		width:390px;
		height:230px;
	}
	.position-block .line1,
	.position-block .line2,
	.position-block .line3 {
		font-size:48px;
		left:48px;
	}
	.position-block .line2 {
		top:64px;
	}
	.position-block .line3 {
		top:154px;
	}
	.position-block .side {
		font-size:36px;
		top:208px;
		left:0;
	}
}
@media(max-width: 400px) {
	.hi-block {
		width:310px;
	}
	.hi-block .hi {
		font-size:48px;
	}
	.hi-block .name {
		font-size:32px;
	}

	.position-block {
		margin-left:auto;
		margin-right:auto;
		width:300px;
		height:190px;
	}
	.position-block .line1,
	.position-block .line2,
	.position-block .line3 {
		font-size:36px;
		left:34px;
	}
	.position-block .line2 {
		top:52px;
	}
	.position-block .line3 {
		top:128px;
	}
	.position-block .side {
		font-size:24px;
		top:148px;
		left:0;
	}
}