@font-face {
	font-family: fontello;
	src: url(/assets/fontello-7649b3a7.eot);
	src: url(/assets/fontello-7649b3a7.eot#iefix) format("embedded-opentype"), url(/assets/fontello-30b9a727.woff2) format("woff2"), url(/assets/fontello-af22cefc.woff) format("woff"), url(/assets/fontello-521f99c2.ttf) format("truetype"), url(/assets/fontello-79a7de83.svg#fontello) format("svg");
	font-weight: 400;
	font-style: normal
}

[class^=icon-]:before,
[class*=" icon-"]:before {
	font-family: fontello;
	font-style: normal;
	font-weight: 400;
	width: 50px;
	display: inline-block;
	margin-right: .2em;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon-emo-happy:before {
	content: ""
}

.icon-emo-laugh:before {
	content: ""
}

.icon-emo-wink2:before {
	content: ""
}

.icon-twitter-circled:before {
	content: ""
}

.icon-linkedin-circled:before {
	content: ""
}

.icon-github-circled:before {
	content: ""
}

.icon-spotify:before {
	content: ""
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

body {
	line-height: 1
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

body {
	-webkit-text-size-adjust: none
}

mark {
	background-color: transparent;
	color: inherit
}

input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none
}

html {
	box-sizing: border-box
}

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

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none
}

h1 {
	font-size: 2em;
	line-height: 1.5em
}

h2 {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 700
}

h3 {
	font-size: 1.25em;
	line-height: 1.5em
}

h4 {
	font-size: 1.1em;
	line-height: 1.5em
}

h5 {
	font-size: .9em;
	line-height: 1.5em
}

h6 {
	font-size: .7em;
	line-height: 1.5em
}

sub {
	font-size: .8em;
	position: relative;
	top: .5em
}

sup {
	font-size: .8em;
	position: relative;
	top: -.5em
}

hr {
	border: 0;
	border-bottom: solid 2px #efefef;
	margin: 2em 0
}

blockquote {
	border-left: solid 6px #efefef;
	font-style: italic;
	margin: 0 0 2em;
	padding: .5em 0 .5em 1.5em
}

code {
	background: #f7f7f7;
	border-radius: .35em;
	border: solid 2px #efefef;
	font-family: Courier New, monospace;
	font-size: .9em;
	margin: 0 .25em;
	padding: .25em .65em
}

pre {
	-webkit-overflow-scrolling: touch;
	font-family: Courier New, monospace;
	font-size: .9em;
	margin: 0 0 2em
}

pre code {
	display: block;
	line-height: 1.75em;
	padding: 1em 1.5em;
	overflow-x: auto
}

.align-left {
	text-align: left
}

.align-center {
	text-align: center
}

.align-right {
	text-align: right
}

@font-face {
	font-family: Mulish;
	src: url(/assets/muli-webfont-8e44c055.woff2) format("woff2"), url(/assets/muli-webfont-abf091ae.woff) format("woff");
	font-weight: 400;
	font-style: normal
}

:root {
	--light-color: #eae0d6;
	--dark-color: #314457;
	--dark-light: #808b9a;
	--curve-color: #d6d1cb;
	--dark-color-icons: rgba(49, 68, 87, .6);
	--background-curve: url(/assets/bubble-text-b4d09bda.svg)
}

@media (prefers-color-scheme: dark) {
	:root {
		--light-color: #314457;
		--dark-color: #eae0d6;
		--dark-light: #808b9a;
		--curve-color: rgba(49, 68, 87, .6);
		--dark-color-icons: #d6d1cb;
		--background-curve: url(/assets/bubble-text-dark-fb71fb99.svg)
	}
}

html {
	height: 100%
}

body {
	font-size: 16pt;
	font-weight: 400;
	line-height: 1.75em;
	color: var(--dark-color);
	font-family: Mulish, Helvetica, sans-serif;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	background-image: var(--background-curve);
	background-size: cover;
	background-position-x: right;
	background-position-y: top;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: var(--light-color)
}

a {
	transition: color .2s ease-in-out, border-color .2s ease-in-out;
	border-bottom: dotted 1px;
	color: var(--dark-color);
	text-decoration: none;
	transition: all .5s
}

a:hover {
	border-bottom-color: transparent;
	color: var(--light-color) !important;
	text-decoration: none;
	background-color: var(--dark-color);
	padding: 5px;
	border-radius: 10px
}

strong,
b {
	color: var(--dark-color);
	font-weight: 400
}

em,
i {
	font-style: italic
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--dark-color);
	font-weight: 500;
	line-height: 1em;
	margin: 0 0 1em
}

.main {
	clear: both;
	transition: all .3s;
	display: flex;
	flex-direction: row;
	padding: 0 2em
}

header {
	padding: 2em
}

header h1 {
	font-weight: 700;
	margin-bottom: 0;
	margin-left: 20px;
	font-size: 65px
}

.header-left h1:after {
	content: ".com";
	display: none
}

.header-left {
	float: left
}

.icons {
	line-height: 1.6
}

.icons a {
	color: var(--dark-color-icons)
}

.icons a:hover {
	color: var(--dark-color) !important;
	padding: 0;
	border-radius: 0;
	background-color: transparent
}

.icons li {
	display: inline-block
}

.icons li:last-child {
	padding-right: 0
}

.icons li .icon:before {
	font-size: 1.9em
}

.icon {
	text-decoration: none;
	border-bottom: none
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased
}

.icon>.label {
	display: none
}

.icon:before {
	line-height: inherit
}

.icon.brands:before {
	font-family: "Font Awesome 5 Brands"
}

.profile {
	background-color: var(--dark-light);
	border-radius: 100%;
	text-align: center;
	width: 600px;
	height: 600px;
	min-width: 600px;
	min-height: 600px;
	overflow: hidden;
	margin-left: 30px
}

.profile img {
	width: 100%;
	border-radius: 100%;
	margin-top: 5px;
	overflow: hidden
}

.hide-img {
	display: none
}

.profile h2 {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--light-color);
	text-shadow: 0 0 2px var(--dark-color);
	margin-top: 10px
}

