:root {
	--surfaceBlue: #5DE0E6;
	--deepBlue: #004AAD;
	--deepBlue72: rgba(0,74,173,0.72);
	--blanq: #FFFFFF;
	--blanq72: rgba(255,255,255,0.72);

	--bubblePink: rgba(251,184,255,0.64); /* #FBB8FF */
	--bubbleBlue: rgba(152,199,255,0.64); /* #98C7FF */
	--bubbleVert: rgba(151,239,216,0.64); /* #97EFD8 */

	--bubble: conic-gradient(from 42deg, var(--bubblePink) 12%, var(--bubbleBlue) 39%, var(--bubbleVert) 63%, var(--bubblePink) 84%);


	--universalGray: #424242;
	--deepSpace: #000014;
	--starlight: #E4E4E8;

	--ufoGrey: #ADADAD;
	--ufoPurple: #6045B0;
	--ufoPurple72: rgba(96,69,176,0.72);
	--ufoLilac: #CDBDFD;
	--ufoLilac72: rgba(205,189,253,0.72);

	--ufoPink: rgba(251,184,255,0.14); /* #FBB8FF */
	--ufoBlue: rgba(152,199,255,0.14); /* #98C7FF */
	--ufoVert: rgba(151,239,216,0.14); /* #97EFD8 */

	--ufo: conic-gradient(var(--ufoPink), var(--ufoBlue), var(--ufoVert), var(--ufoPink));
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'Rubik';
	src: url('fonts/Rubik-VariableFont_wght.ttf');
}


html {
	margin: 0;
}

body {
	margin: 0;
	position: relative;
	color: white;
	font-family: 'Rubik', sans-serif;
	font-weight: 500; /* semi-bold */
	font-size: 20px;
}

div#background {
	width: 100vw;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	background: linear-gradient(var(--surfaceBlue),var(--deepBlue));
	background-attachment: fixed;
}

h1 {
	font-family: 'Raleway';
	font-weight: 700; /* bold */
	font-size: 64px;
	margin: 0;
}

h2 {
	font-size: 54px;
}

h3 {
	font-size: 42px;
	margin: 0;
}

h4 {
	font-size: 36px;
	margin: 0;
}

h5 {
	text-transform: uppercase;
	letter-spacing: 7px;
	margin: 0;
}

ul {
	list-style-type: none;
	padding: 0;
}

a {
	color: var(--blanq);
}

button {
	background: none;
	border: none;
	color: inherit;
	font-size: 36px;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	cursor: pointer;
}
button:hover {
	color: var(--blanq);
}

section, header {
	display: flex;
	position: relative;
}

section {
	min-height: 86dvh; /* temp */
	padding-top: 14dvh;
	width: 90dvw;
	margin: 0 auto;
	gap: 2dvw;
}

.half {
	width: 50%;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
}

img.display-img {
	border-radius: 25px;
	border: solid 2px var(--blanq72);
	box-shadow: 4px 4px 5px rgba(0,0,0,.25);
}

.bubble {
	background: var(--bubble);
	color: var(--deepBlue);
	border-radius: 93px;
	border: solid 2px var(--blanq72);
	box-shadow: 4px 4px 5px rgba(0,0,0,.25);
	animation: floating 10s linear infinite;
	transition: all 1s ease-out, scale 0.5s ease;
}

.bubble:hover {
	animation-play-state: paused;
	scale: 1.05;
}

@keyframes floating {
	0% {
		transform: translate(0);
	}

	25% {
		transform: translate(5px,-5px);
	}

	50% {
		transform: translate(0,10px);
	}

	75% {
		transform: translate(-5px,5px);
	}

	100% {
		transform: translate(0);
	}
}

.underline {
	text-decoration: underline;
}


/* MOBILE MID SIZE */

@media (max-width: 1074px) {
	body {
		font-size: 16px;
	}

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 27px;
	}

	h3 {
		font-size: 27px;
	}

	h4, button {
		font-size: 20px;
	}
}

@media (max-width: 875px) {
	section {
		flex-direction: column;
		min-height: 100dvh;
		padding-top: 10dvh;
	}
	.half {
		display: flex;
		width: 100%;
	}
}

@media (max-width: 875px) {
	h3 {
		font-size: 24px;
	}
}

/*************************************/
/***********  MODO ESPAÑOL  **********/
/*************************************/
:lang(es) {
	display: none!important;
}

