/*
Theme Name: raul
Version: 5.0
Theme URI: https://www.raulrincon.me
Author: Raul Rincon Melendez
Author URI: https://www.raulrincon.me
Description: The fourth version theme of my personal website.
Tags: white, yellow, gradients, colorful, designer, tech, dev.
Text Domain: raulrincon
*/

:root {
	--dark: hsla(0, 0%, 11%, 1);
	--light-dark: hsla(0, 0%, 16%, 1);
	--darker: hsla(0, 0%, 35%, 1);
	--light: hsla(210, 40%, 98%, 1);
	--yellow: hsla(58, 97%, 71%, 1);
	--newspaper: hsl(264, 15%, 95%);
	
	--txt: hsla(0, 0%, 75%, 1);
	
	--lime: hsla(57, 100%, 60%, 1);
	--light-lime: hsla(45, 86%, 80%, 1);
	--green: hsla(91, 100%, 62%, 1);
	--purple: hsla(266, 100%, 50%, 1);
	--red: hsla(2, 79%, 56%, 1);
	--orange: hsla(20, 100%, 56%, 1);
	--teal: hsla(186, 100%, 50%, 1);
	--light-teal: hsla(206, 100%, 90%, 1);
	--pink: hsla(337, 79%, 61%, 1);
	--blue: hsla(225, 76%, 50%, 1);
	
	--basic: 'Work Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
	--title: 'Playfair Display', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--kiwi: 'Kiwi Maru', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--mono: 'JetBrains Mono', revertMenlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

::selection {
	background: var(--lime);
	color: var(--dark);
}

html {
	padding: 3.75rem;
	background-color: var(--newspaper);
}

@media only screen and (max-width: 1230px) {
	html {
		padding: 1.5rem;
	}
}

@media only screen and (max-width: 640px) {
	html {
		padding: 0;
	}
}

body {
	background-color: var(--dark);
	font-family: var(--basic);
	color: var(--txt);
}

@media only screen and (max-width: 1150px) {
	body {
		padding: 1rem;
	}
}

header,
main,
footer {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
}

/* start layout */
header {
	padding: 2rem 0;
	position: relative;
	flex-flow: row nowrap;
	justify-content: space-between;
	border-bottom: 1px solid #49494A;
}

header div {
	text-align: left;
}

header div h1 {
	line-height: 1;
	font-family: var(--title);
	font-size: 6rem;
	font-weight: 700;
	color: var(--light);
	margin-bottom: .625rem;
}

@media only screen and (max-width: 680px) {
	header div h1 {
		font-size: 4rem;
	}
}

@media only screen and (max-width: 375px) {
	header div h1 {
		font-size: 3rem;
	}
}

header div h4 {
	line-height: 1;
	font-family: var(--kiwi);
	font-size: 2rem;
	font-weight: 500;
	color: var(--darker);
	margin-bottom: .625rem;
}

header div h2 {
	font-family: var(--kiwi);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--yellow);
}

header figure {
	position: absolute;
	right: 2.5rem;
	top: 2.5rem;
}

header figure img {
	max-width: 100%;
}

/* main */
main {
	flex-flow: column nowrap;
}

main .about {
	text-align: left;
	padding-left: 2rem;
}

@media only screen and (max-width: 680px) {
	main .about {
		padding-left: 0;
	}
}

main .about h2,
main section > h2 {
	flex: 1 1 100%;
	font-family: var(--title);
	font-size: 2rem;
	font-weight: 700;
	color: var(--yellow);
}

main section > h2 {
	margin: 4rem auto;
	color: var(--light);
}

.about h2 {
	margin-bottom: 2rem;
}

.about ul {
	list-style-type: none;
	text-align: left;
	margin-left: 0;
	margin-bottom: 2rem;
}

.about ul li {
	color: var(--txt);
	line-height: 1.6;
}

.about ul li:not(:last-child) {
	margin-bottom: .312rem;
}