canvas {
	border-radius: 100%
}

.content {
	flex: 50%;
	margin: 5em 2em 2em 6em;
	display: flex;
	flex-direction: column;
	align-items: stretch
}

.content p {
	font-size: 30px;
	margin: 0 0 1em
}

.ciao {
	font-size: 30px;
	color: var(--dark-color);
	margin-left: 10px
}

.actions {
	font-size: 28px
}

.content h2.skills {
	display: none;
	font-size: 20px;
	margin-top: 1em
}

.skill-list {
	list-style-type: none;
	padding-left: 0;
	padding-right: 0;
	margin: 2em 0 0
}

.skill-list li {
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 0 9px 2px;
	font-size: 16px;
	line-height: 1.75em;
	color: var(--light-color);
	background-color: var(--dark-color);
	overflow: hidden;
	border-radius: 20px
}

@media print {

	html,
	body {
		height: auto
	}

	header {
		margin-bottom: 2em
	}

	.header-left h1:after {
		display: inline
	}

	.icons li {
		display: none
	}

	.main {
		flex-direction: column;
		align-items: center
	}

	.profile {
		width: 200px;
		height: 200px;
		min-width: 200px;
		min-height: 200px
	}

	.hide-img {
		display: block
	}

	.content {
		margin: 3em 3em 5em
	}

	h1 {
		display: none
	}

	.content p {
		font-size: 20px;
		line-height: 1.2
	}

	.content h2.skills {
		display: block
	}

	.skill-list {
		margin: 0
	}

	.skill-list li {
		font-size: 15px
	}

	.actions li {
		display: none
	}
}

@media screen and (max-width: 1280px) {

	html,
	body {
		height: auto
	}

	header {
		padding: 2em 2em 0
	}

	.content {
		margin: 3em 3em 5em
	}

	.content p {
		font-size: 40px;
		line-height: 1.2
	}

	.main {
		flex-direction: column;
		align-items: center
	}

	.skill-list {
		margin: 3em 0 0
	}

	.skill-list li {
		font-size: 25px
	}

	.actions li {
		font-size: 35px
	}
}

@media screen and (max-width: 736px) {
	header {
		padding: 2em
	}

	.header-left {
		display: none
	}

	.header-right {
		text-align: center
	}

	.content {
		margin: 1em
	}

	.profile {
		margin-left: 0;
		width: 400px;
		height: 400px;
		min-width: 400px;
		min-height: 400px
	}
}

@media screen and (max-width: 480px) {
	header {
		padding: 1em
	}

	.main {
		padding: 0 1em
	}

	.content h1,
	.content p {
		font-size: 16pt
	}

	.content .ciao {
		display: none
	}

	.actions li {
		font-size: 16pt
	}

	.skill-list {
		margin: 1.5em 0 0
	}

	.skill-list li {
		font-size: 12pt;
		line-height: 1.6em
	}

	.profile {
		margin-left: 0;
		width: 200px;
		height: 200px;
		min-width: 200px;
		min-height: 200px
	}
}

@media screen and (max-width: 280px) {
	.icons li .icon:before {
		font-size: 1.4em;
		margin-right: 0
	}

	.content {
		margin: .4em
	}

	.content p,
	.actions li {
		font-size: 14pt
	}

	.skill-list li {
		font-size: 10pt
	}
}

.interactive-hint {
	display: inline-block;
	margin-top: 0.5rem;
	color: #777;
	font-style: italic;
	font-size: 1.2rem;
	cursor: default;
	transition: color 0.2s ease;
}

.interactive-hint:hover {
	color: #555;
}