* {box-sizing:border-box;}



html {height:100vh;}
body {min-height:100%; margin:0;}
.stuck {overflow:hidden;}



/* General Container */
html,body,
div#container {scroll-behavior:smooth; overflow-x:hidden;}
div#container {/*background-color:#0002;*/ color:#0009; font-family:Verdana,sans-serif; user-select:none;}
div#container.navopen {overflow:hidden;}



/* Nav Toggle Button */
div#container div.toggle {position:fixed; top:0; right:0; font-size:2rem; padding:1rem 1.25rem; background-color:#FFF1; border-radius:1rem; margin:.5rem; cursor:pointer; z-index:15;}
div#container div.toggle svg.cross {display:none;}
div#container div.toggle svg.hamburger {display:block;}
div#container.navopen div.toggle svg.cross {display:block;}
div#container.navopen div.toggle svg.hamburger {display:none;}



/* Nav Section */
div#container nav {position:fixed; left:0; height:100%; /*width:100%;*/ transition:.5s; z-index:10;}
div#container nav {display:flex; flex-direction:column; justify-content:center;}
div#container nav main {padding:4rem .5rem; margin-bottom:4rem;}
div#container nav main ul.navlist {list-style:none; padding:.5rem 0; margin:0; border-radius:.5rem; min-width:12rem;}
div#container nav main ul.navlist {display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
div#container nav main ul.navlist li.item {padding:.25rem .5rem;}
div#container nav main ul.navlist li.item.gone {display:none;}
div#container nav main ul.navlist li.item:hover {/*width:100%;*/}
div#container nav main ul.navlist li.item a.link {text-decoration:none; display:inline-block; background-color:#0002; color:inherit; border-radius:50rem; padding:.75rem 1.25rem; transition:.75s;}
div#container nav main ul.navlist li.item a.link {display:flex; flex-direction:row; justify-content:center; justify-content:flex-start; align-items:center; min-width:4rem; min-height:4rem;}
div#container nav main ul.navlist li.item a.link:hover,
div#container nav main ul.navlist li.item a.link.active {background-color:#0f48f8cc; color:#FFF;}
div#container nav main ul.navlist li.item a.link span.icon {font-size:1.25rem; margin-left:2px; transform:translateY(2px);}
div#container nav main ul.navlist li.item a.link span.caption {display:inline-block; max-width:0; margin-left:0; overflow:hidden; transition:.5s;}
div#container nav main ul.navlist li.item a.link:hover span.caption {max-width:10rem; margin-left:.5rem;}
div#container aside.overlay {visibility:hidden; opacity:0; position:fixed; top:0; left:0; height:100%; width:100%; background:#0008; z-index:9; transition:.25s;}
div#container.debug nav {background-color:#0001;}
div#container.debug nav main ul.navlist {background-color:#0001;}


/* General Section */
div#container section {min-height:25rem; border-bottom:1px solid #0001; padding:.125rem;}
div#container section h2.title {text-align:center; text-transform:uppercase; margin-top:2em; margin-bottom:0; font-size:2rem; font-weight:100; padding-bottom:.675em; position:relative;}
div#container section h2.title {opacity:1; transform:none; transition:.75s;}
div#container section h2.title:before {content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:6rem; height:1px; background-color:#0002;}
div#container section h2.title::after {content:''; position:absolute; left:50%; bottom:0; transform:translate(-50%,1px); width:2rem; height:3px; background-color:#0f48f888;}
div#container section main {opacity:1; transform:none; transition:.75s;}
div#container section main {max-width:75rem; margin:0 auto; padding:2rem;}
div#container section.shift {padding-left:8rem;}
div#container section.gone h2.title,
div#container section.gone main {opacity:0; transform:translateY(3rem);}