.about ul li a {
	color: var(--txt);
	text-decoration: none;
	transition: color 140ms linear;
}

.about ul li:first-child a {
	font-size: 1.375rem;
	color: hsla(0, 0%, 100%, 1);
}

.about ul li:nth-child(2) a,
.about ul li:nth-child(3) a {
	font-family: var(--mono);
}

.about ul li a:hover,
.about ul li a:focus {
	color: var(--lime);
}

.about ul li .flag-ve {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.about ul li figure img {
	max-width: 32px;
	max-height: 32px;
	margin-right: .5rem;
}

.about p  {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--txt);
	max-width: 500px;
	text-align: left;
}

/* timeline */
@media only screen and (max-width: 320px) {
	.timeline {
		position: relative;
	}
	
	.timeline .mobile-line {
		position: absolute;
		left: 36px;
		background-color: rgb(71, 71, 71);
		display: block;
		width: 1px;
		height: 1220px;
		z-index: 1;
	}
}

.timeline div {
	padding: 3rem 2.5rem;
	border-radius: 16px;
	background-color: var(--light-dark)
}

@media only screen and (max-width: 460px) {
	.timeline div {
		padding: 1.5rem 1.25rem;
	}
}

.timeline div ol {
	max-width: 100%;
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
}

@media only screen and (max-width: 1080px) {
	.timeline div ol {
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 320px) {
	.timeline div ol {
		position: relative;
		z-index: 2;
	}
}

.timeline div ol li {
	flex: 1 0 154px;
	text-align: left;
}

@media only screen and (max-width: 1080px) {
	.timeline div > ol li {
		flex: 1 1 30%;
		margin-bottom: 2rem;
	}
}

@media only screen and (max-width: 640px) {
	.timeline div > ol li {
		flex-basis: 50%;
	}
	
	.timeline div > ol li:last-child,
	.timeline div > ol li:nth-last-child(2) {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 320px) {
	.timeline div > ol li {
		flex-basis: 100%;
	}
	
	.timeline div > ol li > *:not(figure,a) {
		padding-left: 2.25rem;
	}
}

.timeline div ol li figure.tl-mark {
	display: flex;
	margin-bottom: 1.25rem;
}

.timeline div ol li figure.tl-mark span {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background-color: var(--dark);
	margin-right: .5rem;
}

.timeline div ol li:first-child figure.tl-mark span { background-color: var(--red); }
.timeline div ol li:nth-child(2) figure.tl-mark span { background-color: var(--orange); }
.timeline div ol li:nth-child(3) figure.tl-mark span { background-color: var(--lime); }
.timeline div ol li:nth-child(4) figure.tl-mark span { background-color: var(--green); }
.timeline div ol li:nth-child(5) figure.tl-mark span { background-color: var(--teal); }

.timeline div ol li:last-child figure.tl-mark span {
	border-radius: 32px;
	background-color: var(--yellow);
	box-shadow: 0 0 0 0 rgba(0, 228, 255, 0);
	transform: scale(1);
	animation: pulse 2s infinite;
	position: relative;
}

.timeline div ol li:last-child figure.tl-mark span:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 32px;
	height: 32px;
	content: '';
	border-radius: 32px;
	background-color: var(--yellow);
	box-shadow: 0 0 0 0 rgba(0, 228, 255, 0);
	transform: scale(1);
	animation: twolse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(.8);
		box-shadow: 0 0 0 0 rgba(0, 228, 255, 0.25);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 14px rgba(0, 228, 255, 0);
	}

	100% {
		transform: scale(.8);
		box-shadow: 0 0 0 0 rgba(0, 228, 255, 0);
	}
}

@keyframes twolse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 228, 255, 0.15);
	}

	70% {
		box-shadow: 0 0 0 24px rgba(0, 228, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 228, 255, 0);
	}
}

