/*globals*/
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
@font-face {
  font-family: "OpenMoji";
  src: url("https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/font/OpenMoji-color-glyf_colr_0/OpenMoji-color-glyf_colr_0.woff2") format("woff2");
}
:root {
	/*fonts*/
	--sans-serif: 'Inter'; --serif: 'Vollkorn'; --cursive: 'Caveat Brush'; --emoji: 'OpenMoji';
	/*colors*/
	--background: #FFFFFA; --pearl: #78CDD7;    --neutral: #247B7B;
}
body {background-color: var(--background);}
li {list-style-type: none;}
a {
	color: var(--neutral);
	font-family: var(--cursive), cursive;
}
a {text-decoration: none;}
a:hover {color: var(--pearl);}
::selection {
	background-color: var(--pearl);
	color: var(--background);
}

/*landing page*/
#landing {
	font-family: var(--cursive), cursive;
	font-size: 1.5rem;
	color: var(--neutral);
	text-align: center;
	max-width: 360px;
	margin: 0;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#landing nav {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 25px;
}
#landing nav img {
	max-width: 300px;
	max-height: 116px;
	border-radius: 10px;
}
#logoLanding img {height: 200px;}
#logoBusClassic img {height: 65px;}
#logoContact {font-size: 3.5rem;}

/*projects*/
#project {margin: 10px 30px 0;}
#project nav {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-family: var(--cursive), cursive;
	font-size: 1.2rem;
	color: var(--neutral);
	gap: 12px;
	padding-bottom: 5px;
	border-bottom: 3px solid var(--pearl);
}
#logoProject {flex-grow: 2;}
#logoProject img {
	height: 75px;
	position: relative;
	bottom: -10px;
}
.this {color: var(--pearl);}
.this::before {content: '>';}
.this::after {content: '<';}
#project nav > span:not(span.this)::before {content: '\2000';}
#project nav > span:not(span.this)::after {content: '\2000';}
#project h1 {
	font-family: var(--sans-serif), sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--neutral);
	margin: 20px 0 1.5rem;
	line-height: 2.5rem;
}
#project p {
	font-family: var(--serif), serif;
	line-height: 1.5rem;
	margin-bottom: 1rem;
}
#project main {
	display: grid;
	grid-template-columns: 3fr 4fr;
	gap: 50px;
}
#project #description a {font-size: 1.2rem;}
#project #description p::before {font-family: var(--emoji), cursive;}
#project #description p:lang(en)::before {content: '🏴󠁧󠁢󠁥󠁮󠁧󠁿\2004';}
#project #description p:lang(ca)::before {content: '🏴󠁥󠁳󠁣󠁴󠁿\2004';}
#project #description p:lang(es)::before {content: '🇪🇸\2004';}
#project #description p.website::before {content: '🌐\2004';}
#project #pictures .picture {
	display: inline-block;
	padding: 0 30px 20px 0;
	vertical-align: top;
}
#project #pictures .picture img {
	display: block;
	margin-bottom: 7px;
	height: 190px;
	border: 1px solid lightgray;
	vertical-align: baseline;
}
#project #pictures .picture span {
	font-family: var(--cursive), cursive;
	color: var(--pearl);
	font-size: 1.2rem;
}

@media screen and (max-width: 765px) {
#project nav span:not(.this) {display: none;}
}
@media screen and (max-width: 1000px) {
#project main {display: initial;}
#project #description {margin-bottom: 40px;}
}