/* Hero Section */
div#container section#hero {min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:stretch;}
div#container section#hero {background:#0f48f8cc url('pic/barcelona.jpg') 95% center/cover; position:relative;}
div#container section#hero:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#FFFD; z-index:1;}
div#container section#hero main {width:100%; margin:0 auto; margin-bottom:6rem; padding:10rem; z-index:2; user-select:none;}
div#container section#hero main {display:flex; flex-direction:column; text-align:left;}
div#container section#hero main h1.name {font-size:4rem; margin-bottom:.25rem; font-weight:100;}
div#container section#hero main p.roles {font-size:1.5rem; font-weight:500; margin-top:.25rem;}
div#container section#hero main p.roles span.a,
div#container section#hero main p.roles span.typed {color:#0f48f8cc;}
div#container section#hero main p.roles span.typed:after {content:'|'; font-size:1.33em; margin-left:1px; opacity:1; /*transform:translateY(1px);*/ display:inline-block;}
div#container section#hero main p.roles span.typed.blink:after {animation:blinking 0.75s infinite;}
div#container section#hero main div.social {display:flex; flex-direction:row; justify-content:flex-start;}
div#container section#hero main div.social a.btn {font-size:1.25rem; padding:1rem 0; margin-right:2rem; cursor:pointer; text-decoration:none; color:inherit; transition:.5s;}
div#container section#hero main div.social a.btn:hover {color:#0f48f8cc;}
div#container section#hero main div.social a.btn:last-child {margin-right:0;}
div#container section#hero.gone main {opacity:0; transform:scale(0);}
@keyframes blinking {
	0% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:1;}
}



/* About Section */
div#container section#about {}
div#container section#about main {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
div#container section#about main article.set {padding:0 1rem; flex:0 0 100%;}
div#container section#about main article.set.onethird {flex-basis:33%;}
div#container section#about main article.set.twothirds {flex-basis:67%;}
div#container section#about main article.set img.profile {display:inline-block; width:100%; margin-right:1rem; margin-bottom:1rem;}
div#container section#about main article.set p.motto {}
div#container section#about main article.set p.motto span {}
div#container section#about main article.set h3.title {font-size:1.5rem; font-weight:300; margin:0 0 1rem;}
div#container section#about main article.set div.stats {display:flex; flex-direction:row; justify-content:flex-start;}
/*div#container section#about main article.set div.stats * {background-color:#0004; margin:.125rem}*/
div#container section#about main article.set div.stats div.col {flex:0 0 auto; margin-right:1rem;}
div#container section#about main article.set div.stats div.col div.item {}
div#container section#about main article.set div.stats div.col div.item svg.icon {color:#0f48f8cc;}
div#container section#about main article.set div.stats div.col div.item span.key {font-weight:600;}
div#container section#about main article.set div.stats div.col div.item span.key:after {content:': ';}
div#container section#about main article.set div.stats div.col div.item span.value {font-weight:200;}
div#container section#about main article.set p.copy {}



/* Skills Section */
div#container section#skills {}
div#container section#skills main {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
/*div#container section#skills main article.skillset {max-width:24rem; margin:0 auto;}*/
div#container section#skills main article.skillset {flex:0 0 48%;}
div#container section#skills main article.skillset div.skill {margin-bottom:1rem;}
div#container section#skills main article.skillset div.skill {display:flex; flex-direction:row-reverse; justify-content:space-between; flex-wrap:wrap; font-weight:600; font-size:.675rem; text-transform:uppercase;}
div#container section#skills main article.skillset div.skill:before {content:'90%'; display:block;}
div#container section#skills main article.skillset div.skill.rd:before {content:'90%';}
div#container section#skills main article.skillset div.skill.hc:before {content:'95%';}
div#container section#skills main article.skillset div.skill.js:before {content:'95%';}
div#container section#skills main article.skillset div.skill.bs:before {content:'85%';}
div#container section#skills main article.skillset div.skill.gh:before {content:'75%';}
div#container section#skills main article.skillset div.skill.java:before {content:'95%';}
div#container section#skills main article.skillset div.skill.cpp:before {content:'80%';}
div#container section#skills main article.skillset div.skill.vb:before {content:'90%';}
div#container section#skills main article.skillset div.skill.php:before {content:'70%';}
div#container section#skills main article.skillset div.skill.sql:before {content:'60%';}
div#container section#skills main article.skillset div.skill div.name {}
div#container section#skills main article.skillset div.skill div.bar {width:100%; display:flex; flex-direction:row; justify-content:flex-start; height:.5rem; background-color:#0001; margin-top:.5rem;}
div#container section#skills main article.skillset div.skill div.bar div.fill {height:100%; width:90%; background-color:#0f48f8cc; transition:.75s;}
div#container section#skills main article.skillset div.skill.rd div.bar div.fill {width:90%;}
div#container section#skills main article.skillset div.skill.hc div.bar div.fill {width:95%;}
div#container section#skills main article.skillset div.skill.js div.bar div.fill {width:95%;}
div#container section#skills main article.skillset div.skill.bs div.bar div.fill {width:85%;}
div#container section#skills main article.skillset div.skill.gh div.bar div.fill {width:75%;}
div#container section#skills main article.skillset div.skill.java div.bar div.fill {width:95%;}
div#container section#skills main article.skillset div.skill.cpp div.bar div.fill {width:80%;}
div#container section#skills main article.skillset div.skill.vb div.bar div.fill {width:90%;}
div#container section#skills main article.skillset div.skill.php div.bar div.fill {width:70%;}
div#container section#skills main article.skillset div.skill.sql div.bar div.fill {width:60%;}
div#container section#skills.gone main article.set div.skill div.bar div.fill {width:0;}



