/*--------------------------------------------------------------------
         GERICCI.ME - CURRICULUM
         By Ge Ricci, 2013-2022
-------------------------------------------------------------------- */


/* CSS index:
 	RESET
	DEFAULT VALUES
	STRUCTURE
	NAVIGATION
	TIMELINE
	MEDIA QUERIES
*/

/* ------------------------------ RESET ---------------------------- */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
}

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

html {scroll-behavior: smooth;}
body {overflow-y: scroll;}

/* --------------------------------------------------------------------------- */
/* -------------------------- THEME'S DEFAULT VALUES ------------------------- */
/* --------------------------------------------------------------------------- */

@font-face {
    font-family: "HeptaSlab";
    src: url("HeptaSlab-VariableFont_wght.ttf");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    unicode-range: U+000D, U+0020-007E, U+00A0-017F, U+018F, U+0192, U+019D,
        U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB,
        U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272,
        U+02B9-02BA, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0300-0304,
        U+0306-030C, U+030F, U+0311-0313, U+031B, U+0323-0324, U+0326-0328,
        U+032E, U+0331, U+0335-0338, U+0394, U+03A9, U+03BC, U+03C0,
        U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E,
        U+1EA0-1EF9, U+2009, U+2010-2011, U+2013-2015, U+2017-201A,
        U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A,
        U+203E, U+2044, U+2052, U+2070, U+2074-2079, U+207F-2089, U+2099,
        U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AD, U+20B1-20B2,
        U+20B5, U+20B9-20BA, U+20BC-20BD, U+2105, U+2113, U+2116-2117, U+2122,
        U+2126, U+212E, U+2190-2195, U+21A8, U+2202, U+2205-2206, U+220F,
        U+2211-2212, U+2215, U+2219-221A, U+221E-221F, U+2229, U+222B, U+2248,
        U+2260-2261, U+2264-2265, U+2302, U+2310, U+2320-2321, U+25CA,
        U+27E8-27E9, U+E0FF, U+EFFD, U+F000, U+FB01-FB02, U+FEFF;
}