body.modo-es :lang(en) {
	display: none!important;
}

body.modo-es :lang(es) {
	display: block!important;
}

body.modo-es .project-categ:lang(es), body.modo-es a:lang(es), body.modo-es .underline:lang(es) {
	display: inline-block!important;
}

body.modo-es .nav-btn:lang(es) img {
	display: inline!important;
}

/*************************************/
/************  DARK THEME  ***********/
/*************************************/

body.ufo-theme {
	color: var(--starlight);
}

body.ufo-theme div#background {
	background: linear-gradient(var(--universalGray),var(--deepSpace));
}

body.ufo-theme img.display-img {
	border-color: var(--ufoLilac72);
	box-shadow: 4px 4px 5px rgba(0,0,0,.25);
}

body.ufo-theme .bubble {
	background: var(--ufo);
	color: var(--ufoLilac);
	border-color: var(--ufoLilac72);
	box-shadow: 4px 4px 5px rgba(0,0,0,.25);
}

body.ufo-theme #theme-btn img.bubbles {
	display: none;
}
body.ufo-theme #theme-btn img.ufo {
	display: block;
}

body.ufo-theme .nav-btn, body.ufo-theme #settings-nav span {
	color: var(--ufoLilac);
}

body.ufo-theme .project-categ {
	border: solid 2px var(--ufoLilac72);
}
body.ufo-theme .project-categ:hover {
	border-color: var(--ufoPurple72);
	color: var(--ufoPurple);
}
body.ufo-theme .project-categ.open {
	background-color: var(--starlight);
	color: var(--ufoPurple);
}

body.ufo-theme #project-links-area .project-link:hover {
	color: var(--ufoLilac);
}
body.ufo-theme #project-links-area .project-link.open {
	color: var(--ufoPurple);
}
body.ufo-theme #project-links-area .project-link.open:hover {
	color: var(--ufoPurple);
}


body.ufo-theme article .project-categ {
	border-color: var(--ufoPurple72);
	color: var(--ufoPurple);
}
body.ufo-theme .project-skills-title {
	color: var(--ufoPurple);
}


/*************************************/
/*************   HEADER  *************/
/*************************************/

header {
	position: fixed;
	top: 12dvh;
	z-index: 5;
	width: 1074px;
	flex-wrap: wrap;
	justify-content: space-between;
	left: 50%;
	transform: translateX(-50%);
	height: 76dvh;
	min-height: unset; /* temp */

	transition: all 1s ease-out;
}

#main-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

#main-logo {
	height: fit-content;
}

#main-logo .display-img {
	transform: rotate(-5deg);
	width: 323px;
}

#main-logo #logo {
	display: none;
}

#main-title {
	height: fit-content;
	padding: 30px 33px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transform: rotate(2deg);
}

#controls-nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#sections-nav {
	width: 323px;
	display: flex;
	justify-content: space-evenly;
	height: fit-content;
}

.nav-btn {
	display: inline-block;
	height: 69px;
	width: 69px;
	color: white;
	text-decoration: none;
	text-align: center;
	position: relative;
}

#skills-btn {
	animation-delay: 0.01;
	animation-duration: 12s;
}
#work-btn {
	animation-direction: reverse;
}
#contact-btn {
	animation-delay: 0.25s;
}
#settings-nav {
	animation-duration: 14s;
}

.nav-btn img {
	width: 56px;
	height: 56px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.nav-btn span {
	position: absolute;
	display: block;
	bottom: -1.5em;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: 4px 4px 5px rgba(0,0,0,0.25);
}

#settings-nav {
	width: 160px;
	position: relative;
	display: flex;
	justify-content: space-evenly;
}

#settings-nav span {
	color: var(--blanq);
	display: none;
}

#settings-nav #settings-label {
	display: block;
}

#lang-btn:hover #lang-label {
	display: block;
}
#lang-btn:hover ~ #settings-label {
	display: none;
}

#theme-btn:hover #theme-label {
	display: block;
}
#theme-btn:hover ~ #settings-label {
	display: none;
}

#theme-btn img.ufo {
	display: none;
}

/* MOBILE MID SIZE */

