@media screen and (max-width: 767px) {
    	:root {
    		--red: #fb4934;
    		--yellow: #fabd2f;
    		--lime: #b8bb26;
    		--green: #b8bb26;
    		--cyan: #8ec07c;
    		--blue: #83a598;
    		--purple: #d3869b;
    		--pink: #b16286;
    		--accent: var(--blue);
    		--background: #3c3836;
    		--backdrop: #282828;
    		--foreground: #ebdbb2;
    		--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    	}

    	/* Your original CSS - unchanged */
    	.imgclass1 {
    		max-height: 80px;
    		max-width: 130px;
    	}

    	.zoom {
    		-ms-transform: scale(1.5);
    		-webkit-transform: scale(1.5);
    		transform: scale(1.5);
    	}

    	ul {
    		display: flex;
    		position: absolute;
    		left: 27%;
    		transform: translate(-50%, -50%);
    	}

    	ul li {
    		list-style: none;
    	}

    	ul li a {
    		width: 25px;
    		height: 24px;
    		background-color: #fff;
    		text-align: center;
    		line-height: 80px;
    		font-size: 14px;
    		margin: 10px 4px;
    		display: block;
    		border-radius: 50%;
    		border-style: dot-dot-dash;
    		position: relative;
    		overflow: hidden;
    		z-index: 1;
    	}

    	ul li a .icon1 {
    		position: relative;
    		margin-top: 5px;
    		color: #fbf1c7;
    		transition: .5s;
    		z-index: 3;
    	}

    	ul li a:hover .icon {
    		color: #fff;
    		transform: rotateY(360deg);
    	}

    	ul li a:before {
    		content: "";
    		position: absolute;
    		top: 100%;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background: #f00;
    		transition: .5s;
    		z-index: 1;
    	}

    	ul li a:hover:before {
    		top: 0;
    	}

    	ul li:nth-child(1) a:before {
    		background: var(--lime);
    	}

    	ul li:nth-child(2) a:before {
    		background: var(--cyan);
    	}

    	ul li:nth-child(3) a:before {
    		background: #fe8019;
    	}

    	ul li:nth-child(4) a:before {
    		background: #dd4b39;
    	}

    	.boxclassinfinite {
    		position: absolute;
    		left: 3%;
    		right: 3%;
    		height: 82%;
    		background: var(--background);
    		min-width: 90%;
    		min-height: 82%;
    		top: 4%;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    		z-index: 9;
    	}

    	.boxclass3 {
    		position: absolute;
    		margin-top: 10px;
    		height: 150px;
    		margin-left: -340pt;
    		background: var(--background);
    		min-width: 850px;
    		min-height: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass3::-webkit-scrollbar {
    		display: none;
    	}

    	.project-card {
    		background-color: #1d2021;
    		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    		overflow: hidden;
    		transition: transform 0.3s ease;
    		margin-bottom: 20px;
    		border: 1px solid #3c3836;
    		border-radius: 10px;
    		position: relative;
    		z-index: 1;
    	}

    	.project-card:before {
    		content: "";
    		position: absolute;
    		top: 1px;
    		left: 1px;
    		right: 1px;
    		bottom: 1px;
    		z-index: -1;
    		border-radius: 10px;
    		border: 2.5px dashed #ffffff;
    		animation: spin 10s linear infinite;
    	}

    	.project-card:after {
    		content: "";
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		background-color: #1d2021;
    		border-radius: 10px;
    		margin: 2px;
    		z-index: -1;
    	}

    	@keyframes spin {
    		100% {
    			transform: rotateZ(180deg);
    		}
    	}

    	@keyframes rainbow-border {
    		0% {
    			background-position: 0% 50%
    		}

    		50% {
    			background-position: 100% 50%
    		}

    		100% {
    			background-position: 0% 50%
    		}
    	}

    	.project-card:hover:before,
    	.project-card:focus:before {
    		animation: rainbow-border 5s ease infinite;
    	}

    	.project-card:hover {
    		transform: translateY(-5px);
    	}

    	.project-image img {
    		width: 100%;
    		height: 200px;
    		object-fit: cover;
    	}

    	.project-content {
    		padding: 20px;
    	}

    	.project-content h3 {
    		margin-top: 0;
    		margin-bottom: 10px;
    		font-size: 1.5rem;
    		color: #ebdbb2;
    	}

    	.project-header {
    		opacity: 0;
    		transform: translate(-150px, -50px) rotate(-9000deg) scale(1);
    		animation: revolveScaleP 1s forwards;
    	}

    	.project-date {
    		margin-bottom: 10px;
    		font-size: 0.9rem;
    		color: #a89984;
    	}

    	.project-description {
    		margin-bottom: 20px;
    		color: #a89984;
    	}

    	.project-links {
    		display: flex;
    		justify-content: space-between;
    	}

    	.project-links .btn {
    		background-color: #458588;
    		padding: 8px 16px;
    		border-radius: 4px;
    		text-decoration: none;
    		transition: background-color 0.3s ease;
    	}

    	.project-links .btn:hover {
    		background-color: #689d6a;
    	}

    	.containers1 {
    		display: flex;
    		justify-content: space-between;
    		align-items: flex-start;
    		position: absolute;
    		left: 7%;
    		right: 7%;
    		top: 15%;
    		gap: 2%;
    	}

    	.boxclass,
    	.boxclass1 {
    		margin-left: 90px;
    		background: var(--background);
    		max-width: 450px;
    		min-height: 250px;
    		margin-top: 50px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: margin 100ms;
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		gap: 4px;
    	}

    	.boxclass {
    		margin-left: -65px;
    		top: 1%;
    		position: absolute;
    		height: 250px;
    	}

    	.boxclass p {
    		display: none;
    		font-size: 13px;
    	}

    	#punhide {
    		display: block;
    	}

    	.boxclass1 {
    		position: absolute;
    		top: 27px;
    		height: 250px;
    		background: var(--background);
    		min-width: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass1 h1 {
    		text-align: center;
    	}

    	.boxclass1::-webkit-scrollbar {
    		display: none;
    	}

    	@media screen and (max-width: 768px) {
    		#boxcontainer {
    			flex-direction: column;
    			gap: 20px;
    		}

    		.boxclass,
    		.boxclass1 {
    			max-width: 100%;
    		}
    	}

    	html {
    		color: var(--foreground);
    		background: var(--backdrop);
    		font-family: "Noto Sans", Roboto, sans-serif;
    	}

    	h1 {
    		font-weight: 600;
    	}

    	h2 {
    		margin-left: 20px;
    	}

    	a,
    	h2,
    	.accent {
    		color: var(--accent);
    	}

    	.anch1 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch2 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch3 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch4 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch5 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	h1 {
    		text-align: center;
    	}

    	.links p>span {
    		display: block;
    	}

    	@media (min-width: 600px) {
    		.links p {
    			display: grid;
    			grid-template-columns: 12ch calc(100% - 12ch);
    			margin: 8px 0;
    		}
    	}

    	@media (max-width: 940px) {
    		body {
    			margin-top: 0;
    		}
    	}

    	.gradient {
    		font-family: "Lucida Console", "Courier New", monospace, cursive;
    		background: linear-gradient(to right, #fbf1c7, var(--yellow), var(--blue));
    		-webkit-background-clip: text;
    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	@keyframes rainbow {

    		0%,
    		100% {
    			background-position: 0 0;
    		}

    		50% {
    			background-position: 100% 0;
    		}
    	}

    	/* dark mode */
    	@media (prefers-color-scheme:dark) {
    		:root {
    			--red: #fb4934;
    			--yellow: #fabd2f;
    			--lime: #b8bb26;
    			--green: #b8bb26;
    			--cyan: #8ec07c;
    			--blue: #83a598;
    			--purple: #d3869b;
    			--pink: #b16286;
    			--accent: var(--blue);
    			--background: #282828;
    			--backdrop: #1d2021;
    			--foreground: #ebdbb2;
    			--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    		}
    	}

    	.about-class {
    		text-transform: capitalize;
    		margin: 20px;
    	}

    	.about-topic {
    		margin: 20px;
    	}

    	.sattire {
    		text-transform: capitalize;
    		font-family: noto sans-serif, Roboto;
    		font-size: 10px;
    		font-weight: 100;
    		margin-left: 100px;
    	}

    	.neo {
    		text-transform: capitalize;
    		font-size: 12px;
    		color: #458588;
    		font-family: sans-serif, Roboto;
    		font-weight: bold;
    		padding-bottom: -100px;
    		margin-left: 370px;
    		opacity: 0;
    	}

    	.neo:hover {
    		opacity: 1;
    	}

    	.anc {
    		font-size: 15px;
    		margin-left: 40%;
    		opacity: 0;
    	}

    	.anc:hover {
    		opacity: 1;
    		background: linear-gradient(to right, var(--lime), var(--cyan), var(--blue), var(--purple));
    		-webkit-background-clip: text;
    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	a {
    		background: linear-gradient(to right, var(--lime), var(--cyan), var(--blue), var(--purple));
    		-webkit-background-clip: text;
    		color: transparent;
    		animation: rainbow 5s forwards infinite;
    		background-size: 400% 100%;
    	}

    	.logo-glitchh:hover {
    		background: #ffff;
    	}

    	a:hover {
    		animation: animate 2s linear infinite;
    	}

    	.name-info {
    		font-weight: bolder;
    	}

    	.realname {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg, #282828 40%, #c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    	}

    	@keyframes textclip {
    		to {
    			background-position: 200% center;
    		}
    	}

    	.realname1 {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg, #282828 10%, #c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    	}

    	.blog-post {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		transition: transform 0.3s ease-in-out;
    	}

    	.post-title {
    		font-size: 20px;
    		margin-bottom: 8px;
    	}

    	.post-meta {
    		text-align: center;
    		font-style: italic;
    		color: #666;
    		margin-bottom: 10px;
    	}

    	.post-tags {
    		text-align: center;
    	}

    	.post-content {
    		text-align: center;
    		line-height: 1.5;
    		font-size: 14px;
    	}

    	.txtarea {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		border: 5px solid #ebdbb2;
    		border-radius: 18px;
    		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    		font-size: 24px;
    		border-style: dotted;
    		padding: 2rem 1rem;
    		min-height: 3em;
    		resize: both;
    		border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23504945' /%3E%3Cstop offset='100%25' stop-color='%23504945' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
    	}

    	.container {
    		margin-left: 49%;
    		margin-top: 4%;
    		position: relative;
    		width: 24px;
    		height: 24px;
    		transition: opacity 0.5s ease, visibility 0.5s ease;
    		opacity: 1;
    	}

    	.chevron {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(0.5, 0.5, 0.5);
    	}

    	.reverse-chevron-child {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(-0.5, -0.5, -0.5);
    	}

    	.chevron:first-child,
    	.first {
    		animation: move 3s ease-out 1s infinite;
    	}

    	.chevron:nth-child(2),
    	.second {
    		animation: move 3s ease-out 2s infinite;
    	}

    	.chevron:before,
    	.chevron:after,
    	.reverse-chevron-child:before,
    	.reverse-chevron-child:after {
    		content: ' ';
    		position: absolute;
    		top: 0;
    		height: 100%;
    		width: 51%;
    		background: #ebdbb2;
    	}

    	.chevron:before,
    	.reverse-chevron-child:before {
    		left: 0;
    		transform: skew(0deg, 30deg);
    	}

    	.chevron:after,
    	.reverse-chevron-child:after {
    		right: 0;
    		width: 50%;
    		transform: skew(0deg, -30deg);
    	}

    	.reverse-chevron {
    		position: absolute;
    		top: 20%;
    		right: 50%;
    		width: 28px;
    		height: 60px;
    		cursor: pointer;
    		z-index: 1000;
    	}

    	@keyframes move {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(30px);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(40px);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    		}
    	}

    	.reverse-chevron-child {
    		animation-name: move-reverse;
    	}

    	@keyframes move-reverse {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(-30px) scale3d(-1, -1, -1);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(-40px) scale3d(-1, -1, -1);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(-55px) scale3d(-0.5, -0.5, -0.5);
    		}
    	}

    	.text {
    		display: block;
    		margin-top: 75px;
    		margin-left: -30px;
    		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    		font-size: 12px;
    		color: #fff;
    		text-transform: uppercase;
    		white-space: nowrap;
    		opacity: .25;
    		animation: pulse 2s linear alternate infinite;
    	}

    	@keyframes pulse {
    		to {
    			opacity: 1;
    		}
    	}

    	.download-cv-btn {
    		line-height: 50px;
    		height: 50px;
    		width: 50px;
    		cursor: pointer;
    		color: #fff89d;
    		transition: all 0.5s;
    		position: relative;
    		background-color: #312c1f93;
    		border: none;
    		border-radius: 50%;
    		text-align: center;
    		font-size: 14px;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    	}

    	.download-cv-btn::before {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		background-color: rgba(255, 255, 255, 0.1);
    		transition: all 0.3s;
    		border-radius: 50%;
    	}

    	.download-cv-btn:hover::before {
    		opacity: 0;
    		transform: scale(0.5, 0.5);
    	}

    	.download-cv-btn::after {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		opacity: 0;
    		transition: all 0.3s;
    		border: 1px solid rgba(255, 215, 129, 0.842);
    		transform: scale(1.2, 1.2);
    		border-radius: 50%;
    	}

    	.download-cv-btn:hover::after {
    		opacity: 1;
    		transform: scale(1, 1);
    	}

    	.post-title span {
    		color: #c98a57;
    		opacity: 0;
    		transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    		animation: revolveScale 0.4s forwards;
    	}

    	@keyframes revolveScale {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(.3);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    		}
    	}

    	@keyframes revolveScaleP {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(0.3);
    			filter: blur(10px);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    			filter: blur(0);
    		}
    	}

    	@keyframes closeAnimation {
    		0% {
    			opacity: 1;
    			transform: scale(1);
    		}

    		100% {
    			opacity: 0;
    			transform: scale(0.5);
    		}
    	}

    	.boxclassinfinite.hide-animation {
    		animation: closeAnimation 0.3s forwards;
    	}

    	#boxcontainer {
    		display: flex;
    		justify-content: space-between;
    		align-items: flex-start;
    		margin: 0 auto;
    		max-width: 1000px;
    		padding: 20px;
    		box-sizing: border-box;
    		justify-content: center;
    		align-items: center;
    	}

    	.button-2 {
    		background-color: #282828;
    		border-radius: 15px;
    		border-width: 0;
    		color: #fff9a7;
    		cursor: pointer;
    		display: inline-block;
    		font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    		font-size: 14px;
    		font-weight: 500;
    		line-height: 20px;
    		list-style: none;
    		margin-bottom: 6px;
    		padding: 5px 10px;
    		text-align: center;
    		transition: all 200ms;
    		vertical-align: baseline;
    		white-space: nowrap;
    		user-select: none;
    		-webkit-user-select: none;
    		touch-action: manipulation;
    		animation: mix 5s cubic-bezier(0.23, 1, 0.320, 1) infinite;
    	}

    	.button-2:hover {
    		background-color: rgba(0, 0, 0, 0);
    		color: #ffffc4;
    		transform: translateY(-2px);
    		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    		animation-play-state: paused;
    	}

    	@keyframes mix {
    		30% {
    			box-shadow: 0 -0.5em 1em 1.5em rgba(255, 0, 200, 0.5),
    				2em -0.5em 1em 1.5em rgba(255, 50, 0, 0.8),
    				-2em 1em 1.5em 1em rgba(155, 200, 0, 0.5),
    				-2em -1em 1em 1em rgba(200, 0, 150, 0.6),
    				0 1.5em 1em 1em rgba(20, 250, 0, 0.5),
    				1em 0.5em 1em 1em rgba(50, 10, 250, 0.5);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}

    		60% {
    			box-shadow: 1em 0.5em 1em 1.5em rgba(55, 0, 200, 0.5),
    				1.5em 0.5em 1em 1.5em rgba(25, 150, 0, 0.6),
    				1.5em -1em 1.5em 1.5em rgba(155, 200, 0, 0.5),
    				-2em 1em 1em 1.5em rgba(200, 0, 50, 0.6),
    				0 -1.5em 1em 1.5em rgba(200, 250, 0, 0.5),
    				-1em 0.5em 1em 1.5em rgba(50, 210, 250, 0.6);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}
    	}

    	.boxclass {
    		transition: transform 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    		position: relative;
    		z-index: 1;
    	}

    	.zoom-effect {
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%) scale(1.3);
    		transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1), filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    		filter: blur(0);
    		z-index: 2;
    	}

    	.blurred-background {
    		filter: blur(15px);
    	}

    	.close-container {
    		position: fixed;
    		margin: auto;
    		width: 50px;
    		height: 50px;
    		margin-top: 10px;
    		cursor: pointer;
    	}

    	.leftright {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #f2e5bc;
    		border-radius: 2px;
    		transform: rotate(45deg);
    		transition: all .3s ease-in;
    	}

    	.rightleft {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #F4A259;
    		border-radius: 2px;
    		transform: rotate(-45deg);
    		transition: all .3s ease-in;
    	}

    	label {
    		color: white;
    		font-family: Helvetica, Arial, sans-serif;
    		font-size: .3em;
    		margin-left: 5px;
    		text-transform: uppercase;
    		letter-spacing: 2px;
    		transition: all .3s ease-in;
    		opacity: 0;
    	}

    	.close {
    		margin: 60px 0 0 5px;
    		position: absolute;
    	}

    	.close-container:hover .leftright {
    		transform: rotate(-45deg);
    		background-color: #F4A259;
    	}

    	.close-container:hover .rightleft {
    		transform: rotate(45deg);
    		background-color: #F25C66;
    	}

    	.close-container:hover label {
    		opacity: 1;
    	}

    	.imgclass1 {
    		--g: 4px;
    		--b: 12px;
    		--c: #fe8019;
    		padding: calc(var(--g) + var(--b));
    		--_c: #0000 0 25%, var(--c) 0 50%;
    		--_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
    		--_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
    		background:
    			var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    			var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
    		background-size: 200% var(--b), var(--b) 200%;
    		cursor: pointer;
    		filter: grayscale(50%);
    		transition: .3s;
    	}

    	.imgclass1:hover {
    		--_p: 75%;
    		filter: grayscale(0%);
    	}

    	canvas {
    		position: absolute;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: -1;
    	}

    	.lighter-card {
    		background-color: #32302f;
    		padding: 20px;
    		border-radius: 8px;
    		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    	}

    	.blog-post {
    		margin-bottom: 20px;
    		padding: 15px;
    		border: 1px solid #3c3836;
    		border-radius: 5px;
    	}

    	.blog-post h2 {
    		margin-top: 0;
    		font-size: 24px;
    	}

    	.blog-post p {
    		margin-bottom: 0;
    		font-size: 18px;
    	}

    	/* Mobile-specific styles - only applied on smaller screens */
    	@media (max-width: 768px) {

    		/* Reset positioning for mobile */
    		.boxclassinfinite,
    		.boxclass3,
    		.boxclass,
    		.boxclass1,
    		.containers1 {
    			position: relative !important;
    			width: 90% !important;
    			left: -8px !important;
    			right: 0 !important;
    			top: 0 !important;
    			margin: 111px auto !important;
    			min-width: unset !important;
    			min-height: unset !important;
    			height: auto !important;
    			padding: 20px !important;
    		}

    		/* Social icons */
    		ul {
    			position: relative !important;
    			left: 0 !important;
    			transform: none !important;
    			justify-content: center;
    			margin: 20px 0;
    			padding: 0;
    		}

    		#ul2id {
    			/*margin-left: 40px !important;*/
    		}

    		ul li a {
    			width: 25px !important;
    			height: 24px !important;
    			line-height: 40px !important;
    			margin: 0 10px !important;
    		}

    		/* Navigation */
    		.anch1,
    		.anch2,
    		.anch3,
    		.anch4,
    		.anch5 {
    			text-align: center !important;
    			margin: 10px 0 !important;
    			display: block;
    		}

    		/* Text adjustments */
    		h2 {
    			margin-left: 0 !important;
    			text-align: center;
    		}

    		.sattire,
    		.neo,
    		.anc {
    			margin-left: 0 !important;
    			text-align: center;
    			display: block;
    		}

    		/* Project cards */
    		.project-links {
    			flex-direction: column;
    			gap: 10px;
    		}

    		.project-links .btn {
    			text-align: center;
    		}

    		/* Hide complex elements that don't work well on mobile */
    		.reverse-chevron,
    		.container {
    			display: none;
    		}

    		/* Adjust font sizes */
    		.gradient {
    			font-size: 1.8rem;
    		}

    		.realname,
    		.realname1 {
    			font-size: 1.2rem;
    		}

    		/* Fix boxclass containers */
    		#boxcontainer {
    			flex-direction: column;
    		}

    		.boxclass,
    		.boxclass1 {
    			margin-left: 0 !important;
    			max-width: 100% !important;
    		}
    	}

    	/* Very small devices */
    	@media (max-width: 480px) {
    		.imgclass1 {
    			max-height: 60px;
    			max-width: 100px;
    		}

    		.boxclassinfinite,
    		.boxclass3,
    		.boxclass,
    		.boxclass1 {
    			width: 95% !important;
    			padding: 15px !important;
    		}

    		.project-content {
    			padding: 15px !important;
    		}

    		.project-content h3 {
    			font-size: 1.2rem !important;
    		}

    		.blog-post h2 {
    			font-size: 1.2rem !important;
    		}

    		.txtarea {
    			font-size: 18px !important;
    			padding: 1rem !important;
    		}
    	}
    }


    @media screen and (min-width: 1024px) {
    	:root {
    		--red: #fb4934;
    		--yellow: #fabd2f;
    		--lime: #b8bb26;
    		--green: #b8bb26;
    		--cyan: #8ec07c;
    		--blue: #83a598;
    		--purple: #d3869b;
    		--pink: #b16286;
    		--accent: var(--blue);

    		--background: #3c3836;
    		--backdrop: #282828;
    		--foreground: #ebdbb2;
    		--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    	}


    	/*Start animations*/


    	/*End animations*/
    	.imgclass1 {
    		max-height: 80px;
    		max-width: 130px;

    	}

    	.zoom {
    		-ms-transform: scale(1.5);
    		/* IE 9 */
    		-webkit-transform: scale(1.5);
    		/* Safari 3-8 */
    		transform: scale(1.5);
    	}

    	ul {
    		display: flex;
    		position: absolute;
    		left: 27%;
    		transform: translate(-50%, -50%);
    	}

    	ul li {
    		list-style: none;
    	}

    	ul li a {
    		width: 24px;
    		height: 24px;
    		background-color: #fff;
    		text-align: center;
    		line-height: 80px;
    		font-size: 14px;
    		margin: 10px 4px;
    		display: block;
    		border-radius: 50%;
    		border-style: dot-dot-dash;
    		position: relative;
    		overflow: hidden;

    		z-index: 1;
    	}

    	ul li a .icon1 {
    		position: relative;
    		margin-top: 5px;
    		color: #fbf1c7;
    		transition: .5s;
    		z-index: 3;
    	}

    	ul li a:hover .icon {
    		color: #fff;
    		transform: rotateY(360deg);
    	}

    	ul li a:before {
    		content: "";
    		position: absolute;
    		top: 100%;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background: #f00;
    		transition: .5s;
    		z-index: 1;
    	}

    	ul li a:hover:before {
    		top: 0;
    	}

    	ul li:nth-child(1) a:before {
    		background: var(--lime);
    	}

    	ul li:nth-child(2) a:before {
    		background: var(--cyan);
    	}

    	ul li:nth-child(3) a:before {
    		background: #fe8019;
    	}

    	ul li:nth-child(4) a:before {
    		background: #dd4b39;
    	}



    	.boxclassinfinite {
    		position: absolute;
    		left: 3%;
    		right: 3%;
    		height: 82%;
    		background: var(--background);
    		min-width: 90%;
    		min-height: 82%;
    		top: 4%;
    		/* Same as boxclass */
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    		z-index: 9;
    	}

    	.boxclass3 {
    		position: absolute;
    		margin-top: 10px;
    		height: 150px;
    		margin-left: -340pt;
    		background: var(--background);
    		min-width: 850px;
    		min-height: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass3::-webkit-scrollbar {
    		display: none;
    	}

    	.project-card {
    		background-color: #1d2021;
    		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    		overflow: hidden;
    		transition: transform 0.3s ease;
    		margin-bottom: 20px;
    		border: 1px solid #3c3836;
    		border-radius: 10px;
    		position: relative;
    		z-index: 1;
    	}

    	.project-card:before {
    		content: "";
    		position: absolute;
    		top: 1px;
    		left: 1px;
    		right: 1px;
    		bottom: 1px;
    		z-index: -1;
    		border-radius: 10px;
    		border: 2.5px dashed #ffffff;
    		animation: spin 10s linear infinite;

    	}

    	.project-card:after {
    		content: "";
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		background-color: #1d2021;
    		border-radius: 10px;
    		margin: 2px;
    		z-index: -1;

    	}

    	@keyframes spin {
    		100% {
    			transform: rotateZ(180deg);
    		}
    	}

    	@keyframes rainbow-border {
    		0% {
    			background-position: 0% 50%
    		}

    		50% {
    			background-position: 100% 50%
    		}

    		/* Changed the keyframes to have a smoother transition */
    		100% {
    			background-position: 0% 50%
    		}
    	}

    	.project-card:hover:before,
    	.project-card:focus:before {
    		animation: rainbow-border 5s ease infinite;

    	}

    	.project-card:hover {
    		transform: translateY(-5px);
    	}

    	.project-image img {
    		width: 100%;
    		height: 200px;
    		object-fit: cover;
    	}

    	.project-content {
    		padding: 20px;
    	}

    	.project-content h3 {
    		margin-top: 0;
    		margin-bottom: 10px;
    		font-size: 1.5rem;
    		color: #ebdbb2;
    	}

    	.project-header {
    		opacity: 0;
    		/* Initial opacity */
    		transform: translate(-150px, -50px) rotate(-9000deg) scale(1);
    		/* Initial transform */
    		animation: revolveScaleP 1s forwards;
    		/* Apply the revolveScale animation */
    	}

    	.project-date {
    		margin-bottom: 10px;
    		font-size: 0.9rem;
    		color: #a89984;
    	}

    	.project-description {
    		margin-bottom: 20px;
    		color: #a89984;
    	}

    	.project-links {
    		display: flex;
    		justify-content: space-between;
    	}

    	.project-links .btn {
    		background-color: #458588;

    		padding: 8px 16px;
    		border-radius: 4px;
    		text-decoration: none;
    		transition: background-color 0.3s ease;
    	}

    	.project-links .btn:hover {
    		background-color: #689d6a;
    	}

    	.containers1 {
    		display: flex;
    		justify-content: space-between;
    		align-items: flex-start;
    		position: absolute;
    		left: 7%;
    		right: 7%;
    		top: 15%;
    		gap: 2%;
    		/* Space between the boxes */
    	}

    	.boxclass,
    	.boxclass1 {
    		margin-left: 90px;
    		background: var(--background);
    		max-width: 450px;
    		min-height: 250px;
    		margin-top: 50px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: margin 100ms;
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		gap: 4px;
    	}

    	.boxclass {
    		margin-left: -65px;
    		top: 1%;
    		position: absolute;
    		height: 250px;
    	}

    	.boxclass1 {
    		position: absolute;
    		top: 27px;
    		height: 250px;
    		background: var(--background);
    		min-width: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass1 h1 {
    		text-align: center;
    	}

    	.boxclass1::-webkit-scrollbar {
    		display: none;
    	}

    	@media screen and (max-width: 768px) {
    		#boxcontainer {
    			flex-direction: column;
    			gap: 20px;
    		}

    		.boxclass,
    		.boxclass1 {
    			max-width: 100%;
    		}
    	}


    	html {
    		color: var(--foreground);
    		background: var(--backdrop);
    		font-family: "Noto Sans", Roboto, sans-serif;
    	}

    	h1 {
    		font-weight: 600;
    	}

    	h2 {
    		margin-left: 20px;
    	}

    	a,
    	h2,
    	.accent {
    		color: var(--accent);
    	}

    	/* a {
		text-align: right;
		margin-right: 20px;
		text-decoration: none;
		font-weight: 500;
	} */

    	.anch1 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch2 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch3 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch4 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch5 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	h1 {
    		text-align: center;
    	}

    	.links p>span {
    		display: block;
    	}

    	@media (min-width: 600px) {
    		.links p {
    			display: grid;
    			grid-template-columns: 12ch calc(100% - 12ch);
    			margin: 8px 0;
    		}
    	}

    	@media (max-width: 940px) {
    		body {
    			margin-top: 0;
    		}
    	}

    	.gradient {
    		font-family: "Lucida Console", "Courier New", monospace, cursive;
    		background: linear-gradient(to right,
    				#fbf1c7,
    				var(--yellow),
    				var(--blue));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	@keyframes rainbow {

    		0%,
    		100% {
    			background-position: 0 0;
    		}

    		50% {
    			background-position: 100% 0;
    		}
    	}

    	/* dark mode */
    	@media (prefers-color-scheme:dark) {
    		:root {
    			--red: #fb4934;
    			--yellow: #fabd2f;
    			--lime: #b8bb26;
    			--green: #b8bb26;
    			--cyan: #8ec07c;
    			--blue: #83a598;
    			--purple: #d3869b;
    			--pink: #b16286;
    			--accent: var(--blue);

    			--background: #282828;
    			--backdrop: #1d2021;
    			--foreground: #ebdbb2;
    			--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    		}
    	}

    	.about-class {
    		text-transform: capitalize;
    		margin: 20px;
    	}

    	.about-topic {


    		margin: 20px;
    	}

    	.sattire {
    		text-transform: capitalize;
    		font-family: noto sans-serif, Roboto;
    		font-size: 10px;
    		font-weight: 100;
    		margin-left: 100px;
    	}

    	.neo {
    		text-transform: capitalize;
    		font-size: 12px;
    		color: #458588;
    		font-family: sans-serif, Roboto;
    		font-weight: bold;
    		padding-bottom: -100px;
    		margin-left: 370px;
    		opacity: 0;
    	}

    	.neo:hover {
    		opacity: 1;
    	}

    	.anc {
    		font-size: 15px;
    		margin-left: 40%;
    		opacity: 0;
    	}

    	.anc:hover {
    		opacity: 1;
    		background: linear-gradient(to right,
    				var(--lime),
    				var(--cyan),
    				var(--blue),
    				var(--purple));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	a {
    		background: linear-gradient(to right,
    				var(--lime),
    				var(--cyan),
    				var(--blue),
    				var(--purple));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s forwards infinite;
    		background-size: 400% 100%;
    	}

    	.logo-glitchh:hover {
    		background: #ffff;
    	}

    	a:hover {
    		animation: animate 2s linear infinite;
    	}

    	.name-info {
    		font-weight: bolder;
    	}



    	.realname {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg,
    				#282828 40%,
    				#c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;

    	}

    	@keyframes textclip {
    		to {
    			background-position: 200% center;
    		}
    	}

    	.realname1 {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg,
    				#282828 10%,
    				#c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;

    	}

    	@keyframes textclip {
    		to {
    			background-position: 200% center;
    		}
    	}

    	/* Style for the blog post */
    	.blog-post {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		transition: transform 0.3s ease-in-out;
    	}

    	.post-title {
    		font-size: 20px;
    		margin-bottom: 8px;
    	}

    	.post-meta {
    		text-align: center;
    		font-style: italic;
    		color: #666;
    		margin-bottom: 10px;
    	}

    	.post-tags {
    		text-align: center;
    	}

    	.post-content {
    		text-align: center;
    		line-height: 1.5;
    		font-size: 14px;
    	}

    	/* Zoom effect on hover
	    .blog-post:hover {
	      transform: scale(1.05);  Adjust the scaling factor as needed
	    }*/



    	/* start of border*/


    	.txtarea {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		border: 5px solid #ebdbb2;
    		border-radius: 18px;
    		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    		font-size: 24px;
    		border-style: dotted;
    		padding: 2rem 1rem;
    		min-height: 3em;
    		resize: both;
    		border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23504945' /%3E%3Cstop offset='100%25' stop-color='%23504945' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
    	}


    	.container {
    		margin-left: 49%;
    		margin-top: 4%;
    		position: relative;
    		width: 24px;
    		height: 24px;
    		transition: opacity 0.5s ease, visibility 0.5s ease;
    		opacity: 1;
    	}

    	/* Original Chevron Styles */
    	.chevron {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(0.5, 0.5, 0.5);
    	}

    	.reverse-chevron-child {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(-0.5, -0.5, -0.5);
    	}

    	.chevron:first-child,
    	.first {
    		animation: move 3s ease-out 1s infinite;
    	}

    	.chevron:nth-child(2),
    	.second {
    		animation: move 3s ease-out 2s infinite;
    	}

    	.chevron:before,
    	.chevron:after,
    	.reverse-chevron-child:before,
    	.reverse-chevron-child:after {
    		content: ' ';
    		position: absolute;
    		top: 0;
    		height: 100%;
    		width: 51%;
    		background: #ebdbb2;
    	}

    	.chevron:before,
    	.reverse-chevron-child:before {
    		left: 0;
    		transform: skew(0deg, 30deg);
    	}

    	.chevron:after,
    	.reverse-chevron-child:after {
    		right: 0;
    		width: 50%;
    		transform: skew(0deg, -30deg);
    	}

    	/* Reverse Chevron Container */
    	.reverse-chevron {
    		position: absolute;
    		top: 20%;
    		right: 50%;
    		width: 28px;
    		height: 60px;
    		cursor: pointer;
    		z-index: 1000;
    	}

    	/* Animation Differences */
    	@keyframes move {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(30px);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(40px);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    		}
    	}

    	.reverse-chevron-child {
    		animation-name: move-reverse;
    	}

    	@keyframes move-reverse {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(-30px) scale3d(-1, -1, -1);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(-40px) scale3d(-1, -1, -1);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(-55px) scale3d(-0.5, -0.5, -0.5);
    		}
    	}

    	.text {
    		display: block;
    		margin-top: 75px;
    		margin-left: -30px;
    		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    		font-size: 12px;
    		color: #fff;
    		text-transform: uppercase;
    		white-space: nowrap;
    		opacity: .25;
    		animation: pulse 2s linear alternate infinite;
    	}

    	@keyframes pulse {
    		to {
    			opacity: 1;
    		}
    	}

    	.download-cv-btn {
    		line-height: 50px;
    		height: 50px;
    		width: 50px;
    		/* Adjust width to match the height */
    		cursor: pointer;
    		color: #fff89d;
    		/* Text color */
    		transition: all 0.5s;
    		position: relative;
    		background-color: #312c1f93;
    		/* Translucent background color */
    		border: none;
    		/* Remove borders */
    		border-radius: 50%;
    		/* Make it a circle */
    		text-align: center;
    		/* Center text */
    		font-size: 14px;
    		/* Adjust font size to fit */
    		display: flex;
    		align-items: center;
    		/* Center text vertically */
    		justify-content: center;
    		/* Center text horizontally */
    	}

    	.download-cv-btn::before {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		background-color: rgba(255, 255, 255, 0.1);
    		/* Match background color */
    		transition: all 0.3s;
    		border-radius: 50%;
    		/* Make the before element a circle */
    	}

    	.download-cv-btn:hover::before {
    		opacity: 0;
    		transform: scale(0.5, 0.5);
    	}

    	.download-cv-btn::after {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		opacity: 0;
    		transition: all 0.3s;
    		border: 1px solid rgba(255, 215, 129, 0.842);
    		/* Match border color */
    		transform: scale(1.2, 1.2);
    		border-radius: 50%;
    		/* Make the after element a circle */
    	}

    	.download-cv-btn:hover::after {
    		opacity: 1;
    		transform: scale(1, 1);
    	}

    	.post-title span {
    		color: #c98a57;
    		/* Color for the text */
    		opacity: 0;
    		/* Initial opacity */
    		transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    		/* Initial transform */
    		animation: revolveScale 0.4s forwards;
    		/* Apply the revolveScale animation */
    	}

    	/* Keyframes for Animation One */
    	@keyframes revolveScale {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(.3);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    		}
    	}

    	@keyframes revolveScaleP {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(0.3);
    			filter: blur(10px);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    			filter: blur(0);
    		}
    	}

    	@keyframes closeAnimation {
    		0% {
    			opacity: 1;
    			transform: scale(1);
    		}

    		100% {
    			opacity: 0;
    			transform: scale(0.5);
    		}
    	}

    	.boxclassinfinite.hide-animation {
    		animation: closeAnimation 0.3s forwards;
    	}

    	#boxcontainer {
    		display: flex;



    		justify-content: space-between;
    		align-items: flex-start;
    		margin: 0 auto;
    		max-width: 1000px;
    		padding: 20px;
    		box-sizing: border-box;
    		justify-content: center;
    		align-items: center;


    	}

    	.button-2 {
    		background-color: #282828;
    		border-radius: 15px;
    		border-width: 0;
    		color: #fff9a7;
    		cursor: pointer;
    		display: inline-block;
    		font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    		font-size: 14px;
    		font-weight: 500;
    		line-height: 20px;
    		list-style: none;
    		margin-bottom: 6px;
    		padding: 5px 10px;
    		text-align: center;
    		transition: all 200ms;
    		vertical-align: baseline;
    		white-space: nowrap;
    		user-select: none;
    		-webkit-user-select: none;
    		touch-action: manipulation;
    		animation: mix 5s cubic-bezier(0.23, 1, 0.320, 1) infinite;

    		&::after {
    			background: transparent !important;
    		}
    	}

    	.button-2:hover {
    		background-color: rgba(0, 0, 0, 0);
    		color: #ffffc4;
    		transform: translateY(-2px);
    		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    		animation-play-state: paused;
    	}

    	@keyframes mix {
    		30% {
    			box-shadow: 0 -0.5em 1em 1.5em rgba(255, 0, 200, 0.5),
    				2em -0.5em 1em 1.5em rgba(255, 50, 0, 0.8),
    				-2em 1em 1.5em 1em rgba(155, 200, 0, 0.5),
    				-2em -1em 1em 1em rgba(200, 0, 150, 0.6),
    				0 1.5em 1em 1em rgba(20, 250, 0, 0.5),
    				1em 0.5em 1em 1em rgba(50, 10, 250, 0.5);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}

    		60% {
    			box-shadow: 1em 0.5em 1em 1.5em rgba(55, 0, 200, 0.5),
    				1.5em 0.5em 1em 1.5em rgba(25, 150, 0, 0.6),
    				1.5em -1em 1.5em 1.5em rgba(155, 200, 0, 0.5),
    				-2em 1em 1em 1.5em rgba(200, 0, 50, 0.6),
    				0 -1.5em 1em 1.5em rgba(200, 250, 0, 0.5),
    				-1em 0.5em 1em 1.5em rgba(50, 210, 250, 0.6);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}
    	}

    	/* Additional CSS for the zoom effect */
    	.boxclass {
    		transition: transform 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    		position: relative;
    		z-index: 1;
    	}

    	.zoom-effect {
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%) scale(1.3);
    		transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1), filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    		filter: blur(0);
    		z-index: 2;
    	}

    	.blurred-background {
    		filter: blur(15px);
    	}

    	.close-container {
    		position: fixed;
    		margin: auto;
    		width: 50px;
    		height: 50px;
    		margin-top: 10px;
    		cursor: pointer;

    	}

    	.leftright {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #f2e5bc;
    		border-radius: 2px;
    		transform: rotate(45deg);
    		transition: all .3s ease-in;
    	}

    	.rightleft {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #F4A259;
    		border-radius: 2px;
    		transform: rotate(-45deg);
    		transition: all .3s ease-in;
    	}

    	label {
    		color: white;
    		font-family: Helvetica, Arial, sans-serif;
    		font-size: .3em;
    		margin-left: 5px;
    		text-transform: uppercase;
    		letter-spacing: 2px;
    		transition: all .3s ease-in;
    		opacity: 0;
    	}

    	.close {
    		margin: 60px 0 0 5px;
    		position: absolute;

    	}

    	.close-container:hover .leftright {
    		transform: rotate(-45deg);
    		background-color: #F4A259;
    	}

    	.close-container:hover .rightleft {
    		transform: rotate(45deg);
    		background-color: #F25C66;
    	}

    	.close-container:hover label {
    		opacity: 1;
    	}

    	.imgclass1 {
    		--g: 4px;
    		/* the gap */
    		--b: 12px;
    		/* border thickness*/
    		--c: #fe8019;
    		/* the color */


    		padding: calc(var(--g) + var(--b));
    		--_c: #0000 0 25%, var(--c) 0 50%;
    		--_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
    		--_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
    		background:
    			var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    			var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
    		background-size: 200% var(--b), var(--b) 200%;
    		cursor: pointer;
    		filter: grayscale(50%);
    		transition: .3s;
    	}

    	.imgclass1:hover {
    		--_p: 75%;
    		filter: grayscale(0%);
    	}

    	/*particles*/

    	canvas {
    		position: absolute;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: -1;
    	}


    	/* second card*/
    	.lighter-card {
    		background-color: #32302f;
    		/* Lighter color for the inner card */
    		padding: 20px;
    		border-radius: 8px;
    		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    	}

    	.blog-post {
    		margin-bottom: 20px;
    		padding: 15px;
    		border: 1px solid #3c3836;
    		border-radius: 5px;
    	}

    	.blog-post h2 {
    		margin-top: 0;
    		font-size: 24px;
    	}

    	.blog-post p {
    		margin-bottom: 0;
    		font-size: 18px;
    	}


    	/*terminal*/
    	@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
    	@use postcss-nested;



    	h1 {
    		margin-top: 2rem;
    		text-align: center;
    	}

    	h1+p {
    		text-align: center;
    	}

    	.shelf {
    		position: relative;
    		width: 30rem;
    		height: 14rem;
    		margin: 0 auto;
    		border: 0.5rem solid #282828;
    		border-radius: 0.5rem;
    		background-color: rgba(255, 255, 255, 0.1);
    		perspective: 130rem;
    		box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.2);
    	}

    	.door {
    		position: absolute;
    		width: 14.8rem;
    		height: 14rem;
    		display: flex;
    		box-sizing: border-box;
    		padding: 1rem;
    		background-color: #282828;
    		align-items: center;
    		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    		outline: 1px solid transparent;

    		&::before {
    			width: 1.5rem;
    			height: 1.5rem;
    			border-radius: 50%;
    			background-color: rgba(0, 0, 0, 0.1);
    			content: "";
    		}

    		&.left {
    			border-radius: 0 0.75rem 0.75rem 0;
    			justify-content: flex-end;
    			animation:
    				leftDoorOpen 3.5s ease-out forwards 1s,
    				leftDoorFlap 15s linear infinite forwards 9s;
    			transform-origin: 0 0 0;
    		}

    		&.right {
    			right: 0;
    			border-radius: 0.75rem 0 0 0.75rem;
    			animation:
    				rightDoorOpen 3s ease-out forwards 1.5s,
    				rightDoorFlap 10s linear infinite forwards 8s;
    			transform-origin: 100% 0 0;
    		}
    	}

    	.book {
    		position: absolute;
    		box-sizing: border-box;
    		padding: 0.8rem 4rem 0.8rem 2rem;
    		border-radius: 0.25rem;
    		background-color: rgba(255, 255, 255, 0.1);
    		color: white;
    		font-size: 1rem;
    		text-transform: uppercase;
    		letter-spacing: 0.1rem;
    		cursor: pointer;
    		box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);

    		&.home-page {
    			transform: rotate(-90deg) translate(-12.4rem, 3rem);
    			transform-origin: 0;
    		}

    		&.about-us {
    			transform: rotate(-100deg) translate(-13.4rem, 6.1rem);
    			transform-origin: 0;
    			outline: 1px solid transparent;
    		}

    		&.contact {
    			right: 2rem;
    			bottom: 0.2rem;
    			border-radius: 0.3rem 0 0 0.3rem;
    		}

    		&.faq {
    			right: 0.8rem;
    			bottom: 3.3rem;
    			border-radius: 0.3rem 0 0 0.3rem;
    		}

    		&.not-found {
    			width: 12rem;
    			height: 3.5rem;
    			border: 1px dashed rgba(255, 255, 255, 0.3);
    			background-color: transparent;
    			transform: rotate(-90deg) translate(-12rem, 13rem) scale(1);
    			transform-origin: 0;
    			cursor: default;
    			animation: bookFadeOut 1s 3s infinite forwards;

    			&::after {
    				display: block;
    				width: 10rem;
    				padding-left: 5rem;
    				background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='30'><path fill='rgb(255, 255, 255)' d='M7.688,3.737C6.1,10.409,4.624,16.982,2.475,23.517c-0.424,1.29,0.724,2.338,1.957,1.916 c5.879-2.021,11.743-4.107,17.409-6.696c1.246-0.572,0.443-2.366-0.815-1.932c-3.856,1.333-7.695,2.69-11.565,3.959 c2.879-2.526,5.485-5.215,9.013-7.17c4.441-2.459,9.299-4.109,14.281-4.915c10.903-1.772,22.052,0.562,31.979,5.04 c9.241,4.162,12.895,8.725,13.164,4.942c0.121-1.69-5.57-4.953-14.125-8.714C53.19,5.292,41.094,3.539,29.636,6.058 c-7.122,1.567-16.708,5.374-22.064,11.544c1.359-4.455,2.461-9.028,3.032-13.563C10.852,2.091,8.12,1.927,7.688,3.737z'/></svg>");
    				background-repeat: no-repeat;
    				background-size: 4rem;
    				background-position: left center;
    				font-family: "Dancing Script";
    				text-transform: capitalize;
    				font-size: 25px;
    				content: "Click here for Sauce";

    				transform: rotate(90deg) translate(6rem, -1rem);
    				opacity: 0.3;
    			}
    		}

    		&:hover:not(.not-found) {
    			background-color: rgba(255, 255, 255, 0.2);
    		}
    	}

    	@keyframes leftDoorOpen {
    		60% {
    			transform: rotateY(-115deg)
    		}

    		100% {
    			transform: rotateY(-110deg)
    		}
    	}

    	@keyframes rightDoorOpen {
    		60% {
    			transform: rotateY(125deg)
    		}

    		100% {
    			transform: rotateY(120deg)
    		}
    	}

    	@keyframes rightDoorFlap {
    		0% {
    			transform: rotateY(120deg)
    		}

    		5% {
    			transform: rotateY(125deg)
    		}

    		15% {
    			transform: rotateY(117deg)
    		}

    		25% {
    			transform: rotateY(123deg)
    		}

    		30% {
    			transform: rotateY(120deg)
    		}

    		100% {
    			transform: rotateY(120deg)
    		}
    	}

    	@keyframes leftDoorFlap {
    		0% {
    			transform: rotateY(-110deg)
    		}

    		5% {
    			transform: rotateY(-115deg)
    		}

    		15% {
    			transform: rotateY(-107deg)
    		}

    		25% {
    			transform: rotateY(-113deg)
    		}

    		30% {
    			transform: rotateY(-110deg)
    		}

    		100% {
    			transform: rotateY(-110deg)
    		}
    	}

    	@keyframes bookFadeOut {
    		50% {
    			border: 1px dashed rgba(255, 255, 255, 0.1);
    		}
    	}

    	/*third card*/
    	@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');






    	a {
    		color: inherit;
    	}

    	.cards-wrapper {
    		display: grid;
    		justify-content: center;
    		align-items: center;
    		grid-template-columns: 1fr 1fr 1fr;
    		grid-gap: 4rem;
    		padding: 4rem;
    		margin: 0 auto;
    		width: max-content;
    	}

    	.card {
    		font-family: 'Heebo';
    		--bg-filter-opacity: 0.5;
    		background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))), var(--bg-img);
    		height: 8em;
    		width: 7em;
    		font-size: 1.5em;
    		color: #fbf1c7;
    		border-radius: 1em;
    		padding: 1em;
    		/*margin: 2em;*/
    		display: flex;
    		align-items: flex-end;
    		background-size: cover;
    		background-position: center;
    		box-shadow: 0 0 5em -1em black;
    		transition: all, var(--transition-time);
    		position: relative;
    		overflow: hidden;
    		border: 10px solid #282828;
    		text-decoration: none;
    	}

    	.card:hover {
    		transform: rotate(0);
    	}

    	.card h1 {
    		margin: 0;
    		font-size: 1.5em;
    		line-height: 1.2em;
    	}

    	.card p {
    		font-size: 0.75em;
    		font-family: 'Open Sans';
    		margin-top: 0.5em;
    		line-height: 2em;
    	}

    	.card .tags {
    		display: flex;
    	}

    	.card .tags .tag {
    		font-size: 0.75em;
    		background: rgba(255, 255, 255, 0.5);
    		border-radius: 0.3rem;
    		padding: 0 0.5em;
    		margin-right: 0.5em;
    		line-height: 1.5em;
    		transition: all, var(--transition-time);
    	}

    	#ul2id {
    		margin-left: 90px;
    	}

    	.card:hover .tags .tag {
    		background: var(--color);
    		color: white;
    	}

    	.card .date {
    		position: absolute;
    		top: 0;
    		right: 0;
    		font-size: 0.75em;
    		padding: 1em;
    		line-height: 1em;
    		opacity: .8;
    	}

    	.card:before,
    	.card:after {
    		content: '';
    		transform: scale(0);
    		transform-origin: top left;
    		border-radius: 50%;
    		position: absolute;
    		left: -50%;
    		top: -50%;
    		z-index: -5;
    		transition: all, var(--transition-time);
    		transition-timing-function: ease-in-out;
    	}

    	.card:before {
    		background: #ddd;
    		width: 250%;
    		height: 250%;
    	}

    	.card:after {
    		background: white;
    		width: 200%;
    		height: 200%;
    	}

    	.card:hover {
    		color: var(--color);
    	}

    	.card:hover:before,
    	.card:hover:after {
    		transform: scale(1);
    	}

    	.card-grid-space .num {
    		font-size: 3em;
    		margin-bottom: 1.2rem;
    		margin-left: 1rem;
    	}

    	.info {
    		font-size: 1.2em;
    		display: flex;
    		padding: 1em 3em;
    		height: 3em;
    	}

    	.info img {
    		height: 3em;
    		margin-right: 0.5em;
    	}

    	.info h1 {
    		font-size: 1em;
    		font-weight: normal;
    	}

    	/* MEDIA QUERIES */
    	@media screen and (max-width: 1285px) {
    		.cards-wrapper {
    			grid-template-columns: 1fr 1fr;
    		}
    	}

    	@media screen and (max-width: 900px) {
    		.cards-wrapper {
    			grid-template-columns: 1fr;
    		}

    		.info {
    			justify-content: center;
    		}

    		.card-grid-space .num {
    			margin-left: 0;
    			text-align: center;
    		}
    	}

    	@media screen and (max-width: 500px) {
    		.cards-wrapper {
    			padding: 4rem 2rem;
    		}

    		.card {
    			max-width: calc(100vw - 4rem);
    		}
    	}

    	@media screen and (max-width: 450px) {
    		.info {
    			display: block;
    			text-align: center;
    		}

    		.info h1 {
    			margin: 0;
    		}
    	}

    	/* #Cursor
	================================================== */

    	.cursor,
    	.cursor2,
    	.cursor3 {
    		position: fixed;
    		border-radius: 50%;
    		transform: translateX(-50%) translateY(-50%);
    		pointer-events: none;
    		left: -100px;
    		top: 50%
    	}

    	.cursor {
    		background-color: #ebdbb2;
    		height: 0;
    		width: 0;
    		z-index: 99999;
    	}

    	.cursor2,
    	.cursor3 {
    		height: 12px;
    		width: 12px;
    		z-index: 99998;
    		-webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    		transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    	}

    	.cursor2.hover,
    	.cursor3.hover {
    		-webkit-transform: scale(2) translateX(-25%) translateY(-25%);
    		transform: scale(2) translateX(-25%) translateY(-25%);
    		border: none
    	}

    	.cursor2 {
    		border: 2px solid #ebdbb2;
    		box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
    	}

    	.cursor2.hover {
    		background: rgba(255, 255, 255, .1);
    		box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
    	}

    	@media screen and (max-width: 1200px) {

    		.cursor,
    		.cursor2,
    		.cursor3 {
    			display: none
    		}
    	}

    	.shadow-title {
    		position: fixed;
    		top: 0;
    		margin-top: 30px;
    		left: 20px;
    		width: 100%;
    		height: 300%;
    		text-align: left;
    		font-family: 'Muli', sans-serif;
    		-webkit-writing-mode: vertical-lr;
    		writing-mode: vertical-lr;
    		font-size: 18vw;
    		line-height: 1;
    		color: rgba(200, 200, 200, .1);
    		background: linear-gradient(90deg, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.35));
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		font-weight: 900;
    		z-index: 1;
    	}

    	.section-parallax {
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background-position: center;
    		background-size: cover;
    		z-index: 2;
    	}

    	.section {
    		position: relative;
    		width: 100%;
    		display: block;
    	}

    	.full-height {
    		height: 100vh;
    	}

    	.section.z-bigger {
    		z-index: 100;
    	}

    	.section.z-bigger-2 {
    		z-index: 200;
    	}

    	.section-title-wrap {
    		position: absolute;
    		top: 50%;
    		left: 0;
    		width: 100%;
    		transform: translateY(-50%);
    		z-index: 3;
    	}

    	.section-title-wrap p {
    		letter-spacing: 2px;
    		font-size: 22px;
    		font-weight: 700;
    		padding: 0;
    		color: #6f598f;
    	}

    	.section-title-wrap h1 {
    		margin: 0;
    		padding: 0;
    		font-size: 5vw;
    		letter-spacing: 8px;
    		font-weight: 900;
    		color: #fff;
    		line-height: 1;
    		text-transform: uppercase;
    	}

    	.padding-top-bottom {
    		padding-top: 100px;
    		padding-bottom: 100px;
    	}

    	.over-hide {
    		overflow: hidden;
    	}

    	.background-dark {
    		background-color: #101010;
    	}

    	.project-link-wrap {
    		position: relative;
    		display: block;
    		width: 100%;
    		text-align: center;
    		margin: 0 auto;
    		cursor: pointer;
    	}

    	.project-link-wrap p {
    		font-size: 100px;
    		line-height: 80px;
    		color: #c4c3ca;
    		font-weight: 900;
    		text-align: center;
    		margin: 0 auto;
    		cursor: pointer;
    		opacity: 0.35;
    		-webkit-transition: all 200ms linear;
    		transition: all 200ms linear;
    	}

    	.project-link-wrap:hover p {
    		opacity: 0.15;
    	}
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
    	:root {
    		--red: #fb4934;
    		--yellow: #fabd2f;
    		--lime: #b8bb26;
    		--green: #b8bb26;
    		--cyan: #8ec07c;
    		--blue: #83a598;
    		--purple: #d3869b;
    		--pink: #b16286;
    		--accent: var(--blue);

    		--background: #3c3836;
    		--backdrop: #282828;
    		--foreground: #ebdbb2;
    		--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    	}


    	/*Start animations*/


    	/*End animations*/
    	.imgclass1 {
    		max-height: 80px;
    		max-width: 130px;

    	}

    	.zoom {
    		-ms-transform: scale(1.5);
    		/* IE 9 */
    		-webkit-transform: scale(1.5);
    		/* Safari 3-8 */
    		transform: scale(1.5);
    	}

    	ul {
    		display: flex;
    		position: absolute;
    		left: 27%;
    		transform: translate(-50%, -50%);
    	}

    	ul li {
    		list-style: none;
    	}

    	ul li a {
    		width: 24px;
    		height: 24px;
    		background-color: #fff;
    		text-align: center;
    		line-height: 80px;
    		font-size: 14px;
    		margin: 10px 4px;
    		display: block;
    		border-radius: 50%;
    		border-style: dot-dot-dash;
    		position: relative;
    		overflow: hidden;

    		z-index: 1;
    	}

    	ul li a .icon1 {
    		position: relative;
    		margin-top: 5px;
    		color: #fbf1c7;
    		transition: .5s;
    		z-index: 3;
    	}

    	ul li a:hover .icon {
    		color: #fff;
    		transform: rotateY(360deg);
    	}

    	ul li a:before {
    		content: "";
    		position: absolute;
    		top: 100%;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background: #f00;
    		transition: .5s;
    		z-index: 1;
    	}

    	ul li a:hover:before {
    		top: 0;
    	}

    	ul li:nth-child(1) a:before {
    		background: var(--lime);
    	}

    	ul li:nth-child(2) a:before {
    		background: var(--cyan);
    	}

    	ul li:nth-child(3) a:before {
    		background: #fe8019;
    	}

    	ul li:nth-child(4) a:before {
    		background: #dd4b39;
    	}



    	.boxclassinfinite {
    		position: absolute;
    		left: 3%;
    		right: 3%;
    		height: 82%;
    		background: var(--background);
    		min-width: 90%;
    		min-height: 82%;
    		top: 4%;
    		/* Same as boxclass */
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    		z-index: 9;
    	}

    	.boxclass3 {
    		position: absolute;
    		margin-top: 10px;
    		height: 150px;
    		margin-left: -340pt;
    		background: var(--background);
    		min-width: 850px;
    		min-height: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass3::-webkit-scrollbar {
    		display: none;
    	}

    	.project-card {
    		background-color: #1d2021;
    		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    		overflow: hidden;
    		transition: transform 0.3s ease;
    		margin-bottom: 20px;
    		border: 1px solid #3c3836;
    		border-radius: 10px;
    		position: relative;
    		z-index: 1;
    	}

    	.project-card:before {
    		content: "";
    		position: absolute;
    		top: 1px;
    		left: 1px;
    		right: 1px;
    		bottom: 1px;
    		z-index: -1;
    		border-radius: 10px;
    		border: 2.5px dashed #ffffff;
    		animation: spin 10s linear infinite;

    	}

    	.project-card:after {
    		content: "";
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		background-color: #1d2021;
    		border-radius: 10px;
    		margin: 2px;
    		z-index: -1;

    	}

    	@keyframes spin {
    		100% {
    			transform: rotateZ(180deg);
    		}
    	}

    	@keyframes rainbow-border {
    		0% {
    			background-position: 0% 50%
    		}

    		50% {
    			background-position: 100% 50%
    		}

    		/* Changed the keyframes to have a smoother transition */
    		100% {
    			background-position: 0% 50%
    		}
    	}

    	.project-card:hover:before,
    	.project-card:focus:before {
    		animation: rainbow-border 5s ease infinite;

    	}

    	.project-card:hover {
    		transform: translateY(-5px);
    	}

    	.project-image img {
    		width: 100%;
    		height: 200px;
    		object-fit: cover;
    	}

    	.project-content {
    		padding: 20px;
    	}

    	.project-content h3 {
    		margin-top: 0;
    		margin-bottom: 10px;
    		font-size: 1.5rem;
    		color: #ebdbb2;
    	}

    	.project-header {
    		opacity: 0;
    		/* Initial opacity */
    		transform: translate(-150px, -50px) rotate(-9000deg) scale(1);
    		/* Initial transform */
    		animation: revolveScaleP 1s forwards;
    		/* Apply the revolveScale animation */
    	}

    	.project-date {
    		margin-bottom: 10px;
    		font-size: 0.9rem;
    		color: #a89984;
    	}

    	.project-description {
    		margin-bottom: 20px;
    		color: #a89984;
    	}

    	.project-links {
    		display: flex;
    		justify-content: space-between;
    	}

    	.project-links .btn {
    		background-color: #458588;

    		padding: 8px 16px;
    		border-radius: 4px;
    		text-decoration: none;
    		transition: background-color 0.3s ease;
    	}

    	.project-links .btn:hover {
    		background-color: #689d6a;
    	}

    	.containers1 {
    		display: flex;
    		justify-content: space-between;
    		align-items: flex-start;
    		position: absolute;
    		left: 7%;
    		right: 7%;
    		top: 15%;
    		gap: 2%;
    		/* Space between the boxes */
    	}

    	.boxclass,
    	.boxclass1 {
    		margin-left: 90px;
    		background: var(--background);
    		max-width: 450px;
    		min-height: 250px;
    		margin-top: 50px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: margin 100ms;
    		overflow-y: hidden;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		gap: 4px;
    	}

    	.boxclass {
    		margin-left: -65px;
    		top: 1%;
    		position: absolute;
    		height: 250px;
    	}

    	.boxclass1 {
    		position: absolute;
    		top: 27px;
    		height: 250px;
    		background: var(--background);
    		min-width: 450px;
    		padding: 40px 20px 20px 30px;
    		border-radius: 8px;
    		box-shadow: var(--shadow);
    		transition: calc(100ms * 2);
    		overflow-y: auto;
    		-ms-overflow-style: none;
    		scrollbar-width: none;
    		text-align: left;
    	}

    	.boxclass1 h1 {
    		text-align: center;
    	}

    	.boxclass1::-webkit-scrollbar {
    		display: none;
    	}

    	@media screen and (max-width: 768px) {
    		#boxcontainer {
    			flex-direction: column;
    			gap: 20px;
    		}

    		.boxclass,
    		.boxclass1 {
    			max-width: 100%;
    		}
    	}


    	html {
    		color: var(--foreground);
    		background: var(--backdrop);
    		font-family: "Noto Sans", Roboto, sans-serif;
    	}

    	h1 {
    		font-weight: 600;
    	}

    	h2 {
    		margin-left: 20px;
    	}

    	a,
    	h2,
    	.accent {
    		color: var(--accent);
    	}

    	/* a {
			text-align: right;
			margin-right: 20px;
			text-decoration: none;
			font-weight: 500;
		} */

    	.anch1 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch2 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch3 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch4 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	.anch5 {
    		text-align: right;
    		margin-right: 20px;
    		text-decoration: none;
    		font-weight: 500;
    	}

    	h1 {
    		text-align: center;
    	}

    	.links p>span {
    		display: block;
    	}

    	@media (min-width: 600px) {
    		.links p {
    			display: grid;
    			grid-template-columns: 12ch calc(100% - 12ch);
    			margin: 8px 0;
    		}
    	}

    	@media (max-width: 940px) {
    		body {
    			margin-top: 0;
    		}
    	}

    	.gradient {
    		font-family: "Lucida Console", "Courier New", monospace, cursive;
    		background: linear-gradient(to right,
    				#fbf1c7,
    				var(--yellow),
    				var(--blue));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	@keyframes rainbow {

    		0%,
    		100% {
    			background-position: 0 0;
    		}

    		50% {
    			background-position: 100% 0;
    		}
    	}

    	/* dark mode */
    	@media (prefers-color-scheme:dark) {
    		:root {
    			--red: #fb4934;
    			--yellow: #fabd2f;
    			--lime: #b8bb26;
    			--green: #b8bb26;
    			--cyan: #8ec07c;
    			--blue: #83a598;
    			--purple: #d3869b;
    			--pink: #b16286;
    			--accent: var(--blue);

    			--background: #282828;
    			--backdrop: #1d2021;
    			--foreground: #ebdbb2;
    			--shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    		}
    	}

    	.about-class {
    		text-transform: capitalize;
    		margin: 20px;
    	}

    	.about-topic {


    		margin: 20px;
    	}

    	.sattire {
    		text-transform: capitalize;
    		font-family: noto sans-serif, Roboto;
    		font-size: 10px;
    		font-weight: 100;
    		margin-left: 100px;
    	}

    	.neo {
    		text-transform: capitalize;
    		font-size: 12px;
    		color: #458588;
    		font-family: sans-serif, Roboto;
    		font-weight: bold;
    		padding-bottom: -100px;
    		margin-left: 370px;
    		opacity: 0;
    	}

    	.neo:hover {
    		opacity: 1;
    	}

    	.anc {
    		font-size: 15px;
    		margin-left: 40%;
    		opacity: 0;
    	}

    	.anc:hover {
    		opacity: 1;
    		background: linear-gradient(to right,
    				var(--lime),
    				var(--cyan),
    				var(--blue),
    				var(--purple));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s ease infinite;
    		background-size: 400% 100%;
    	}

    	a {
    		background: linear-gradient(to right,
    				var(--lime),
    				var(--cyan),
    				var(--blue),
    				var(--purple));
    		-webkit-background-clip: text;

    		color: transparent;
    		animation: rainbow 5s forwards infinite;
    		background-size: 400% 100%;
    	}

    	.logo-glitchh:hover {
    		background: #ffff;
    	}

    	a:hover {
    		animation: animate 2s linear infinite;
    	}

    	.name-info {
    		font-weight: bolder;
    	}



    	.realname {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg,
    				#282828 40%,
    				#c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;

    	}

    	@keyframes textclip {
    		to {
    			background-position: 200% center;
    		}
    	}

    	.realname1 {
    		font-weight: bold;
    		text-transform: uppercase;
    		background-image: linear-gradient(-90deg,
    				#282828 10%,
    				#c98a57 30%);
    		background-size: auto auto;
    		background-clip: border-box;
    		background-size: 200% auto;
    		color: #fff;
    		text-fill-color: transparent;
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: textclip 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;

    	}

    	@keyframes textclip {
    		to {
    			background-position: 200% center;
    		}
    	}

    	/* Style for the blog post */
    	.blog-post {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		transition: transform 0.3s ease-in-out;
    	}

    	.post-title {
    		font-size: 20px;
    		margin-bottom: 8px;
    	}

    	.post-meta {
    		text-align: center;
    		font-style: italic;
    		color: #666;
    		margin-bottom: 10px;
    	}

    	.post-tags {
    		text-align: center;
    	}

    	.post-content {
    		text-align: center;
    		line-height: 1.5;
    		font-size: 14px;
    	}

    	/* Zoom effect on hover
		    .blog-post:hover {
		      transform: scale(1.05);  Adjust the scaling factor as needed
		    }*/



    	/* start of border*/


    	.txtarea {
    		font-family: Arial, sans-serif;
    		margin-bottom: 15px;
    		padding: 10px;
    		border: 5px solid #ebdbb2;
    		border-radius: 18px;
    		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    		font-size: 24px;
    		border-style: dotted;
    		padding: 2rem 1rem;
    		min-height: 3em;
    		resize: both;
    		border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23504945' /%3E%3Cstop offset='100%25' stop-color='%23504945' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
    	}


    	.container {
    		margin-left: 49%;
    		margin-top: 4%;
    		position: relative;
    		width: 24px;
    		height: 24px;
    		transition: opacity 0.5s ease, visibility 0.5s ease;
    		opacity: 1;
    	}

    	/* Original Chevron Styles */
    	.chevron {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(0.5, 0.5, 0.5);
    	}

    	.reverse-chevron-child {
    		position: absolute;
    		width: 28px;
    		height: 8px;
    		opacity: 0;
    		transform: scale3d(-0.5, -0.5, -0.5);
    	}

    	.chevron:first-child,
    	.first {
    		animation: move 3s ease-out 1s infinite;
    	}

    	.chevron:nth-child(2),
    	.second {
    		animation: move 3s ease-out 2s infinite;
    	}

    	.chevron:before,
    	.chevron:after,
    	.reverse-chevron-child:before,
    	.reverse-chevron-child:after {
    		content: ' ';
    		position: absolute;
    		top: 0;
    		height: 100%;
    		width: 51%;
    		background: #ebdbb2;
    	}

    	.chevron:before,
    	.reverse-chevron-child:before {
    		left: 0;
    		transform: skew(0deg, 30deg);
    	}

    	.chevron:after,
    	.reverse-chevron-child:after {
    		right: 0;
    		width: 50%;
    		transform: skew(0deg, -30deg);
    	}

    	/* Reverse Chevron Container */
    	.reverse-chevron {
    		position: absolute;
    		top: 20%;
    		right: 50%;
    		width: 28px;
    		height: 60px;
    		cursor: pointer;
    		z-index: 1000;
    	}

    	/* Animation Differences */
    	@keyframes move {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(30px);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(40px);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    		}
    	}

    	.reverse-chevron-child {
    		animation-name: move-reverse;
    	}

    	@keyframes move-reverse {
    		25% {
    			opacity: 1;
    		}

    		33% {
    			opacity: 1;
    			transform: translateY(-30px) scale3d(-1, -1, -1);
    		}

    		67% {
    			opacity: 1;
    			transform: translateY(-40px) scale3d(-1, -1, -1);
    		}

    		100% {
    			opacity: 0;
    			transform: translateY(-55px) scale3d(-0.5, -0.5, -0.5);
    		}
    	}

    	.text {
    		display: block;
    		margin-top: 75px;
    		margin-left: -30px;
    		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    		font-size: 12px;
    		color: #fff;
    		text-transform: uppercase;
    		white-space: nowrap;
    		opacity: .25;
    		animation: pulse 2s linear alternate infinite;
    	}

    	@keyframes pulse {
    		to {
    			opacity: 1;
    		}
    	}

    	.download-cv-btn {
    		line-height: 50px;
    		height: 50px;
    		width: 50px;
    		/* Adjust width to match the height */
    		cursor: pointer;
    		color: #fff89d;
    		/* Text color */
    		transition: all 0.5s;
    		position: relative;
    		background-color: #312c1f93;
    		/* Translucent background color */
    		border: none;
    		/* Remove borders */
    		border-radius: 50%;
    		/* Make it a circle */
    		text-align: center;
    		/* Center text */
    		font-size: 14px;
    		/* Adjust font size to fit */
    		display: flex;
    		align-items: center;
    		/* Center text vertically */
    		justify-content: center;
    		/* Center text horizontally */
    	}

    	.download-cv-btn::before {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		background-color: rgba(255, 255, 255, 0.1);
    		/* Match background color */
    		transition: all 0.3s;
    		border-radius: 50%;
    		/* Make the before element a circle */
    	}

    	.download-cv-btn:hover::before {
    		opacity: 0;
    		transform: scale(0.5, 0.5);
    	}

    	.download-cv-btn::after {
    		content: '';
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    		opacity: 0;
    		transition: all 0.3s;
    		border: 1px solid rgba(255, 215, 129, 0.842);
    		/* Match border color */
    		transform: scale(1.2, 1.2);
    		border-radius: 50%;
    		/* Make the after element a circle */
    	}

    	.download-cv-btn:hover::after {
    		opacity: 1;
    		transform: scale(1, 1);
    	}

    	.post-title span {
    		color: #c98a57;
    		/* Color for the text */
    		opacity: 0;
    		/* Initial opacity */
    		transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    		/* Initial transform */
    		animation: revolveScale 0.4s forwards;
    		/* Apply the revolveScale animation */
    	}

    	/* Keyframes for Animation One */
    	@keyframes revolveScale {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(.3);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    		}
    	}

    	@keyframes revolveScaleP {
    		60% {
    			transform: translate(20px, 20px) rotate(30deg) scale(0.3);
    			filter: blur(10px);
    		}

    		100% {
    			transform: translate(0) rotate(0) scale(1);
    			opacity: 1;
    			filter: blur(0);
    		}
    	}

    	@keyframes closeAnimation {
    		0% {
    			opacity: 1;
    			transform: scale(1);
    		}

    		100% {
    			opacity: 0;
    			transform: scale(0.5);
    		}
    	}

    	.boxclassinfinite.hide-animation {
    		animation: closeAnimation 0.3s forwards;
    	}

    	#boxcontainer {
    		display: flex;



    		justify-content: space-between;
    		align-items: flex-start;
    		margin: 0 auto;
    		max-width: 1000px;
    		padding: 20px;
    		box-sizing: border-box;
    		justify-content: center;
    		align-items: center;


    	}

    	.button-2 {
    		background-color: #282828;
    		border-radius: 15px;
    		border-width: 0;
    		color: #fff9a7;
    		cursor: pointer;
    		display: inline-block;
    		font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    		font-size: 14px;
    		font-weight: 500;
    		line-height: 20px;
    		list-style: none;
    		margin-bottom: 6px;
    		padding: 5px 10px;
    		text-align: center;
    		transition: all 200ms;
    		vertical-align: baseline;
    		white-space: nowrap;
    		user-select: none;
    		-webkit-user-select: none;
    		touch-action: manipulation;
    		animation: mix 5s cubic-bezier(0.23, 1, 0.320, 1) infinite;

    		&::after {
    			background: transparent !important;
    		}
    	}

    	.button-2:hover {
    		background-color: rgba(0, 0, 0, 0);
    		color: #ffffc4;
    		transform: translateY(-2px);
    		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    		animation-play-state: paused;
    	}

    	@keyframes mix {
    		30% {
    			box-shadow: 0 -0.5em 1em 1.5em rgba(255, 0, 200, 0.5),
    				2em -0.5em 1em 1.5em rgba(255, 50, 0, 0.8),
    				-2em 1em 1.5em 1em rgba(155, 200, 0, 0.5),
    				-2em -1em 1em 1em rgba(200, 0, 150, 0.6),
    				0 1.5em 1em 1em rgba(20, 250, 0, 0.5),
    				1em 0.5em 1em 1em rgba(50, 10, 250, 0.5);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}

    		60% {
    			box-shadow: 1em 0.5em 1em 1.5em rgba(55, 0, 200, 0.5),
    				1.5em 0.5em 1em 1.5em rgba(25, 150, 0, 0.6),
    				1.5em -1em 1.5em 1.5em rgba(155, 200, 0, 0.5),
    				-2em 1em 1em 1.5em rgba(200, 0, 50, 0.6),
    				0 -1.5em 1em 1.5em rgba(200, 250, 0, 0.5),
    				-1em 0.5em 1em 1.5em rgba(50, 210, 250, 0.6);
    			filter: grayscale(0.3) contrast(1.2) brightness(0.9) saturate(0.8) sepia(0.1) hue-rotate(10deg);
    		}
    	}

    	/* Additional CSS for the zoom effect */
    	.boxclass {
    		transition: transform 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    		position: relative;
    		z-index: 1;
    	}

    	.zoom-effect {
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%) scale(1.3);
    		transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1), filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    		filter: blur(0);
    		z-index: 2;
    	}

    	.blurred-background {
    		filter: blur(15px);
    	}

    	.close-container {
    		position: fixed;
    		margin: auto;
    		width: 50px;
    		height: 50px;
    		margin-top: 10px;
    		cursor: pointer;

    	}

    	.leftright {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #f2e5bc;
    		border-radius: 2px;
    		transform: rotate(45deg);
    		transition: all .3s ease-in;
    	}

    	.rightleft {
    		height: 4px;
    		width: 40px;
    		position: absolute;
    		margin-top: 24px;
    		background-color: #F4A259;
    		border-radius: 2px;
    		transform: rotate(-45deg);
    		transition: all .3s ease-in;
    	}

    	label {
    		color: white;
    		font-family: Helvetica, Arial, sans-serif;
    		font-size: .3em;
    		margin-left: 5px;
    		text-transform: uppercase;
    		letter-spacing: 2px;
    		transition: all .3s ease-in;
    		opacity: 0;
    	}

    	.close {
    		margin: 60px 0 0 5px;
    		position: absolute;

    	}

    	.close-container:hover .leftright {
    		transform: rotate(-45deg);
    		background-color: #F4A259;
    	}

    	.close-container:hover .rightleft {
    		transform: rotate(45deg);
    		background-color: #F25C66;
    	}

    	.close-container:hover label {
    		opacity: 1;
    	}

    	.imgclass1 {
    		--g: 4px;
    		/* the gap */
    		--b: 12px;
    		/* border thickness*/
    		--c: #fe8019;
    		/* the color */


    		padding: calc(var(--g) + var(--b));
    		--_c: #0000 0 25%, var(--c) 0 50%;
    		--_g1: repeating-linear-gradient(90deg, var(--_c)) repeat-x;
    		--_g2: repeating-linear-gradient(180deg, var(--_c)) repeat-y;
    		background:
    			var(--_g1) var(--_p, 25%) 0, var(--_g2) 0 var(--_p, 125%),
    			var(--_g1) var(--_p, 125%) 100%, var(--_g2) 100% var(--_p, 25%);
    		background-size: 200% var(--b), var(--b) 200%;
    		cursor: pointer;
    		filter: grayscale(50%);
    		transition: .3s;
    	}

    	.imgclass1:hover {
    		--_p: 75%;
    		filter: grayscale(0%);
    	}

    	/*particles*/

    	canvas {
    		position: absolute;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: -1;
    	}


    	/* second card*/
    	.lighter-card {
    		background-color: #32302f;
    		/* Lighter color for the inner card */
    		padding: 20px;
    		border-radius: 8px;
    		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    	}

    	.blog-post {
    		margin-bottom: 20px;
    		padding: 15px;
    		border: 1px solid #3c3836;
    		border-radius: 5px;
    	}

    	.blog-post h2 {
    		margin-top: 0;
    		font-size: 24px;
    	}

    	.blog-post p {
    		margin-bottom: 0;
    		font-size: 18px;
    	}


    	/*terminal*/
    	@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
    	@use postcss-nested;



    	h1 {
    		margin-top: 2rem;
    		text-align: center;
    	}

    	h1+p {
    		text-align: center;
    	}

    	.shelf {
    		position: relative;
    		width: 30rem;
    		height: 14rem;
    		margin: 0 auto;
    		border: 0.5rem solid #282828;
    		border-radius: 0.5rem;
    		background-color: rgba(255, 255, 255, 0.1);
    		perspective: 130rem;
    		box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.2);
    	}

    	.door {
    		position: absolute;
    		width: 14.8rem;
    		height: 14rem;
    		display: flex;
    		box-sizing: border-box;
    		padding: 1rem;
    		background-color: #282828;
    		align-items: center;
    		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    		outline: 1px solid transparent;

    		&::before {
    			width: 1.5rem;
    			height: 1.5rem;
    			border-radius: 50%;
    			background-color: rgba(0, 0, 0, 0.1);
    			content: "";
    		}

    		&.left {
    			border-radius: 0 0.75rem 0.75rem 0;
    			justify-content: flex-end;
    			animation:
    				leftDoorOpen 3.5s ease-out forwards 1s,
    				leftDoorFlap 15s linear infinite forwards 9s;
    			transform-origin: 0 0 0;
    		}

    		&.right {
    			right: 0;
    			border-radius: 0.75rem 0 0 0.75rem;
    			animation:
    				rightDoorOpen 3s ease-out forwards 1.5s,
    				rightDoorFlap 10s linear infinite forwards 8s;
    			transform-origin: 100% 0 0;
    		}
    	}

    	.book {
    		position: absolute;
    		box-sizing: border-box;
    		padding: 0.8rem 4rem 0.8rem 2rem;
    		border-radius: 0.25rem;
    		background-color: rgba(255, 255, 255, 0.1);
    		color: white;
    		font-size: 1rem;
    		text-transform: uppercase;
    		letter-spacing: 0.1rem;
    		cursor: pointer;
    		box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);

    		&.home-page {
    			transform: rotate(-90deg) translate(-12.4rem, 3rem);
    			transform-origin: 0;
    		}

    		&.about-us {
    			transform: rotate(-100deg) translate(-13.4rem, 6.1rem);
    			transform-origin: 0;
    			outline: 1px solid transparent;
    		}

    		&.contact {
    			right: 2rem;
    			bottom: 0.2rem;
    			border-radius: 0.3rem 0 0 0.3rem;
    		}

    		&.faq {
    			right: 0.8rem;
    			bottom: 3.3rem;
    			border-radius: 0.3rem 0 0 0.3rem;
    		}

    		&.not-found {
    			width: 12rem;
    			height: 3.5rem;
    			border: 1px dashed rgba(255, 255, 255, 0.3);
    			background-color: transparent;
    			transform: rotate(-90deg) translate(-12rem, 13rem) scale(1);
    			transform-origin: 0;
    			cursor: default;
    			animation: bookFadeOut 1s 3s infinite forwards;

    			&::after {
    				display: block;
    				width: 10rem;
    				padding-left: 5rem;
    				background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='30'><path fill='rgb(255, 255, 255)' d='M7.688,3.737C6.1,10.409,4.624,16.982,2.475,23.517c-0.424,1.29,0.724,2.338,1.957,1.916 c5.879-2.021,11.743-4.107,17.409-6.696c1.246-0.572,0.443-2.366-0.815-1.932c-3.856,1.333-7.695,2.69-11.565,3.959 c2.879-2.526,5.485-5.215,9.013-7.17c4.441-2.459,9.299-4.109,14.281-4.915c10.903-1.772,22.052,0.562,31.979,5.04 c9.241,4.162,12.895,8.725,13.164,4.942c0.121-1.69-5.57-4.953-14.125-8.714C53.19,5.292,41.094,3.539,29.636,6.058 c-7.122,1.567-16.708,5.374-22.064,11.544c1.359-4.455,2.461-9.028,3.032-13.563C10.852,2.091,8.12,1.927,7.688,3.737z'/></svg>");
    				background-repeat: no-repeat;
    				background-size: 4rem;
    				background-position: left center;
    				font-family: "Dancing Script";
    				text-transform: capitalize;
    				font-size: 25px;
    				content: "Click here for Sauce";

    				transform: rotate(90deg) translate(6rem, -1rem);
    				opacity: 0.3;
    			}
    		}

    		&:hover:not(.not-found) {
    			background-color: rgba(255, 255, 255, 0.2);
    		}
    	}

    	@keyframes leftDoorOpen {
    		60% {
    			transform: rotateY(-115deg)
    		}

    		100% {
    			transform: rotateY(-110deg)
    		}
    	}

    	@keyframes rightDoorOpen {
    		60% {
    			transform: rotateY(125deg)
    		}

    		100% {
    			transform: rotateY(120deg)
    		}
    	}

    	@keyframes rightDoorFlap {
    		0% {
    			transform: rotateY(120deg)
    		}

    		5% {
    			transform: rotateY(125deg)
    		}

    		15% {
    			transform: rotateY(117deg)
    		}

    		25% {
    			transform: rotateY(123deg)
    		}

    		30% {
    			transform: rotateY(120deg)
    		}

    		100% {
    			transform: rotateY(120deg)
    		}
    	}

    	@keyframes leftDoorFlap {
    		0% {
    			transform: rotateY(-110deg)
    		}

    		5% {
    			transform: rotateY(-115deg)
    		}

    		15% {
    			transform: rotateY(-107deg)
    		}

    		25% {
    			transform: rotateY(-113deg)
    		}

    		30% {
    			transform: rotateY(-110deg)
    		}

    		100% {
    			transform: rotateY(-110deg)
    		}
    	}

    	@keyframes bookFadeOut {
    		50% {
    			border: 1px dashed rgba(255, 255, 255, 0.1);
    		}
    	}

    	/*third card*/
    	@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');






    	a {
    		color: inherit;
    	}

    	.cards-wrapper {
    		display: grid;
    		justify-content: center;
    		align-items: center;
    		grid-template-columns: 1fr 1fr 1fr;
    		grid-gap: 4rem;
    		padding: 4rem;
    		margin: 0 auto;
    		width: max-content;
    	}

    	.card {
    		font-family: 'Heebo';
    		--bg-filter-opacity: 0.5;
    		background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))), var(--bg-img);
    		height: 8em;
    		width: 7em;
    		font-size: 1.5em;
    		color: #fbf1c7;
    		border-radius: 1em;
    		padding: 1em;
    		/*margin: 2em;*/
    		display: flex;
    		align-items: flex-end;
    		background-size: cover;
    		background-position: center;
    		box-shadow: 0 0 5em -1em black;
    		transition: all, var(--transition-time);
    		position: relative;
    		overflow: hidden;
    		border: 10px solid #282828;
    		text-decoration: none;
    	}

    	.card:hover {
    		transform: rotate(0);
    	}

    	.card h1 {
    		margin: 0;
    		font-size: 1.5em;
    		line-height: 1.2em;
    	}

    	.card p {
    		font-size: 0.75em;
    		font-family: 'Open Sans';
    		margin-top: 0.5em;
    		line-height: 2em;
    	}

    	.card .tags {
    		display: flex;
    	}

    	.card .tags .tag {
    		font-size: 0.75em;
    		background: rgba(255, 255, 255, 0.5);
    		border-radius: 0.3rem;
    		padding: 0 0.5em;
    		margin-right: 0.5em;
    		line-height: 1.5em;
    		transition: all, var(--transition-time);
    	}

    	#ul2id {
    		margin-left: 90px;
    	}

    	.card:hover .tags .tag {
    		background: var(--color);
    		color: white;
    	}

    	.card .date {
    		position: absolute;
    		top: 0;
    		right: 0;
    		font-size: 0.75em;
    		padding: 1em;
    		line-height: 1em;
    		opacity: .8;
    	}

    	.card:before,
    	.card:after {
    		content: '';
    		transform: scale(0);
    		transform-origin: top left;
    		border-radius: 50%;
    		position: absolute;
    		left: -50%;
    		top: -50%;
    		z-index: -5;
    		transition: all, var(--transition-time);
    		transition-timing-function: ease-in-out;
    	}

    	.card:before {
    		background: #ddd;
    		width: 250%;
    		height: 250%;
    	}

    	.card:after {
    		background: white;
    		width: 200%;
    		height: 200%;
    	}

    	.card:hover {
    		color: var(--color);
    	}

    	.card:hover:before,
    	.card:hover:after {
    		transform: scale(1);
    	}

    	.card-grid-space .num {
    		font-size: 3em;
    		margin-bottom: 1.2rem;
    		margin-left: 1rem;
    	}

    	.info {
    		font-size: 1.2em;
    		display: flex;
    		padding: 1em 3em;
    		height: 3em;
    	}

    	.info img {
    		height: 3em;
    		margin-right: 0.5em;
    	}

    	.info h1 {
    		font-size: 1em;
    		font-weight: normal;
    	}

    	/* MEDIA QUERIES */
    	@media screen and (max-width: 1285px) {
    		.cards-wrapper {
    			grid-template-columns: 1fr 1fr;
    		}
    	}

    	@media screen and (max-width: 900px) {
    		.cards-wrapper {
    			grid-template-columns: 1fr;
    		}

    		.info {
    			justify-content: center;
    		}

    		.card-grid-space .num {
    			margin-left: 0;
    			text-align: center;
    		}
    	}

    	@media screen and (max-width: 500px) {
    		.cards-wrapper {
    			padding: 4rem 2rem;
    		}

    		.card {
    			max-width: calc(100vw - 4rem);
    		}
    	}

    	@media screen and (max-width: 450px) {
    		.info {
    			display: block;
    			text-align: center;
    		}

    		.info h1 {
    			margin: 0;
    		}
    	}

    	/* #Cursor
		================================================== */

    	.cursor,
    	.cursor2,
    	.cursor3 {
    		position: fixed;
    		border-radius: 50%;
    		transform: translateX(-50%) translateY(-50%);
    		pointer-events: none;
    		left: -100px;
    		top: 50%
    	}

    	.cursor {
    		background-color: #ebdbb2;
    		height: 0;
    		width: 0;
    		z-index: 99999;
    	}

    	.cursor2,
    	.cursor3 {
    		height: 12px;
    		width: 12px;
    		z-index: 99998;
    		-webkit-transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    		transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    	}

    	.cursor2.hover,
    	.cursor3.hover {
    		-webkit-transform: scale(2) translateX(-25%) translateY(-25%);
    		transform: scale(2) translateX(-25%) translateY(-25%);
    		border: none
    	}

    	.cursor2 {
    		border: 2px solid #ebdbb2;
    		box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
    	}

    	.cursor2.hover {
    		background: rgba(255, 255, 255, .1);
    		box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
    	}

    	@media screen and (max-width: 1200px) {

    		.cursor,
    		.cursor2,
    		.cursor3 {
    			display: none
    		}
    	}

    	.shadow-title {
    		position: fixed;
    		top: 0;
    		margin-top: 30px;
    		left: 20px;
    		width: 100%;
    		height: 300%;
    		text-align: left;
    		font-family: 'Muli', sans-serif;
    		-webkit-writing-mode: vertical-lr;
    		writing-mode: vertical-lr;
    		font-size: 18vw;
    		line-height: 1;
    		color: rgba(200, 200, 200, .1);
    		background: linear-gradient(90deg, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.35));
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		font-weight: 900;
    		z-index: 1;
    	}

    	.section-parallax {
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background-position: center;
    		background-size: cover;
    		z-index: 2;
    	}

    	.section {
    		position: relative;
    		width: 100%;
    		display: block;
    	}

    	.full-height {
    		height: 100vh;
    	}

    	.section.z-bigger {
    		z-index: 100;
    	}

    	.section.z-bigger-2 {
    		z-index: 200;
    	}

    	.section-title-wrap {
    		position: absolute;
    		top: 50%;
    		left: 0;
    		width: 100%;
    		transform: translateY(-50%);
    		z-index: 3;
    	}

    	.section-title-wrap p {
    		letter-spacing: 2px;
    		font-size: 22px;
    		font-weight: 700;
    		padding: 0;
    		color: #6f598f;
    	}

    	.section-title-wrap h1 {
    		margin: 0;
    		padding: 0;
    		font-size: 5vw;
    		letter-spacing: 8px;
    		font-weight: 900;
    		color: #fff;
    		line-height: 1;
    		text-transform: uppercase;
    	}

    	.padding-top-bottom {
    		padding-top: 100px;
    		padding-bottom: 100px;
    	}

    	.over-hide {
    		overflow: hidden;
    	}

    	.background-dark {
    		background-color: #101010;
    	}

    	.project-link-wrap {
    		position: relative;
    		display: block;
    		width: 100%;
    		text-align: center;
    		margin: 0 auto;
    		cursor: pointer;
    	}

    	.project-link-wrap p {
    		font-size: 100px;
    		line-height: 80px;
    		color: #c4c3ca;
    		font-weight: 900;
    		text-align: center;
    		margin: 0 auto;
    		cursor: pointer;
    		opacity: 0.35;
    		-webkit-transition: all 200ms linear;
    		transition: all 200ms linear;
    	}

    	.project-link-wrap:hover p {
    		opacity: 0.15;
    	}
    }