body {
	font: 100%/1.58 HeptaSlab, Rockwell, Baskerville, Palatino, serif;
	color: #FFF;
	/*background-color: #2F3C46;*/
	background-image: linear-gradient(#2F3C46, #3C2D43);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

h1 {
	font-size: calc(1.5em + 1vw);
	font-weight: 600;
	line-height: 1.2;
	color: #FA8E00;
}
	h1 strong {
		display: block;
		font-size: 80%;
		font-weight: 400;
		color: #CCC;
		margin-bottom: 0.25em;
	}
	h1 small {
		font-size: 50%;
		vertical-align: 0.5em;
	}

p.baseline {
	font-size: 1.2em;
	text-align: center;
	color: #999;
	background: #FFF;
	padding: 0.5em;
}

h2 {
	position: relative;
	font-size: calc(1.4em + 1vw);
	font-variation-settings: "wght" 700;
	line-height: 1.3;
	color: #0ABAFF;
	background-color: transparent;
	padding-left: 1rem;
}

h3 {
	font-size: 2em;
	font-weight: normal;
	line-height: 1.2;
	margin: 1.5em 0 1em;
}
	h3 img {margin-top: -8px;}
	div h3:first-child {margin-top: 0;}
	h3 small {display: block;}

h4 {
	font-size: 0.9em;
	font-weight: normal;
	padding: 5px 0 5px 0;
	margin: 1em 0 0.5em;
}

h5 {
	font-size: 0.85em;
	font-weight: normal;
	color: #FF8400;
	background: transparent;
	margin: 0.8em 0 0.5em;
}

p {font-size: 0.8em;}

dt {
	position: relative;
	font-size: calc(0.95em + 0.5vw);
	font-variation-settings: "wght" 700;
	padding-left: 1rem;
	margin-bottom: 0.8em;
}

dd {
	font-size: calc(0.7em + 0.5vw);
	padding-left: 1rem;
}

code {font-size: 120%;}

p + ul {margin: 0.5em 0;}

a {color: inherit; background: transparent;}
a:hover {text-decoration: none;}
:focus {outline: 2px dotted #FA8E00;}

abbr {border-bottom: 1px dotted #069; cursor: help;}

hr {display: none;}

img {max-width: 100%;}

article {padding-top: 5rem;}

/* -------------------- STRUCTURE -------------------- */

#container {
	padding-top: 5rem;
	margin: 5vw 6%;
}

footer p {
	font-size: 0.75em;
}

footer p:first-child {color: #CCC;}

/* -------------------- NAVIGATION -------------------- */

nav ul {
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: calc(100% - 1rem);
	top: 0;
	left: 0;
	list-style-type: none;
	text-align: center;
	background-image: radial-gradient(#2F3C46 2px, #252F37 2px);
	background-size: calc(4 * 2px) calc(4 * 2px);
	padding: 0 0.5rem;
	z-index: 10;
}

nav li {
	flex-basis: 30%;
	font-size: 0.75em;
	line-height: 1.3;
}

nav a {
	display: block;
	text-decoration: none;
	color: #FFF;
	background-color: rgba(0,0,0,0);
	padding: 0.75em 0.5rem 1em;
	transition: background-color 0.5s;
}
nav a:hover, a[aria-current] {background-color: #FA8E00;}

nav strong {display: block;}

p.back-2-top {
	position: fixed;
	width: 15px;
	bottom: 0.5rem;
	right: 0.5rem;
	padding: 0.5em;
}

/* --------------------- TIMELINE ---------------------- */

div.timeline {
	padding: 0 2rem 0 calc(8px + 1rem);
	margin-bottom: 3.5rem;
}

article {position: relative;}

article::before {
	display: block;
	content: "";
	position: absolute;
	top: 4rem;
	left: -24px;
	width: 15px;
	height: calc(100% - 2rem);
	background-color: #0ABAFF;
	border-radius: 8px;
}

dt::before {
	content: " ";
	position: absolute;
	top: 0;
	left: -32px;
	width: 30px;
	height: 30px;
	background: #0ABAFF;
	border-radius: 30px;
	z-index: 1;
}
dt::after {
	content: " ";
	position: absolute;
	top: 10px;
	left: -22px;
	width: 10px;
	height: 10px;
	background: #FFF;
	border-radius: 10px;
	z-index: 2;
}

p.country {
	font-variant-caps: all-small-caps;
	padding-left: 1rem;
	margin-bottom: 2rem;
}

dl + dl {margin-top: 2rem;}
dd + dd {margin-top: 0.8em;}

.fact {
	font-variation-settings: "wght" 400;
	color: #CCC;
}
.education {color: #CFC359;}
.job {color: #FF9C1C;}

/* ------------------------------- MEDIA QUERIES -------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
		scroll-behavior: auto;
	}
}

@media screen and (min-width: 780px) {
	article::before {left: calc(40% - 1rem - 8px);}
	h2 {margin-left: 40%;}
	dt {margin-left: 40%;}
	dd:not(.fact) {margin-left: 40%;}

	dd.fact {width: 30%; text-align: right;}
}

@media screen and (min-width: 1200px) {
	#container {padding-top: 0;}
	div.timeline {padding: 0 5rem 0 0;}
	h1 {margin-bottom: 4rem;}
	h2, dt, dd:not(.fact) {padding-left: 2rem;}
	dd.fact {font-size: 1em;}
	nav ul {
		flex-direction: column;
		justify-content: flex-start;
		gap: 4vh;
		left: auto;
		right: 0;
		width: 4rem;
		height: 100%;
		padding-top: 1rem;
	}
	nav li {flex-basis: auto;}
	p.country {
		font-size: 1.2em;
		padding-left: 0;
		margin-top: -2em;
	}
	p.back-2-top {right: 1.5rem; z-index: 10;}
}