/* Stats Section */
/*div#container section#stats {display:none;}*/
div#container section#stats main {}
div#container section#stats main article.set {display:flex; flex-direction:row; justify-content:space-between; flex-wrap:wrap;}
div#container section#stats main article.set div.item {flex:0 0 25%; flex-basis:33.333%; /*cursor:pointer;*/ user-select:none;}
div#container section#stats main article.set div.item {display:flex; flex-direction:column; align-items:center;}
div#container section#stats main article.set div.item div.icon {font-size:1.5rem; background-color:#0f48f8cc; color:#FFF; width:3rem; height:3rem; border-radius:50%;}
div#container section#stats main article.set div.item div.icon {display:flex; flex-direction:column; justify-content:center; align-items:center; margin-bottom:.25rem;}
div#container section#stats main article.set div.item div.number {font-size:2rem; margin:.25rem 0;}
div#container section#stats main article.set div.item div.label {font-size:.75rem;}



/* Resume Section */
div#container section#cvitae {}
div#container section#cvitae main {}
div#container section#cvitae main h3.title {font-weight:300; margin:4rem 0 1rem;}
div#container section#cvitae main article.experience {display:flex; flex-direction:row; flex-wrap:wrap;}
div#container section#cvitae main article.experience div.details {padding:0 1.5rem .25rem; margin-top:1rem; border-left:2px solid #0009; position:relative;}
div#container section#cvitae main article.experience.cut div.details {width:50%;}
div#container section#cvitae main article.experience div.details.gone {display:none;}
div#container section#cvitae main article.experience div.details h4.title {font-weight:400; text-transform:uppercase; margin:0 0 .75rem; color:#0f48f8cc;}
div#container section#cvitae main article.experience div.details h4.title::after {content:''; position:absolute; top:0; left:0; transform:translateX(calc(-50% - 1px)); border:1px solid #0009; border-radius:50%; width:.75rem; height:.75rem; background-color:#FFF;}
div#container section#cvitae main article.experience div.details div.time {display:inline-block; background-color:#0001; padding:.35rem .75rem; text-transform:uppercase; font-size:.875rem;}
div#container section#cvitae main article.experience div.details p.copy {font-size:.875rem; margin:.875rem 0; font-style:italic;}
div#container section#cvitae main article.experience div.details ul {font-size:.875rem; margin:.875rem 0; padding:0; padding-left:1rem;}
div#container section#cvitae main article.experience div.details ul li {margin-top:.5rem; line-height:1.5em;}