.timeline div ol li figure.tl-mark figcaption {
	margin: auto 0;
	font-family: var(--mono);
	font-size: .875rem;
	color: var(--light);
	text-align: left;
}

.timeline div ol li:last-child figure.tl-mark figcaption {
	font-weight: 700;
}

.timeline div ol li h3 {
	font-family: var(--title);
	font-size: 1.125rem;
	color: var(--light);
	margin-bottom: .25rem;
}

.timeline div ol li ul {
	list-style-type: none;
	text-align: left;
}

.timeline div ol li ul li {
	text-align: left;
	line-height: 1.4;
	color: hsla(0, 0%, 48%, 1);;
	padding: 2px 0;
}

@media only screen and (max-width: 1080px) {
	.timeline div ol li ul li {
		margin-bottom: 0;
	}
}

.timeline div ol li ul li a,
.timeline div ol li ul li a:visited {
	display: block;
	text-decoration: none;
	color: hsla(0, 0%, 48%, 1);
	transition: color 140ms linear;
}

.timeline div ol li:first-child ul li a:hover,
.timeline div ol li:first-child ul li a:focus {
	color: var(--red);
}

.timeline div ol li:nth-child(2) ul li a:hover,
.timeline div ol li:nth-child(2) ul li a:focus {
	color: var(--orange);
}

.timeline div ol li:nth-child(3) ul li a:hover,
.timeline div ol li:nth-child(3) ul li a:focus {
	color: var(--lime);
}

.timeline div ol li:nth-child(4) ul li a:hover,
.timeline div ol li:nth-child(4) ul li a:focus {
	color: var(--green);
}

.timeline div ol li:nth-child(5) ul li a:hover,
.timeline div ol li:nth-child(5) ul li a:focus {
	color: var(--teal);
}

.timeline div ol li:nth-child(6) ul li a:hover,
.timeline div ol li:nth-child(6) ul li a:focus {
	color: var(--yellow);
}

/* skills */
.skills {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.skills div {
	flex: 0 1 50%;
	text-align: left;
}

@media only screen and (max-width: 700px) {
	.skills div {
		flex-basis: 100%;
	}
}

.skills div p {
	font-size: 1.125rem;
	color: var(--txt);
	line-height: 1.6;
	max-width: 540px;
}

@media only screen and (max-width: 700px) {
	.skills div p {
		max-width: none;
	}
}

.skills div h3 {
	margin: 2rem 0 1.25rem 0;
	font-size: 1.25rem;
	font-weight: 700;
	font-family: var(--title);
	color: var(--green);
}

.skills div h3:first-of-type {
	color: var(--lime);
}

.skills div ul {
	margin: 0 0 2rem 0;
	padding-left: 4rem;
	text-align: left;
}

.skills > div ul {
	padding-left: 3rem;
}

.skills div ul li {
	font-size: 1.125rem;
	line-height: 2rem;
}

.skills div ul li:not(:last-child) {
	margin-bottom: .312rem;
}

.skills > div:last-child {
	flex: 0 1 35%;
	background-color: var(--light-dark);
	padding: 2rem;
	border-radius: 16px;
	display: flex;
	flex-flow: column nowrap;
}

@media only screen and (max-width: 700px) {
	.skills > div:last-child {
		flex-basis: 100%;
		margin-top: 2rem;
		flex-direction: row;
	}
}

@media only screen and (max-width: 560px) {
	.skills > div:last-child {
		flex-direction: column;
	}
}

.skills div:last-child .apps:not(:last-child) {
	margin-bottom: 2rem;
}

.skills div figure {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
}

.skills div:last-child figure svg {
	margin: auto;
	max-width: 38px;
	max-height: 38px;
}

.skills div .apps {
	flex: 0 1 auto;
}

@media only screen and (max-width: 700px) {
	.skills div:last-child .apps {
		flex: 0 0 50%;
	}
}

.skills div:last-child .apps > div {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}

.skills div:last-child .apps > div figure {
	margin-right: 1rem;
	border-radius: 16px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--dark);
}