@media (max-width: 1074px) {

	header {
		top: 18dvh;
		width: 90dvw;
	}

	#main-logo .display-img {
		width: 225px;
	}

	.nav-btn {
		height: 54px;
		width: 54px;
	}

	.nav-btn img {
		width: 42px;
		height: 42px;
	}

	.nav-btn span {
		font-size: 14px;
	}

	#sections-nav {
		width: 232px;
	}

	#settings-nav {
		width: 96px;
	}
}

@media (max-width: 875px) {
	header {
		width: 100%;
		height: 100%;
		top: 5dvh;
	}

	#main-nav{
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
	}

	#main-logo .display-img {
		width: auto;
		height: 36dvh;
	}

	#main-title {
		padding: 14px 25px;
	}

	#controls-nav {
		height: fit-content;
		position: relative;
		top: 4dvh;
		padding-right: 14px;
	}
}


/*************************************/
/*************   INTRO   *************/
/*************************************/

#intro {
	padding: 0;
	max-width: 1074px;
	margin: 0 auto;
	flex-direction: row;
	justify-content: flex-end;
}

#intro-copy {
	width: 618px;
	position: relative;
	top: 45dvh;
}

@media (max-width: 1074px) {
	#intro {
		max-width: 842px;
	}

	#intro-copy {
		width: 50dvw;
		max-width: 466px;
	}
}

@media (max-width: 875px) {
	#intro {
		justify-content: center;
	}

	#intro-copy {
		top: calc(45dvh + 106px);
		width: auto;
		text-align: center;
	}
}


/*************************************/
/********  HEADER - NAV MODE  ********/
/*************************************/

header.nav-mode {
	top: 30px;
	max-width: unset;
	width: 95dvw;
	height: 74px;
	padding: 0 2dvw;
}

header.nav-mode #main-nav {
	width: unset;
	align-items: center;
	justify-content: flex-start;
}

header.nav-mode #main-logo {
	position: absolute;
	z-index: 2;
}

header.nav-mode #main-logo .display-img {
	display: none;
}

header.nav-mode #main-logo #logo {
	display: block;
	width: 40px;
	margin: 0 18px;
}

header.nav-mode #main-title {
	padding: 0 14px 0 76px;
	transform: rotate(0deg);
	height: 69px;
	justify-content: center;
}

header.nav-mode #main-title h1 {
	font-size: 42px;
	color: var(--blanq);
}

header.nav-mode #main-title h3 {
	display: none !important;
}

header.nav-mode #controls-nav {
	width: auto;
}

header.nav-mode .nav-btn {
	height: 69px;
	width: 69px;
}

header.nav-mode .nav-btn img {
	width: 56px;
	height: 56px;
}

header.nav-mode .nav-btn span, header.nav-mode #settings-nav #settings-label {
	display: none;
}

header.nav-mode #settings-nav {
	width: 160px;
}

header.nav-mode #skills-btn:hover #skills-label {
	display: block;
}

header.nav-mode #work-btn:hover #work-label {
	display: block;
}

header.nav-mode #contact-btn:hover #contact-label {
	display: block;
}


@media (max-width: 875px) {

	header.nav-mode {
		top: 14px;
	}

	header.nav-mode #main-nav {
		align-items: flex-start;
	}

	header.nav-mode #main-logo {
		padding: 6px 0;
	}

	header.nav-mode #main-title {
		padding: 0;
		animation-play-state: paused;
		width: 64px;
		height: 64px;
		position: relative;
		top: -1px;
		left: 4px;
		transform: translate(0)!important;
	}

	header.nav-mode #main-title h1 {
		display: none;
	}

	header.nav-mode #controls-nav {
		position: static;
		top: 0;
		padding-right: 14px;
	}

	header.nav-mode .nav-btn {
		height: 54px;
		width: 54px;
	}

	header.nav-mode .nav-btn img {
		width: 42px;
		height: 42px;
	}

	header.nav-mode .nav-btn span {
		font-size: 14px;
	}

	header.nav-mode #settings-nav {
		width: 96px;
		position: absolute;
		top: 88dvh;
		right: 3dvw;
	}

	header.nav-mode #settings-nav span {
		top: -1.5em;
		bottom: unset;
	}
}


/*************************************/
/*************   SKILLS  *************/
/*************************************/

#skills-dynamic {
	padding-bottom: 50%;
}

.skills-bubble {
	position: absolute;
	border-radius: 100%;
}