/* Contact Section */
div#container section#contact {}
div#container section#contact main {display:flex; flex-direction:row; flex-wrap:wrap;}
div#container section#contact main article {padding:0 2rem;}
div#container section#contact main article.info {flex:1 0 33%; /*padding:0 4rem;*/}
div#container section#contact main article.info {display:flex; flex-direction:column; align-items:stretch;}
div#container section#contact main article.info div.item {min-height:4rem; margin-bottom:1rem; cursor:pointer; user-select:none;}
div#container section#contact main article.info div.item {display:flex; flex-direction:row; align-items:center; overflow-x:auto;}
div#container section#contact main article.info div.item div.icon {flex:0 0 auto;}
div#container section#contact main article.info div.item div.icon {display:flex; flex-direction:column; justify-content:center;}
div#container section#contact main article.info div.item div.icon {background-color:#0001; color:#0f48f8cc; font-size:1.25rem; width:3rem; height:3rem; border-radius:50%; transition:.75s;}
div#container section#contact main article.info div.item div.icon {display:flex; flex-direction:column; justify-content:center; align-items:center;}
div#container section#contact main article.info div.item:hover div.icon {background-color:#0f48f8cc; color:#FFF;}
div#container section#contact main article.info div.item div.content {flex:1 0 auto; margin-left:1rem;}
div#container section#contact main article.info div.item div.content {display:flex; flex-direction:column; justify-content:center;}
div#container section#contact main article.info div.item div.content div.method {color:#000C; font-weight:500; font-size:1.5em; margin-bottom:.25rem;}
div#container section#contact main article.info div.item div.content div.value {color:#0008; font-weight:300; font-size:.75rem;}
div#container section#contact main article.form {flex:1 0 67%; /*padding:0 4rem;*/}
div#container section#contact main article.form form {display:flex; flex-direction:row; /*justify-content:center;*/ flex-wrap:wrap;}
div#container section#contact main article.form form div.item {padding:.5rem .25rem; text-align:center;}
div#container section#contact main article.form form div.item.w50 {flex:1 0 50%;}
div#container section#contact main article.form form div.item.w100 {flex:1 0 100%;}
div#container section#contact main article.form form .forminput {width:100%; padding:.75rem; border-radius:.25rem; border:1px solid #0004; outline:none; resize:none;}
div#container section#contact main article.form form .forminput {font-family:inherit; font-size:.875rem;}
div#container section#contact main article.form form .forminput:focus {border-color:#0f48f8cc;}
div#container section#contact main article.form form button.send {display:none;}
div#container section#contact main article.form form a.send {display:inline-block; text-decoration:none;}
div#container section#contact main article.form form a.send,
div#container section#contact main article.form form button.send {font-size:2.5rem; font-weight:200; padding:.75rem 2rem; border-radius:10rem; border:0 none; color:#FFF; background-color:#0f48f8cc;}




/* Footer Section */
div#container footer {background-color:#EEE; text-align:center;}
div#container footer main {padding:2rem; display:flex; flex-direction:column; justify-content:center; align-items:center;}
div#container footer main h1.name {font-size:2.5rem; margin-bottom:1.25rem; font-weight:100;}
div#container footer.social main div.social {display:flex; flex-direction:row; justify-content:flex-start;}
div#container footer.social main div.social a.btn {position:relative; font-size:1.5rem; background-color:#0f48f8cc; color:#FFF; border-radius:50%; padding:1em; margin:0 .25em; transition:.5s color;}
div#container footer.social main div.social a.btn:hover {background-color:#0f48f8AA; /*color:#0f48f8cc;*/}
div#container footer.social main div.social a.btn .icon {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
div#container footer main p.copy {font-size:.75rem; margin-top:3rem;}



/* Back To Top Button */
div#container button.totop {position:fixed; bottom:0; right:0; z-index:10;}
div#container button.totop {font-size:1.25rem; margin:2rem; min-width:3rem; min-height:3rem;}
div#container button.totop {display:flex; justify-content:center; align-items:center;}
div#container button.totop {background-color:#0f48f8cc; padding:.5rem; cursor:pointer; border:0 none; border-radius:50%; color:#FFF; font-weight:500; transition:.25s;}
div#container button.totop:hover {background-color:#FFF; color:#0f48f8cc;}
div#container button.totop.gone,
div#container.navopen button.totop {transform:translateY(6rem);}





@media screen and (max-height:60rem) {
	/*div#container nav {justify-content:flex-start;}*/
}

