@import url(variables.css);
@font-face {
	font-family: 'j';
	font-weight: 400;
	src: url(../fonts/SpaceMono-Regular.ttf);
	font-display: swap;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
::selection {
	background-color: var(--selection);
}
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 4px;
	height: 4px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-thumb {
	background-color: var(--accent);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--selection); 
}
* {
	font-family: 'j';
	margin: 0;
}
html {
	scroll-behavior: smooth;
}
h1,
span {
	font-weight: 400;
	color: var(--text);
}
.lnk {
	text-decoration: none;
	color: var(--text);
	transition: .6s ease-in-out;
}
.lnk:hover {
	color: var(--texthov);
}
a {
	padding: 0 10px 0 10px;
	text-decoration: none;
}
body {
	background-color: var(--background);
	background-image: url(../images/topography.svg);
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	animation-duration: 1s;
}
.g {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 80vh;
}
.terrorist {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	border: 2px solid var(--accent);
	border-radius: 6px;
	padding: 16px;
	max-width: 100%;
	min-width: 200px;
}

#about{
	padding: 96px 32px;
}
.projects {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	border: 2px solid var(--fade);
	border-radius: 6px;
	padding: 16px;
	max-width: 100%;
	min-width: 200px;
}
#projects{
	padding: 96px 32px;
}
#projects ::selection {
	background-color: rgba(255, 255, 0, 0.693);
}
#pomazanka{
	padding:  40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.project{
	display: flex;
	margin: auto;
	margin-top: 1rem;
	flex-wrap: wrap;
	align-items: center;
	border: 1px solid var(--fade);
	border-radius: 6px;
	padding: 16px;
	max-width: 40%;
	min-width: 300px;
}
.project:hover{
	box-shadow:0px 0px 15px var(--fade);
	transition: box-shadow 0.5s;
}
@media (max-width: 855px) {
	/* Adjust margin for smaller devices */
	.project {
	  min-width: 350px; /* Increased margin on smaller devices */
	}
	.project>h1 {
		padding: 0.5rem; /* Increased margin on smaller devices */
	}
}
@media (max-width: 555px) {
	/* Adjust margin for smaller devices */
	.project {
	  min-width: 200px; /* Increased margin on smaller devices */
	}
	.project>h1 {
		padding: 0.5rem; /* Increased margin on smaller devices */
	}
}
@media (max-width: 415px) {
    .project {
        min-width: 95%; /* Take up almost the full width on smaller phones */
        max-width: 95%;
        margin: 1rem auto;
        padding: 1rem; /* Add some padding */
    }
#pomazanka{
	padding-right: 25px;
	padding-left: 5px;
}
    .projects {
        padding: 0; /* Reduce padding on the container */
    }
}
i {
	font-style: normal;
	font-size: 24px;
	padding-left: .2rem;
	padding-right: .2rem;
}
.fa-brands {
	color: var(--icons);
	transition: .3s ease-in;
}
.fa-brands:hover {
	color: var(--accent);
}.hoverable {
    position: relative;
    text-decoration: none; /* Remove default underline */
    display: inline-block;
    overflow: hidden; /* Hide overflow for smooth animation */
}

.aboutus::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start from center */
    width: 0;
    height: 2px; /* Thickness of the underline */
	border-radius: 20px;
    background: var(--selection); /* Use your theme color */
    transition: width 0.4s ease, left 0.4s ease; /* Smooth expansion */
    transform: translateX(-50%); /* Align center horizontally */
}
.projectus::after {
    content: '';
    position: absolute;
	border-radius: 20px;

    bottom: 0;
    left: 50%; /* Start from center */
    width: 0;
    height: 2px; /* Thickness of the underline */
    background: var(--fade); /* Use your theme color */
    transition: width 0.4s ease, left 0.4s ease; /* Smooth expansion */
    transform: translateX(-50%); /* Align center horizontally */
}
.hoverable:hover::after {
    width: 100%; /* Expand underline fully */
    left: 0; /* Stretch to both sides */
    transform: translateX(0); /* Reset the transform */
}