.skills-bubble-container {
	position: absolute;
	width: max-content;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);


	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.skills-bubble .skill-lists {
	font-size: 16px;
	font-weight: 600;
	display: flex;
	gap: 1.5em;
}

.skills-bubble .skill-lists ul li {
	padding: 0.25em 0;
}

.skills-bubble.big {
	height: 0;
	width: 62%;
	padding-bottom: 62%;
	top: 0;

	animation-duration: 15s;
}

.skills-bubble.mid {
	height: 0;
	width: 42%;
	padding-bottom: 42%;

	left: 0;
	top:0;
	margin-top: 40%;
	margin-left: 58%;
	cursor: pointer;
}

.skills-bubble.small {
	height: 0;
	width: 32%;
	padding-bottom: 32%;

	top:0;
	left: 0;
	margin-top: 64%;
	margin-left: 27%;
	cursor: pointer;

	animation-duration: 8s;
}

.skills-bubble.small h4 {
	font-size: 32px;
}

.skills-bubble.mid .skill-lists, .skills-bubble.small .skill-lists {
	display: none;
}

@media (max-width: 1234px) {
	.skills-bubble .skill-lists ul {
		margin: 14px 0;
	}
	.skills-bubble .skill-lists ul li {
		padding: 0.15em 0;
		font-size: 14px;
	}

	.skills-bubble.small h4 {
		font-size: 20px;
	}
}

@media (max-width: 875px) {
	#skills-dynamic {
		padding-bottom: 100%;
	}
}

@media (max-width: 440px) {
	.skills-bubble h4, .skills-bubble.small h4 {
		font-size: 16px;
	}
	.skills-bubble .skill-lists {
		gap: 0.5em;
	}
	.skills-bubble .skill-lists ul {
		margin: 7px 0 22px;
	}
	.skills-bubble .skill-lists ul li {
		font-size: 12px;
	}
}


/*************************************/
/**************   WORK   *************/
/*************************************/

.instructions {
	margin-bottom: 0.5em;
}

.project-categ {
	border: solid 2px var(--blanq72);
	border-radius: 25px;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	padding: 0.14em 0.28em;
	margin: 0.42em 0.14em;
	cursor: pointer;

	transition: scale 0.5s;
}
.project-categ:hover {
	border-color: var(--deepBlue72);
	color: var(--deepBlue);

	scale: 1.1;
}
.project-categ.open {
	background-color: var(--blanq);
	color: var(--deepBlue);
}

#work-projects {
	margin-top: 1.4em;
}

#project-links-area {
	border: solid 2px var(--blanq72);
	border-radius: 25px;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 1.4dvw;
	padding: 1.4dvw 1.4dvw;
}

#project-links-area .project-link {
	text-decoration: underline;
	cursor: pointer;
	display: none;

	transition: scale 0.5s;
}
#project-links-area .project-link.starter {
	display: block;
}
#project-links-area .project-link:hover {
	color: var(--surfaceBlue);
	scale: 1.05;
}
#project-links-area .project-link.open {
	color: var(--deepBlue);
	cursor: not-allowed;
}
#project-links-area .project-link.open:hover {
	color: var(--deepBlue);
}

#work article .project-img {
	grid-area: project-img;
	width: 100%;
}
#work article .project-title {
	grid-area: project-title;
}
#work article .project-slider {
	grid-area: project-slider;
	position: absolute;
	right: 0;
	width: max-content;
}
#work article .project-categs {
	grid-area: project-categs;
}
#work article .project-descr {
	grid-area: project-descr;
	margin: 0;
}
#work article .project-divider {
	grid-area: project-divider;
	display: none;
}
#work article .project-skills-title {
	grid-area: project-skills-title;
}
#work article .project-skills-list1 {
	grid-area: project-skills-list1;
}
#work article .project-skills-list2 {
	grid-area: project-skills-list2;
}
#work article {
	border-radius: 25px;
	padding: 1.1em;
	display: grid;
	gap: 0.4em 0.8em;
	grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr;
	grid-template-areas: 
	"project-img project-img project-img project-img project-img"
	"project-title project-title project-title project-title project-slider"
	"project-categs project-categs project-categs project-categs project-categs"
	"project-descr project-descr project-descr project-skills-title project-skills-title"
	"project-descr project-descr project-descr project-skills-list1 project-skills-list2";
	animation-duration: 20s;
}