@media screen and (max-width:62rem) {

	/* Nav Toggle Button */
	div#container div.toggle {padding:.5rem .6rem;}

	/* Nav Section */
	div#container nav {transform:translateX(-100%); background-color:#FFF;}
	div#container.navopen nav {transform:translateX(0);}
	div#container nav main ul.navlist {border-radius:2.5rem; padding:1rem .5rem;}
	div#container nav main ul.navlist li.item a.link {min-width:12rem; min-height:initial; justify-content:flex-start;}
	div#container nav main ul.navlist li.item a.link.active {background-color:#0002; color:inherit;}
	div#container nav main ul.navlist li.item a.link span.caption {max-width:none; display:inline-block; margin-left:.5rem;}
	div#container.navopen aside.overlay.gone {visibility:visible; opacity:1;}

	/* General Section */
	div#container section.shift {padding-left:8rem;}
	div#container section main {padding:2rem 8rem;}

	/* Hero Section */
	div#container section#hero main {padding:2rem; text-align:center;}
	div#container section#hero main h1.name {font-size:2rem;}
	div#container section#hero main p.roles {font-size:1.25rem;}
	div#container section#hero main div.social {justify-content:center;}

	/* About Section */
	div#container section#about main article.set {text-align:center;}
	div#container section#about main article.set.onethird {flex-basis:100%;}
	div#container section#about main article.set.twothirds {flex-basis:100%;}
	div#container section#about main article.set h3.title {font-size:1.25rem; text-align:center;}
	div#container section#about main article.set img.profile {max-width:25rem; margin:0 auto;}
	div#container section#about main article.set p.motto span {display:block;}
	div#container section#about main article.set p.motto span.symb {margin:.5rem 0;}
	div#container section#about main article.set p.motto span.comma {display:none;}
	div#container section#about main article.set p.motto span.extra {display:none;}
	div#container section#about main article.set div.stats {text-align:left; font-size:.875rem; justify-content:center;}
	div#container section#about main article.set div.stats div.col div.item svg.icon {display:none;}

	/* Skills Section */
	div#container section#skills main {flex-direction:column; align-items:center;}
	div#container section#skills main article.skillset {flex-basis:auto; max-width:32rem; width:100%;}

	/* Stats Section */
	div#container section#stats main article.set {justify-content:center;}
	div#container section#stats main article.set div.item {flex-basis:50%; margin-top:2rem;}

	/* Resume Section */
	div#container section#cvitae main article.experience {flex-direction:column; flex-wrap:nowrap;}
	div#container section#cvitae main article.experience.cut div.details {width:100%;}

	/* Contact Section */
	div#container section#contact main {}
	div#container section#contact main > div {padding:0 2rem;}
	div#container section#contact main article.info {flex-basis:100%;}
	div#container section#contact main article.form {flex-basis:100%;}
	div#container section#contact main article.form form a.send,
	div#container section#contact main article.form form button.send {font-size:2rem; padding:.75rem 1.75rem;}

	/* Footer Section */
	div#container footer main h1.name {font-size:2rem;}
	div#container footer main p.copy {font-size:.675rem;}
}


@media screen and (max-width:40rem) {

	/* General Section */
	div#container section.shift {padding-left:2rem;}
	div#container section main {padding:2rem 2rem;}

	/* Hero Section */
	div#container section#hero main {padding:.5rem;}

	/* About Section */
	div#container section#about main article.set {text-align:center;}
	/*div#container section#about main article.set h3.title span {display:block;}*/
	/*div#container section#about main article.set h3.title span.comma {display:none;}*/
	div#container section#about main article.set div.stats {flex-direction:column; align-items:stretch; max-width:24rem; margin:0 auto;}
	div#container section#about main article.set div.stats div.col div.item {display:flex; flex-direction:row; justify-content:space-between;}
	div#container section#about main article.set div.stats div.col div.item span.key:after {margin-right:.25rem;}

	/* Contact Section */
	div#container section#contact main > div {padding:0;}
	div#container section#contact main article.form form div.item.w50 {flex-basis:100%;}
	div#container section#contact main article.form form a.send,
	div#container section#contact main article.form form button.send {font-size:1.75rem;}

	/* Back To Top Button */
	div#container button.totop {font-size:1rem; margin:1rem; min-width:2.5rem; min-height:2.5rem;}
}


@media screen and (max-width:24rem) {

	/* Stats Section */
	div#container section#stats main article.set div.item {flex-basis:100%;}

}


/*


div#container section#portfolio {}
div#container section#portfolio main {}


div#container section#services {}
div#container section#services main {}

*/