*, *::before, *::after {box-sizing: border-box; padding: 0; margin: 0;}
/**, *::before, *::after {border: 1px solid red;}*/
@font-face {font-family: 'inter-regular'; src: url(assets/fonts/Inter-Regular.ttf) format('truetype');}
@font-face {font-family: 'inter-medium'; src: url(assets/fonts/Inter-Medium.otf) format('opentype');}
@font-face {font-family: 'inter-bold'; src: url(assets/fonts/Inter-Bold.ttf) format('truetype');}
:root {
	--col-highlight-secondary: #F4D30B;
	--col-text-primary: #242424;
	--max-width: 50rem;
}

html {background-image: linear-gradient(180deg, rgba(16,16,16,1.0), rgba(24,24,24,1.0)); background-size: 100% max(100%, 100vh); padding: 2rem 1rem;}
body {display: flex; flex-direction: column; gap: 4.5rem; font-family: inter-regular; color:  white; max-width: var(--max-width); margin: auto;}

img {display: block;}
a {display: inline-block; text-decoration: none; color: white; padding: 0.5rem 1rem;}
a:hover {color: var(--col-text-primary); background-color: white;}
a.clean {text-decoration: underline; padding: 0; margin: 0; background: none; color: var(--col-highlight-secondary); display: inline;}
a.clean:hover {transform: translateY(-1px); transition: transform ease-in-out 0.1s; color: orange;}
.transY {transform: translateY(0px); transition: all ease-in-out 0.05s;}
.transY:hover {transform: translateY(-4px); transition: all ease-in-out 0.1s;}
#btn-back {width: fit-content;}
.active {outline: 1px solid white;} .bold {font-weight: bold;} .pad0 {padding: 0;} .u {text-decoration: underline;}
b {color: white;}
.h-w {color: white;}
.box-shadow {box-shadow: 0.25rem 1rem 1.5rem rgba(0,0,0, 0.2);}
.drop-shadow {filter: drop-shadow(0 1rem 1.5rem rgba(0,0,0, 0.2));}
ul {padding-left: 1.5rem; padding-top: 0.25rem; color: white;}
/*li {margin: 0.125rem 0;}*/


