@charset "UTF-8";
/*
* oldcustom.css - https://shirwan.dev
* Licensed under the MIT license - http://opensource.org/licenses/MIT
* Copyright (c) 2025
*/

/* Keyframes */
@keyframes width {
	0% { width: 0; }
}

@keyframes opacity {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

:root { --filter: #000; }

/* Loading overlay */
#loading-overlay {
	opacity: 1;
	transition: opacity 0.75s;
	pointer-events: all;
}
#loading-overlay.hide {
	opacity: 0;
	pointer-events: none;
}

/* Media defaults */
/*iframe { aspect-ratio: 16 / 9; height: auto; }*/

/* Grid */
.grid {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	text-align: center;
}

/* Fade helper */
.fade { animation: opacity 1s forwards !important; }

/* Animated header rule */
hr {
	margin-left: auto !important;
	margin-right: auto !important;
	animation: width 1.5s;
	width: 95%;
}
@media (min-width: 500px) {
	hr { width: 450px; }
}

/* Skills */
.skill-container {
	width: 100%;
	background-color: rgba(34,34,34,0.34);
	border-radius: 25px;
	margin-bottom: 5px;
	padding: 4px;
}
.skills {
	text-align: left;
	color: black;
	height: auto;
	transition: width 0.3s ease-out;
}
.skill-text { font-size: 15px; text-align: left; }
.small-text { font-size: 10px; margin-right: 5px; text-align: end; }
.il { display: inline; }

/* Image helpers */
.image-container {
	position: relative;
	overflow: hidden;
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
}

.bottom-left { position: absolute; bottom: 8px; left: 8px; }
.bottom-right { position: absolute; bottom: 8px; right: 8px; }

.timeline { box-shadow: -5px 5px 4px rgba(0, 0, 0, 0.25); }

/* Timeline / flexible layout */
.container.timeline .timeline-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.container.timeline .timeline-flex > div:first-child {
	flex: 1 1 240px;
	min-width: 0;
	word-break: break-word;
}
/* Make bottom-right a static flex group to avoid overlap */
.container.timeline .bottom-right {
	position: static;
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
	margin-left: 0;
}

/* Responsive timeline tweaks */
@media (max-width: 600px) {
	.timeline-flex { flex-direction: column; gap: 10px; }

	.container.timeline .timeline-flex > div:first-child {
		flex: 0 1 auto;
		width: 100%;
		max-width: 95%;
		box-sizing: border-box;
		padding: 0 12px;
	}
	.container.timeline .timeline-flex iframe,
	.container.timeline .timeline-flex img,
	.container.timeline .timeline-flex video {
		width: 100%;
		height: auto;
		max-height: 50vh;
		object-fit: contain;
		border-radius: 12px;
	}
	.container.timeline .bottom-right {
		width: 100%;
		justify-content: flex-start;
		margin-top: 8px;
	}
}

/* Intersection animations */
/*.intersection-sentry {*/
/*	opacity: 0;*/
/*	transform: scale(0);*/
/*	transition: opacity 2s, transform 0.75s;*/
/*}*/
/*.intersection-sentry.visible {*/
/*	opacity: 1;*/
/*	transform: scale(1);*/
/*}*/

/* Filters */
.filterDiv { filter: brightness(50%); }

/* Show / filter UI */
.show {
	filter: brightness(100%);
}
.filter {
	--bs-btn-border-color: #00000000;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0a58ca;
	--bs-btn-active-border-color: #fff;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
	margin: 3px;
	filter: brightness(50%);
	cursor: pointer;
	background-color: transparent !important;
}
.filter:active { filter: brightness(100%); transform: scale(.90); }
.filter.active, .filter:hover { filter: brightness(100%); background-color: var(--filter) !important; }

/* Social icons */
.youtube { background-image: url("/images/svg/Youtube.svg"); background-position: center; background-repeat: no-repeat; background-size: 90%; width: 32px; height: 32px; border: none; }
.x { background-image: url("/images/svg/X.svg"); background-position: center; background-repeat: no-repeat; background-size: 75%; width: 32px; height: 32px; border: none; }
.itch { background-image: url("/images/svg/Itch.svg"); background-position: center; background-repeat: no-repeat; background-size: 90%; width: 32px; height: 32px; border: none; }
.github { background-image: url("/images/svg/Github.svg"); background-position: center; background-repeat: no-repeat; background-size: 85%; width: 32px; height: 32px; border: none; }
.discord { background-image: url("/images/svg/Discord.svg"); background-position: center; background-repeat: no-repeat; background-size: 85%; width: 32px; height: 32px; border: none; }
.archive { background-image: url("/images/svg/archive.svg"); background-position: center; background-repeat: no-repeat; background-size: 85%; width: 32px; height: 32px; border: none; }
.linkedin { background-image: url("/images/svg/LinkedIn.png"); background-position: center; background-repeat: no-repeat; background-size: 85%; width: 32px; height: 32px; border: none; }

/* Filter button color variants */
.default { color: #fff; --filter: #0a58ca75; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.ue5-filter { color: #fff; --filter: #4c4c4c; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.blender-filter { color: #fff; --filter: rgb(198,141,32); background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.unity-filter { color: #fff; --filter: #808080; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.university-filter { color: #fff; --filter: #6f42c175; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.college-filter { color: #fff; --filter: #b02a3775; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.personal-filter { color: #fff; --filter: #0f513275; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.solo-filter { color: #fff; --filter: #ff7300; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }
.team-filter { color: #fff; --filter: #87007c; background-color: var(--filter); border-color: var(--filter); border-width: 1px; border-radius: 10px; border-style: solid; }