html, body {
	overscroll-behavior-y: none;
	scrollbar-color: white;

	font-family: monospace;
	font-size: 1.3rem;
	color: white;
}

body {
	background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;

	--pad: max(0px, calc((100vw - 1000px) / 2));
	padding-left: var(--pad);
	padding-right: var(--pad);
}


/* START profile */
.profile h2 {
	margin: 0.5em 0 0.5em 0;
	font-size: 1.5rem;
}

header > .small-description {
	font-size: 1rem;
	background: rgb(from gray r g b / 30%);
	padding: 1%;
	border-radius: 10px;
}

.tp-description > p {
	background: rgb(from white r g b / 20%);
	border-radius: 10px;
	padding: 2.5px;
	text-align: center;
}

header > .small-description, .tp-description > span {
	text-align: justify;
	hyphens: auto;
	/* font-size: 1rem; */
	text-wrap: pretty;
}

/* END profile */



/* START career */
.timeline {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.timeline-bar {
	background: white;
	width: 0.25ch;
	/* height: 3.5em; */
	/* min-height: 2em; */
	border-radius: 0.3ch;
	margin-left: 5%;
}

.timeline-positions > div::before {
	content: "";
	display: inline-block;
	position: absolute;
	height: 10px;
	width: 10px;
	background: white;
	border-radius: 5px;
	translate: -27px 5px;
}

.timeline-bar       { flex: 0 0 auto; }  /* takes only what it needs */
.timeline-positions { flex: 1 1 auto; }  /* fills the re*/

.tp-dashboard { 
	margin-top: 1%;
}
.tp-meta > * { 
	display: block; 
	font-size: 0.6em;
}

.tp-description {
	font-size: 0.7em;
}
.tp-meta { 
	margin-left: 1%;
}

.tp-position + .tp-position{ 
	margin-top: 1%;
}

.tp-meta > :first-child { font-weight: bold; }
.tp-meta, .tp-description { display: inline-block; vertical-align: top; } 

.tp-meta        { width: 24%; }
.tp-description { width: 70%; }

/* .tp-meta, .tp-name { user-select: none; } */


.tp-description p {
	margin: 5px;
}

.tp-description > :not(p) + p {
	margin-top: 1%; 
}

/* START footer */
.p-footer {
	margin: 5%;
	font-size: 0.8rem;
	text-align: center;
}

.p-footer > div {
	border-top: 1px solid white;
	padding: 5px;
}


/* START logo */
.icons.cv::before {
	background-image: url('/img/cv.svg');
}

.linkedin::before {
	background-image: url('/img/linkedin.svg');
}
.github::before {
	background-image: url('/img/github.svg');
}

.icons::before {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	content: '';
	width: 20px;
	height: 20px;
	user-select: none;
}

.logo {
	height: 150px;
	user-select: none;
}

/* END logo */

@media (max-width: 450px){
	html, body {
		font-size: 1.1rem;
	}
	.tp-meta        { display: block; width: auto; margin: 2% 0 2% 0; }
	.tp-description { display: block; width: auto; }
	.tp-name        { font-size: 0.8em; } 

	header > .small-description, .tp-description > span {
		text-align: left;
	}

	.tp-position + .tp-position{ 
		margin-top: 5%;
	}

	.timeline-positions > div::before {
		translate: -26.5px 5px;
	}

}