@font-face{font-family:'SFMonoLight';src:url('../assets/font/SFMonoLight.otf');font-display: swap;}
body{width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;background:#0A192F;color: #ccc;}
*{margin:0;padding:0;}
p{color:#ccc;font-family:'Raleway',sans-serif;font-size:1rem;line-height:1.5;letter-spacing:1px;}
p .tri-bullet{color:#54D9BD;margin-right:1rem;}
menu#mainMenu{width:12rem;height:100vh;position:fixed;top:0;left:0;right:auto;bottom:0;background:#112240;}
menu#mainMenu a.logo{display:block;position:absolute;top:0;left:0;width:100%; text-align: center;padding: 2rem 0;}
menu#mainMenu a.logo img{width:50%; height: auto;}
menu#mainMenu a.logo span.logo-line {display: block; width: 2rem; height: 1px; margin: 2rem auto 0; background-image: linear-gradient(to right, #54D9BD, #FF7BAC);}
menu#mainMenu #hambMenu{display:none;cursor:pointer;margin-right:1rem;position:relative;z-index:100;}
menu#mainMenu #hambMenu span.hamb-icon{display:inline-block;position:relative;height:2px;width:34px;border-radius:1px;background:#54D9BD;vertical-align:middle;}
menu#mainMenu #hambMenu span.hamb-icon::before,menu#mainMenu #hambMenu span.hamb-icon::after{position:absolute;content:"";height:2px;border-radius:1px;background:#54D9BD;transition:all 200ms;}
menu#mainMenu #hambMenu span.hamb-icon::before{top:-11px;left:3px;width:28px;}
menu#mainMenu #hambMenu span.hamb-icon::after{top:11px;left:6px;width:22px;}
menu#mainMenu #hambMenu span.hamb-icon:focus{outline:none;}
/*menu#mainMenu #hambMenu span.hamb-icon:hover:after,menu#mainMenu #hambMenu span.hamb-icon:hover:before{width:34px;left:0;}*/
menu#mainMenu nav{display:flex;height:100vh;flex-direction:column;justify-content:center;align-items:center;width:100%;margin:0 auto;}
menu#mainMenu nav ul{list-style:none;width:65%;}
menu#mainMenu nav ul li:not(:last-of-type){margin-bottom:3rem;}
menu#mainMenu nav ul li a{text-decoration:none;font-size:1rem;color:#ccc;font-family:'SFMonoLight';font-weight:lighter;}
menu#mainMenu nav ul li a span.slash-active{display:none;}
menu#mainMenu nav ul li a:hover span.slash-active{display:inline-block;}
menu#mainMenu nav ul li a.section-active span.slash-active {display:inline-block; color:#54D9BD;}
menu#socmedMenu{position:fixed;bottom:0;right:2rem;display:flex;flex-direction:column;align-items:center;}
menu#socmedMenu nav ul{list-style:none;}
menu#socmedMenu nav ul li{margin-bottom:1rem;}
menu#socmedMenu nav ul li a{text-decoration:none;}
menu#socmedMenu nav ul li a:hover svg{stroke:#54D9BD;transform:translateY(-3px);}
menu#socmedMenu nav ul li a svg{width:20px;height:auto;}
menu#socmedMenu .vline{border-left:1px solid #e5e5e5;height:7rem;}
section{width:88%;height:100vh;margin-left:auto;display:flex;align-items:center;justify-content:center;}
section h1{font-size:3rem;letter-spacing:2px;color:#E5E5E5;font-family:'Roboto',sans-serif;font-weight:700;margin-bottom:1.5rem;}
section h2.section-heading{font-size:1.2rem;color:#54D9BD;font-family:'SFMonoLight';font-weight:lighter;margin-bottom:1.5rem;}
section .container{width:80%;margin:0 auto;max-width:850px;line-height: 1.5;}
section#intro::before{background-image: url('../assets/img/bg-intro-xl.jpg'); background-repeat: no-repeat; background-position: center center;background-size:cover;content:"";display:block;position:absolute;top:0px;right:0px;width:100%;height:100%;z-index:-1;}
section#intro::after{background-image:linear-gradient(to bottom, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9),  rgba(10, 25, 47, 1));content:"";display:block;position:absolute;top:0px;right:0px;width:100%;height:100%;z-index:-1;}
section#intro .container{display:flex;align-items:flex-start;justify-content:space-between;}
section#intro .container .description{width:60%;}
section#intro .container .avatar{width:35%; position: relative;}
section#intro .container .avatar::before {content: ""; position: absolute; top: 0.7rem; left: 1rem; width: 100%; height: 100%; border: 2px solid #54D9BD; border-radius: 0.5rem;}
section#intro .container .avatar::after{content:'';display:block;height:98%;width:100%;background:#42d1bd;position:absolute;border-radius:0.5rem;top:0;z-index:1;opacity:0.6;mix-blend-mode:multiply;}
section#intro .container .avatar:hover::before {top: 0.3rem; left: 0.6rem; transition: all 0.5s cubic-bezier(0.645,0.045,0.355,1);}
section#intro .container .avatar:hover::after {opacity: 0; transition: opacity 0.5s ease 0s;}
section#intro .container .avatar img {width: 100%; height: auto; border-radius: 0.5rem; position: relative; z-index: 1;}
section#skills .tools{display:flex;flex-wrap:wrap;width:97%;margin-left:auto;margin-top:1rem;margin-bottom:2rem;}
section#skills .tools .tools-icon{padding:10px;}
section#skills .tools .tools-icon img{height:45px;width:auto;}


footer {width:88%;margin-left: auto;}
footer .copyright {margin-bottom: 2rem;}
footer .copyright p {font-size: 0.8rem; color: #ccc; text-align: center; letter-spacing: normal;}
footer nav#socmedMenuMobile {display: none;}
footer nav#socmedMenuMobile ul {display: flex; list-style: none; align-items: center; justify-content: center;}
footer nav#socmedMenuMobile ul li a {display: inline-block; padding: 10px;}
footer nav#socmedMenuMobile ul li a svg {width: 30px; height: auto;}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023.98px) and (orientation: portrait), only screen and (max-width:767.98px) {
	menu#mainMenu{width:100%;bottom:unset;display:flex;align-items:center;justify-content:space-between;background:none;margin-bottom: 2rem; height:3rem;}
	menu#mainMenu.bg-scrolling {background: #112240;}
	menu#mainMenu.bg-scrolling #hambMenu span.hamb-icon {width: 30px;}
	menu#mainMenu.bg-scrolling #hambMenu span.hamb-icon::before {width: 24px; top: -8px;}
	menu#mainMenu.bg-scrolling #hambMenu span.hamb-icon::after {width: 19px; top: 8px;}
	menu#mainMenu a.logo{position:unset;height:100%;width:auto; padding: 0;}
	menu#mainMenu a.logo img{height:100%;width:auto;}
	menu#mainMenu a.logo span.logo-line {display:none;}
	menu#mainMenu #hambMenu{display:flex;align-items:center;justify-content:center;}
	menu#mainMenu nav{position:absolute;top:0;background:#0A192F;transition:all 500ms ease-in-out;clip-path:circle(30px at calc(100% - 65px) 65px);visibility:hidden;}
	menu#mainMenu.menu-active nav{visibility:visible;clip-path:circle(100%);}
	menu#mainMenu.menu-active #hambMenu span.hamb-icon{height:0;}
	menu#mainMenu.menu-active #hambMenu span.hamb-icon::before,menu#mainMenu.menu-active #hambMenu span.hamb-icon::after{top:0;left:0;width:34px;}
	menu#mainMenu.menu-active #hambMenu span.hamb-icon::after{transform:rotate(-45deg);}
	menu#mainMenu.menu-active #hambMenu span.hamb-icon::before{transform:rotate(45deg);}
	menu#mainMenu nav ul{width:unset;}

	section, footer {width: 100%; margin-left: unset;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023.98px) and (orientation: portrait) {
	menu#mainMenu {padding: 2rem 0;margin-bottom: 0;}
	menu#mainMenu a.logo {margin-left: 2rem;}
	menu#mainMenu #hambMenu {margin-right: 2rem;}
}

@media only screen and (max-width:1199.98px){
	section#intro::before{background-image: url('../assets/img/bg-intro-l.jpg');}
}

@media only screen and (max-width:1023.98px){
	menu#mainMenu.bg-scrolling {height: 4vh; padding: 1rem 0;}
	section#intro::before{background-image: url('../assets/img/bg-intro-m.jpg');}
}

@media only screen and (max-width:767.98px){
	p {font-size: 0.9rem;}
	p .tri-bullet {margin-right: 0.6rem; font-size: 0.6rem;}
	menu#mainMenu {height: 10vh; margin-bottom: 0; z-index: 100;}
	menu#mainMenu.bg-scrolling {height: 8vh; padding: 0;}
	menu#mainMenu a.logo {margin-left: 2rem; height: 50%;}
	menu#mainMenu #hambMenu {margin-right: 2rem;}
	menu#socmedMenu {right: 1rem; display: none;}
	section {height: unset;}
	section:last-of-type {margin-bottom: 2rem;}
	section .container {width: 90%;}
	section:not(:first-of-type) .container {padding-top: 3rem;}
	section#intro {height: 100vh;}
	section#intro::before{background-image: url('../assets/img/bg-intro-s.jpg');}
	section#intro .container {display: block; }
	section#intro .container .description {width: 100%;}
	section#intro .container .avatar {margin: 2rem auto 0; width: 70%;}
	section#intro .container .avatar img {width: 100%;}
	section#skills .tools {width: 95%; margin-bottom: 1rem; margin-top: 0.6rem;}
	section#skills .tools .tools-icon {padding: 6px;}
	section#skills .tools .tools-icon img {height: 30px;}

	section h1 {font-size: 2.4rem; margin-bottom: 1rem;}
	section h2.section-heading {font-size: 1rem; margin-bottom: 1rem;}

	footer {margin-bottom: 2rem;}
	footer nav#socmedMenuMobile {display: block;}	
	footer .copyright p {font-size: 0.7rem;}
}

@media only screen and (max-width:479.98px){
	menu#mainMenu a.logo {margin-left: 1rem;}
	menu#mainMenu #hambMenu {margin-right: 1rem;}
	section#intro::before{background-image: url('../assets/img/bg-intro-xs.jpg');}
}