.skills div:last-child .apps > div:first-child h4 {
	font-family: var(--title);
	font-size: 1.5rem;
	font-weight: 700;
}

.skills div:last-child .apps:first-child > div:first-child h4 { color: #F8E3A1; }
.skills div:last-child .apps:last-child > div:first-child h4 { color: #CAE8FF; }

.skills div:last-child .apps ul {
	margin: 0;
	padding-left: 6rem;
}

.skills div .apps.dsgn ul {
	margin-bottom: 2rem;
}

.skills div .apps.dsgn ul li { color: var(--lime); }
.skills div .apps.dev ul li { color: var(--teal); }

.skills div:first-child .apps ul li span,
.skills div:last-child .apps ul li span {
	color: var(--txt);
}

/* connected */
.connected {
	text-align: center;
}

.connected a {
	text-decoration: none;
}

.connected h3 {
	margin-bottom: 1rem;
}

.connected h3 a {
	font-family: var(--basic);
	font-size: 2rem;
	color: #AFF5B4;
	transition: color 140ms linear;
}

.connected h3 a:hover,
.connected h3 a:focus {
	color: var(--lime);
}

.connected ul {
	list-style-type: none;
	text-align: center;
	margin-bottom: 2rem;
}

.connected ul li:not(:last-child) {
	margin-bottom: 1rem;
}

.connected ul li a {
	font-family: var(--mono);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--txt);
	transition: color 140ms linear;
}

.connected ul li a:hover,
.connected ul li a:focus {
	color: var(--lime);
}

.connected ul li:last-child {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center; 
}

.connected ul li figure.flag-ve {
	width: 32px;
	height: 32px;
	background-image: url("assets/flag-ve.png");
	background-size: 32px 32px;
	background-position: top left;
	margin-right: .625rem;
}

.connected ul li div {
	text-align: left;
}

.connected ul li div h4 {
	font-family: var(--basic);
	font-size: 1.125rem;
	text-align: left;
	color: hsla(0, 0%, 74%, 1);
}

.connected ul li div small {
	font-family: var(--basic);
	font-size: .75rem;
	text-align: left;
	color: hsla(0, 0%, 48%, 1);
	text-align: left;
	margin: 0 !important;
}

.connected small {
	display: block;
	max-width: 480px;
	margin: 1rem auto;
	padding: 0 .625rem;
	font-size: .875rem;
	font-style: italic;
	text-align: center;
	color: hsla(0, 0%, 48%, 1);
}

/* footer */
footer ul {
	display: flex;
	flex-flow: row nowrap;
	list-style-type: none;
	margin: 2rem auto;
}

footer ul li:not(:last-child) {
	margin-right: 1.25rem;
}

footer ul li a {
	width: 60px;
	height: 60px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	border-radius: 32px;
	transition: transform 140ms ease-in-out;
	transform-origin: bottom center;
}

footer ul li a:hover,
footer ul li a:focus {
	transform: scale(1.5);
	transform-origin: bottom center;
}

footer ul li a span {
	display: none;
}

footer ul li a svg {
	max-width: 32px;
	max-height: 32px;
	margin: auto;
}

footer ul li:first-child a { background-color: var(--purple); }
footer ul li:nth-child(2) a { background-color: var(--blue); }
footer ul li:nth-child(3) a { background-color: var(--pink); }

/* error page  */
.error404 header {
	justify-content: center;
}

.error404 header div {
	text-align: center;
}

.error404 .post a {
	text-decoration: none;
	color: var(--teal); /* kiwistreet motherfuckers */
	font-weight: 700;
}

.emoji-big {
	font-size: 5rem;
	text-align: center;
	margin: 2rem auto;
	display: block;
}

section.post .emoji-big {
	font-size: 2.5rem;
}