#work article .project-slider button {
	transition: scale 0.5s;
}
#work article .project-slider button:hover {
	scale: 1.2;
}

article .project-categ {
	border-color: var(--deepBlue72);
	cursor: auto;
}
article .project-categ:hover {
	scale: 1;
}

@media (max-width: 1074px) {
	#project-links-area {
		gap: 2.8dvw;
		padding: 1.4dvw 2dvw;
	}

	#work article .project-descr {
		font-size: 14px;
	}
}

@media (max-width: 875px) {
	#work article {
		grid-template-columns: 1fr 1fr 0.5fr 0.5fr;
		grid-template-areas: 
		"project-img project-img project-img project-img"
		"project-title project-title project-title project-slider"
		"project-categs project-categs project-categs project-categs"
		"project-descr project-descr project-descr project-descr"
		"project-divider project-divider project-divider project-divider"
		"project-skills-title project-skills-list1 project-skills-list2 project-skills-list2";
	}

	#work article .project-divider {
		display: block;
		width: 100%;
		border-color: var(--ufoPurple);
	}

	article .project-categ {
		font-size: 14px;
	}

	article ul {
		font-size: 14px;
		margin: 0;
	}
}


/*************************************/
/*************  CONTACT  *************/
/*************************************/

#contact {
	min-height: 62dvh;
}

#contact .half.three-q {
	/*padding-top: 142px;*/
}

#contact-title {
	width: 100%;
	height: 142px;
	margin-bottom: 1rem;
}

#contact h3 {
	margin-top: 1em;
}

#contact a.cta {
	transform: rotate(1.4deg);
	margin-top: 1.4rem;
	padding: 21px;
	font-size: 54px;
	text-decoration: none;
	text-align: center;
	z-index: 2;
}

#contact .one-q {
	align-items: center;
}

#contact .display-img {
	transform: rotate(5deg);
	width: 363px;
	margin-bottom: 0.7em;
}

#final-nav {
	width: 363px;
	display: flex;
	justify-content: space-between;
}

#final-nav .nav-btn {
	margin-top: 1.5em;
	width: 108px;
	height: 108px;

	animation-delay: 0.75s;
}

#final-nav .nav-btn img {
	width: 84px;
	height: 84px;
}

#final-nav .nav-btn span {
	display: block;
	width: max-content;
	bottom: unset;
	top: -1.5em;
}

#to-top {
	animation-direction: reverse;
}


@media (max-width: 1234px) {
	#contact a.cta {
		padding: 14px;
		font-size: 27px;
		max-width: 440px;
		min-width: 321px;
		margin: 0 auto;
	}
}

@media (max-width: 1074px) {

	#contact .display-img {
		width: 254px;
	}

	#final-nav {
		width: 280px;
	}

	#final-nav .nav-btn {
		height: 54px;
		width: 54px;
	}

	#final-nav .nav-btn img {
		width: 42px;
		height: 42px;
	}

	#final-nav .nav-btn span {
		font-size: 14px;
	}
}



/*************************************/
/*********  CONTACT HEADER  **********/
/*************************************/

header.final-form {
	position: absolute;
}

header.final-form #main-nav {
	position: relative;
	left: 18px;
	margin-top: 5dvh;
}

header.final-form #main-logo #logo {
	width: 80px;
}

header.final-form #main-title {
	background: none;
	border: none;
	box-shadow: none;
	padding-left: 114px;
	animation: none;
}

header.final-form #main-title h1 {
	font-size: 64px;
}

header.final-form #sections-nav {
	display: none;
}


@media (max-width: 1234px) {
	header.final-form #main-title {
		padding-left: 90px;
	}

	header.final-form #main-title h1 {
		font-size: 42px;
	}

	header.final-form #main-logo #logo {
		width: 54px;
	}
}

@media (max-width: 875px) {
	header.final-form {
		transform: none;
		left: unset;
	}

	header.final-form #main-nav {
		top: unset;
		left: unset;
		width: 100%;
	}

	header.final-form #main-logo {
		position: static;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	header.final-form #main-title {
		padding: 0;
		width: 100%;
	}

	header.final-form #main-title h1 {
		display: block;
		font-size: 36px;
	}
}


/*************************************/
/*************   FOOTER  *************/
/*************************************/

footer {
	text-align: center;
	margin-top: 2.2em;
}