.text-highlight {color: var(--col-highlight-secondary);}
h1 {font-family: inter-medium; font-weight: normal;}
h2 {font-family: inter-medium; font-weight: normal;}
h3 {font-family: inter-medium; font-size: 1.25rem; font-weight: normal;}
h4 {font-family: inter-regular; font-weight: normal; color: #909090;}
h5 {font-family: inter-regular; font-size: 0.875rem; font-weight: normal; color: #909090;}

nav {display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; transition: all ease-in-out .15s;}
nav a {border-radius: .5rem; transition: inherit;}
nav a:first-child {padding: 0; margin-right: 2rem; background: none;}
nav a:first-child:hover {transform: scale(1.05);}
nav a:last-child {background-color: var(--col-highlight-secondary); color: var(--col-text-primary); padding: 0.65rem 1rem; margin-left: 2rem; font-family: inter-medium;}
nav .active {background-color: white; outline: none; color: var(--col-text-primary);}
nav .active:hover {transform: scale(1.05);}

.hero-header {display: flex; flex-direction: column; text-align: center; gap: 0.25rem; margin: auto; font-family:}
div.quick-networking {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;}
div.quick-networking > a {display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.5rem 0.875rem; background-color: #252525; color: var(--col-highlight-secondary); border-radius: .75rem; font-size: 0.875rem; font-family: inter-regular; transition: transform ease-in-out 0.05s;}
div.quick-networking > a:hover {transform: translateY(-2.5px); background-color: #303030; color: var(--col-highlight-secondary); transition: transform ease-in-out 0.1s;}

.hero-links {display: flex; gap: 0.5rem; justify-content: center;}
.hero-links a {padding: 0.75rem 1.25rem;}
.hero-links :first-child {background-color: var(--col-highlight-secondary); color: var(--col-text-primary); font-family: inter-medium;}
.hero-links :last-child {background-color: var(--col-text-primary); color: var(--col-highlight-secondary);}

div.skills-container {display: flex; flex-direction: column; gap: 0.75rem;}
div.skills-items-container {display: flex; gap: 0.25rem; flex-wrap: wrap;}
div.skills-items-container a {background-color: #252525; color: #909090;}
div.skills-items-container a:hover {background-color: white; color: var(--col-text-primary);}

div.about-profile {display: flex; gap: 1.5rem; flex-wrap: wrap; color: #bebebe;}
div.about-profile > img {border-radius: 0.75rem; width: 128px; height: auto; object-fit: cover; flex: 1 0 128px; aspect-ratio: 3/4; min-width: 260px;}
div.about-profile > span {display: flex; flex-direction: column; gap: 1rem; flex: 2 1; min-width: 320px;}

div.services-container {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.375rem; 
}
div.services-container > * {
	display: flex; flex-direction: column; align-items: center; gap: 1rem;
	text-align: center;
	padding: 2rem 1rem;
	background-color: var(--col-text-primary);
	color: var(--col-highlight-secondary);
	transition: transform ease-in-out 0.05s;
}
div.services-container > * :first-child {aspect-ratio: 1/1; width: 3rem; margin-bottom: 0.75rem;}
div.services-container > * :nth-child(2) {font-family: inter-medium; text-transform: uppercase;}
div.services-container > * :nth-child(3) {color: #808080; font-size: 0.875rem; height: 100%;}
div.services-container > * :last-child {background-color: #303030; padding: 0.75rem 1.2rem; font-size: 0.875rem; color: white; margin-top: 0.75rem;}
/*div.services-container > * :last-child:hover {background-color: #404040;}*/
div.services-container > *:hover {outline: 1px solid #404040; transform: translateY(-4px); transition: transform ease-in-out 0.1s;}
div.services-container > *:hover :last-child {background-color: #404040;}

/*div.works-container * {border: 1px solid white;}*/
div.works-container {display: flex; flex-direction: column; gap: 0.375rem;}
a.works-item {display: flex; background-color: #202020; padding: 1rem; gap: 1rem; outline: 1px solid #252525; transition: transform ease-in-out 0.05s;}
a.works-item:hover {transform: scale(1.005); outline: 1px solid #808080; transition: transform ease-in-out 0.1s;}
a.works-item > img {opacity: 0.15; height: fit-content; max-height: 2rem;}
a.works-item > :nth-child(2) {display: flex; flex-direction: column; flex-grow: 1; gap: 0.5rem; height: fit-content; color: #808080; font-size: .875rem;}
a.works-item > :nth-child(2) > :first-child {font-family: inter-regular; font-size: 1.15rem; color: white;}
.tags {display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; text-align: center;}
.tags > * {align-content: center; background-color: #303030; color: #bebebe; padding: 0.375rem 0.625rem; font-size: 0.75rem;}
.tags > *:hover {background-color: #404040; color: white;}
img.fit {aspect-ratio: auto;}

div.work-specific-container {display: flex; flex-direction: column; gap: 2rem;}
.work-header {display: flex; flex-direction: column; gap: 0.25rem;}

div.work-image-container {position: relative; display: flex; flex-direction: column; gap: 0.75rem;}
.work-image-preview {width: 100%; aspect-ratio: 4/3; object-fit: contain; border: 1px solid #202020;}
.work-image-desc {/*position: absolute; top: 0; left: 0;*/ background-color: rgba(0,0,0,.25); padding: 0.5rem 0.75rem; font-size: 0.875rem; text-align: center;}
div.work-image-list {display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap;}
div.work-image-list > * {width: 100%; height: auto; max-width: 4rem; aspect-ratio: 1/1; object-fit: cover; outline: 1px solid #303030;}
div.work-image-list > *:hover, div.work-image-list > *.active {outline: 1px solid white;}

iframe {outline: none; border: none; aspect-ratio: 16/9;}

footer {display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #808080; text-align: center; border-top: 1px solid var(--col-text-primary); padding: 1rem;}
footer > div {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem; width: fit-content;}
footer > div a {aspect-ratio: 1/1; width: fit-content; min-width: 2.5rem; align-content: center; padding: 0; transition: all ease-in-out 0.15s;}
footer > div img {pointer-events: none; margin: auto; transition: all ease-in-out 0.1s;}
footer > div a:hover {background-color: #303030; border-radius: 0.75rem;}
footer > div a:hover img {transform: scale(1.1);}