body {
	background-color: #0e1115;
    color: #efece7;
    -webkit-font-smoothing: antialiased;
    font-family: DM Sans, sans-serif;
}

:root {
	--primary: 38 70% 55%;
}

.text-primary { color: hsl(var(--primary)) !important; }
.text-gradient-gold {
	background: linear-gradient(135deg, #ebaf47, #dda23c, #b8732e);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.bg-primary { background-color: hsl(var(--primary) / .1) !important; }

.header-nav {
	backdrop-filter: blur(20px);
    background: rgba(20, 24, 31, 0.7);
    border: 1px solid #272c3580;
}

svg.icon { width: 21px; height: 21px; }
svg.icon16 { width: 16px; height: 16px; }
svg.icon1 { width: 39px; height: 39px; border-radius: 10px; padding: 10px; }

#navbarMain a:hover { color: hsl(var(--primary)); }
#navbarMain li.nav-item { margin: 0 .5rem; }


.card-glass {
    backdrop-filter: blur(20px);
    background: #14181fb3;
    border: 1px solid #272c3580;
}


.project_thumbnail { border-radius:.75rem; overflow: hidden; position: relative; }
.project_thumbnail:hover { animation-duration: .5s; transition-duration: .5s; }
.project_thumbnail::after {
    content: ''; position: absolute; background: hsl(var(--primary));
    left: 0; bottom: 0; width: 100%; height: 2px;
    transform-origin: left; transition: transform .8s ease;
    transform: scaleX(0);
}
.project_thumbnail:hover::after { transform: scaleX(1); }
.project_thumbnail img { width: 100%; height: 100%; object-fit: cover !important; }
.project_thumbnail:hover img { transform: scale(1.1); }
.project_thumbnail .project_thumbnail_info {
    position: absolute; inset: 0; padding: 0 1em 1.2em 1em;
    background-image: linear-gradient(to top, hsl(220 20% 7% / .9) , hsl(220 20% 7% / .2) , transparent);
    display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0;
}
.project_thumbnail .project_thumbnail_info > small {
    color: hsl(var(--primary));
}
.project_thumbnail .project_thumbnail_info > div {
    padding: 0; font-weight: bold; line-height: 1.2;
}
.project_thumbnail:hover .project_thumbnail_info { opacity: 1; }