@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
:root{
	--percentage: 30%;
	--main-color: 255,255,255;
	--el-bg-color: 220,220,220;
  }
h1,
h2,
input {
	font-weight: inherit
}

body,
input {
	overflow: hidden;
	line-height: inherit;
	margin: 0
}

a,
input {
	color: inherit
}

.m-0,
body,
h1,
h2,
input,
p {
	overflow: hidden;
	margin: 0
}

.line-clamp-2,
.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden
}
#html, body {
	overflow: hidden;
}
.line-clamp-2,
.line-clamp-3,
.overflow-hidden {
	overflow: hidden
}

.bg-gray-500,
.bg-green-500,
.bg-red-500,
.bg-slate-50,
.bg-yellow-500 {
	--tw-bg-opacity: 1
}

.text-black,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
	--tw-text-opacity: 1
}

@font-face {
	font-family: InterFallback;
	src: local("Arial");
	ascent-override: 90.20%;
	descent-override: 22.48%;
	line-gap-override: 0.00%;
	size-adjust: 107.40%
}

.__className_e66fe9 {
	font-family: Inter, InterFallback;
	font-style: normal
}

.__variable_bd9c35 {
	--font-mono: "__JetBrains_Mono_bd9c35", "__JetBrains_Mono_Fallback_bd9c35"
}

i {
	font-size: 24px
}
.container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #1A1A1A36;
    border-radius: 20px;
    min-height: 15rem;
    padding: 35px 15px;
    width: 100%;
    max-width: 650px;
    text-align: center;
    z-index: 1;
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;  
    perspective: 1500px; 
    overflow: hidden; 
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
}


.container .banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    transition: transform 0.3s ease;
}
  
  .container .avatar {
	  margin-top: 50px;
	  z-index: 1;
	  border-radius: 50%;
	  height: 118px;
	  width: 118px;
	  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  transform-style: preserve-3d;
	  box-shadow: 
		  0 5px 15px rgba(0,0,0,0.2),
		  0 0 0 2px rgba(255,255,255,0.1);
  }
  
  .container .avatar:hover {
	  transform: 
		  scale(1.1) 
		  rotateX(10deg) 
		  rotateY(10deg) 
		  translateZ(20px);
	  box-shadow: 
		  0 15px 30px rgba(0,0,0,0.3),
		  0 0 0 4px rgba(255,255,255,0.2);
	  cursor: pointer;
  }
.container .profileLayout {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 7px;
    max-width: 27rem;
    text-align: center;
}

.avatar {
	position: absolute;
	right: 20px;
	top: 20px;
	height: 100px !important; 
	width: 100px !important;
	border-radius: 50%;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-style: preserve-3d;
	z-index: 10;
	box-shadow: 
	  0 5px 15px rgba(0,0,0,0.2),
	  0 0 0 2px rgba(255,255,255,0.1);
	cursor: pointer;
  }
  
  @media (max-width: 768px) {
	.avatar {
		height: 100px !important;  
		width: 100px !important; 
	  right: 15px;
	  top: 15px;
	}
  }
.avatar::after {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  z-index: 1000;
}

.avatar:hover {
	transform: scale(1.3) translateZ(20px);
  box-shadow: 
    0 8px 25px rgba(0,0,0,0.3),
    0 0 0 4px rgba(255,255,255,0.2);
}

.avatar:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


html, body {
	overflow: hidden;
    counter-reset: katexEqnNo mmlEqnNo;
    color: #fff;
	background: linear-gradient(135deg, #1e3a8a, #6b21a8, #831843);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.typing-demo {
	overflow: hidden;
	white-space: nowrap;
	border-right: 3px solid;
	min-width: 20ch;
	width: 0;
	animation: typing 1.5s steps(30, end) forwards, blinking 1s infinite;
  }
  
  @keyframes typing {
	from { width: 0 }
	to { width: 60ch }
  }
  
  @keyframes blinking {
	0% {border-color: transparent}
	50% {border-color: black}
	100% {border-color: transparent}
  }
#background-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	object-fit: cover;
  }
*,
:after,
:before {
	box-sizing: border-box;
	border: 0 solid #e5e7eb;
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

:after,
:before {
	--tw-content: ""
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal;
	font-variation-settings: normal
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

h1,
h2 {
	font-size: inherit
}

a {
	text-decoration: inherit
}

h1 span {
    color: #ffffff;
    position: relative;
}
h1 span::before {
    content: "";
    height: 30px;
    width: 2px;
    position: absolute;
    top: 50%;
    right: -8px;
    background: #ffffff;
    transform: translateY(-45%);
    animation: blink 0.7s infinite;
}
h1 span.stop-blinking::before {
    animation: none;
}
@keyframes blink {
    50% { opacity: 0 }
}
input {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	padding: 0
}

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

input::-moz-placeholder {
	opacity: 1;
	color: #9ca3af
}

:disabled {
	cursor: default
}

img {
	display: block;
	max-width: 100%
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

.mx-auto {
	margin-left: auto;
	margin-right: auto
}

.ml-2 {
	margin-left: .5rem
}

.ml-auto {
	margin-left: auto
}

.line-clamp-2 {
	line-clamp: 2;
	-webkit-line-clamp: 2
}

.line-clamp-3 {
	line-clamp: 3;
	-webkit-line-clamp: 3
}

.flex {
	display: flex
}

.grid {
	display: grid
}

.h-3 {
	height: .75rem
}

.h-\[10px\] {
	height: 10px
}

.h-\[1px\] {
	height: 1px
}

.h-\[50px\] {
	height: 50px
}

.h-full {
	height: 100%
}

.min-h-screen {
	min-height: 100vh
}

.w-3 {
	width: .75rem
}

.w-\[10px\] {
	width: 10px
}

.w-\[50px\] {
	width: 50px
}

.w-full {
	width: 100%
}

.max-w-\[600px\] {
	max-width: 600px
}

.max-w-full {
	max-width: 100%
}

.shrink-0 {
	flex-shrink: 0
}

.grow {
	flex-grow: 1
}

.scroll-pt-\[65px\] {
	scroll-padding-top: 65px
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

.flex-row {
	flex-direction: row
}

.flex-col {
	flex-direction: column
}

.flex-wrap {
	flex-wrap: wrap
}

.items-start {
	align-items: flex-start
}

.items-end {
	align-items: flex-end
}

.items-center {
	align-items: center
}

.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}

.gap-1 {
	gap: .25rem
}

.gap-2 {
	gap: .5rem
}

.gap-5 {
	gap: 1.25rem
}

.gap-x-1 {
	-moz-column-gap: .15rem;
	column-gap: .15rem
}

.gap-x-2 {
	-moz-column-gap: .5rem;
	column-gap: .5rem
}

.gap-x-3 {
	-moz-column-gap: .75rem;
	column-gap: .75rem
}

.gap-y-1 {
	row-gap: .25rem
}

.gap-y-2 {
	row-gap: .5rem
}

.gap-y-3 {
	row-gap: .75rem
}

.gap-y-5 {
	row-gap: 1.25rem
}

.space-y-10>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
}

.self-start {
	align-self: flex-start
}

.self-end {
	align-self: flex-end
}

.overflow-y-auto {
	overflow-y: auto
}

.whitespace-nowrap {
	white-space: nowrap
}

.rounded-full {
	border-radius: 9999px
}

.rounded-lg {
	border-radius: .5rem
}

.rounded-xl {
	border-radius: .75rem
}

#activityText {
	width: 175px
}

.bg-black\/10 {
	background-color: rgba(0, 0, 0, .1)
}

.bg-gray-200\/60 {
	background-color: rgba(229, 231, 235, .6)
}

.bg-gray-300\/60 {
	background-color: rgba(209, 213, 219, .6)
}

.bg-slate-50 {
	background-color: rgb(248 250 252/var(--tw-bg-opacity))
}

.bg-cover {
	background-size: cover
}

.bg-fixed {
	background-attachment: fixed
}

.bg-center {
	background-position: 50%
}

.bg-green-500 {
	background-color: rgb(34 197 94/var(--tw-bg-opacity))
}

.bg-yellow-500 {
	background-color: rgb(234 179 8/var(--tw-bg-opacity))
}

.bg-red-500 {
	background-color: rgb(239 68 68/var(--tw-bg-opacity))
}

.bg-gray-500 {
	background-color: rgb(107 114 128/var(--tw-bg-opacity))
}

.p-2 {
	padding: .5rem
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}

.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}

.py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}

.text-xs {
	font-size: .75rem;
	line-height: 1rem
}

.font-bold {
	font-weight: 700
}

.font-medium {
	font-weight: 500
}

.font-semibold {
	font-weight: 600
}

.text-black {
	color: rgb(0 0 0/var(--tw-text-opacity))
}

.text-gray-500 {
	color: rgb(107 114 128/var(--tw-text-opacity))
}

.text-gray-600 {
	color: rgb(75 85 99/var(--tw-text-opacity))
}

.text-gray-700 {
	color: rgb(55 65 81/var(--tw-text-opacity))
}

.marker\:text-black\/70 ::marker {
	color: rgba(0, 0, 0, .7)
}

.marker\:text-black\/70::marker {
	color: rgba(0, 0, 0, .7)
}
.animated-highlight {
  position: relative;
  display: inline-block;
}

.animated-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: rgb(255, 255, 255);
  transition: transform 0.6s ease;
  transform: scaleX(0);
  transform-origin: left;
}

.animated-highlight:hover::after {
  transform: scaleX(1);
}
@media (prefers-color-scheme:dark) {
	html {
		color-scheme: dark
	}

	.dark\:bg-white\/10 {
		background-color: #0c0d0d;
		border: 1px solid #232424
	}

	.dark\:bg-white\/20 {
		background-color: hsla(0, 0%, 100%, .2)
	}

	.dark\:bg-zinc-950 {
		--tw-bg-opacity: 1;
		background-color: rgb(9 9 11/var(--tw-bg-opacity))
	}

	.dark\:text-gray-400 {
		--tw-text-opacity: 1;
		color: rgb(156 163 175/var(--tw-text-opacity))
	}

	.dark\:text-white {
		--tw-text-opacity: 1;
		color: rgb(255 255 255/var(--tw-text-opacity))
	}

	.dark\:text-white\/50 {
		color: hsla(0, 0%, 100%, .5)
	}

	.dark\:text-white\/60,
	.statusTextBold {
		color: hsla(0, 0%, 100%, .6)
	}

	.dark\:text-white\/80 {
		color: hsla(0, 0%, 100%, .8)
	}

	.dark\:marker\:text-white\/50 ::marker {
		color: hsla(0, 0%, 100%, .5)
	}

	.dark\:marker\:text-white\/50::marker {
		color: hsla(0, 0%, 100%, .5)
	}
}

@media (min-width:768px) {
	.md\:block {
		display: block
	}

	.md\:h-\[50px\] {
		height: 50px
	}

	.md\:min-h-\[100px\] {
		min-height: 100px
	}

	.md\:w-\[50px\] {
		width: 50px
	}

	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.md\:space-y-10>:not([hidden])~:not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
	}

	.md\:p-4 {
		padding: 1rem
	}

	.md\:px-0 {
		padding-left: 0;
		padding-right: 0
	}
}

@media (min-width:1024px) {
	.lg\:h-\[50px\] {
		height: 50px
	}

	.lg\:w-\[50px\] {
		width: 50px
	}
}

.spotify-track-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: small;
	margin-top: 15px
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: #333;
	outline: 0;
	opacity: .7;
	-webkit-transition: .2s;
	transition: opacity .2s
}

.large-image,
.small-image {
	height: auto;
	max-width: none;
	max-height: none
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none
}

.slider::-moz-range-thumb {
	height: 0;
	width: 0;
	background: 0 0
}

.slider::-moz-range-track {
	background: #333
}

.slider::-ms-track {
	background: #333
}

.time-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 5px
}

.hide {
	visibility: hidden
}

.hard-hide {
	display: none
}

.top {
	padding: 35px 0
}

@media (max-width:768px) {
	.parent {
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 25px;
		margin-bottom: 0;
		align-items: flex-start
	}

	.spotifyCard {
		width: 20vh;
		margin-bottom: 10px;
		padding: 1rem
	}

	.hide {
		display: none
	}

	.top {
		margin-top: 50px;
		margin-bottom: 50px;
		padding: 0
	}

	#activityText {
		width: auto
	}
}

.statusImages {
	position: relative;
	display: inline-block
}

.gb,
.small-image {
	position: absolute
}

.large-image {
	width: 50px;
	border-radius: 4px
}

.small-image {
	bottom: -5px;
	right: -5px;
	width: 25px;
	border-radius: 50%;
	border: 2px solid #222224;
	background-color: #222224
}

@keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .fade-in {
	animation: fadeIn 1s ease-out forwards;
	opacity: 0; 
  }
  
  .about-me-section {
	animation: fadeIn 1s ease-out forwards;
	opacity: 0;
  }
  #loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #0044ff, #a12eff, #ff0066);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: opacity 0.5s ease-out;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid rgba(255, 255, 255, 0.1);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}
  .snayzcard {
	width: 900px; 
	height: 700px;
	max-width: 100%;
	backdrop-filter: blur(90px);
	background-color: rgba(255, 255, 255, 0.1);
	padding: 30px; 
	border-radius: 20px;
	perspective: 1000px;
	transform-style: preserve-3d;
	transition: all 0.3s ease;
	transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  #main-content {
	transition: opacity 0.5s ease-out;
	opacity: 0;
  }
  #body, body {
	overflow: hidden;
  }
 
  .snayzcard:hover {
	transition: none; 
  }
  
 

.gb {
	background: conic-gradient(from 180deg at 50% 50%, #005f99 0, #006bb3 12%, #3383cc 25%, #66a3e0 37%, #99c3f5 50%, #c6d9ff 62%, #e2f0ff 75%, #b3d7ff 87%, #80b3ff 100%);
	border-radius: 50%;
	font-size: 250px;
	height: 1em;
	width: 1em;
	filter: blur(114px);
	right: 50px;
	top: 125px;
	opacity: .2;
	z-index: -1
}
#sound-slider__container{
	display: flex;
	width: 300px;
	height: 20px;
	padding: 20px 40px;
	background: rgba(var(--main-color),0.07);
	border: 1px solid rgba(var(--main-color),0.03);
	border-radius: 1in;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
  }
  
  #sound-slider__container::after{
	content:"";
	height: 100%;
	opacity: 0;
	left: 0px;
	position: absolute;
	top: 0px;
	transition: opacity 500ms;
	width: 100%;
	background: radial-gradient(
	  500px circle at var(--mouse-x) var(--mouse-y), 
	  rgba(var(--main-color), 0.06),
	  transparent 40%
	);
	z-index:-1;
  }
  
  #sound-slider__container:hover::after{
	opacity:1;
  }
  
  #sound-picto{
	fill: rgb(var(--el-bg-color));
	margin-right: 1em;
	cursor: pointer;
  }
  
  #sound-slider {
	margin: 0 10px;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 1in;
	outline: none;
	transition: .2s;
	cursor: pointer;
	background: rgba(var(--el-bg-color),0.5);
	background-image: linear-gradient(rgb(var(--main-color)),rgb(var(--main-color)));
	background-size: calc(var(--percentage) - 9px) 100%;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
  }
  
  #sound-slider::after{
	position: absolute;
	content: "";
	height: 100%;
	width: 10px;
	border-radius: 0 1in 1in 0;
	background-color:rgb(var(--main-color));
	transition: .2s;
	left: calc(var(--percentage) - 10px);
  }
  
  #sound-slider::-webkit-slider-thumb{
	appearance: none;
	visibility:hidden;
	width: 1px;
	height: 10px;
  }
  
  #sound-slider:hover{
	height: 1em;
  }
  
  #volume{
	font-family: sans-serif;
	color: rgb(var(--el-bg-color));
	min-width: 2em;
	text-align: right;
  }
  .invisible-button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: 0;
	height: 0;
	visibility: hidden;
  }
  .container {
	perspective: 1000px;
  }
  
  .container .avatar {
	  margin-top: 50px;
	  z-index: 1;
	  border-radius: 50%;
	  height: 118px;
	  width: 118px;
	  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  transform-style: preserve-3d;
	  box-shadow: 
		  0 5px 15px rgba(0,0,0,0.2),
		  0 0 0 2px rgba(255,255,255,0.1);
  }
  
  .container .avatar:hover {
	  transform: 
		  scale(1.1) 
		  rotateX(10deg) 
		  rotateY(10deg) 
		  translateZ(20px);
	  box-shadow: 
		  0 15px 30px rgba(0,0,0,0.3),
		  0 0 0 4px rgba(255,255,255,0.2);
	  cursor: pointer;
  }
  .rounded-xl {
	transform-style: preserve-3d;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .rounded-xl:hover {
	transform: translateZ(10px);
	box-shadow: 
	  0 5px 15px rgba(0,0,0,0.2),
	  0 10px 30px rgba(0,0,0,0.1);
  }
  .flex.items-center.gap-x-2.bg-gray-200\/60.dark\:bg-white\/10 {
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: center;
	backface-visibility: hidden;
  }
  
  .flex.items-center.gap-x-2.bg-gray-200\/60.dark\:bg-white\/10:hover {
	transform: scale(1.1) rotate(3deg);
	box-shadow: 
	  0 5px 15px rgba(0,0,0,0.2),
	  0 0 0 2px rgba(255,255,255,0.1);
  }
  
  @media (prefers-color-scheme: dark) {
	.flex.items-center.gap-x-2.bg-gray-200\/60.dark\:bg-white\/10:hover {
	  box-shadow: 
		0 5px 15px rgba(255,255,255,0.1),
		0 0 20px rgba(255,255,255,0.05);
	  background: rgba(255,255,255,0.15);
	}
  }
  
  a[href*="discord"]:hover svg { color: #7289da; }
  a[href*="github"]:hover svg { color: #6e5494; }
  a[href*="ok"]:hover svg { color: #00ff95; }
  .icon-wrap {
	position: relative;
	cursor: pointer;
	padding: 4px;
  }
  #icon-wrap {
    z-index: 99000;
    position: relative;
  }
  .icon-wrap i {
	font-size: 28px;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: center;
  }
  
  .icon-wrap::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	opacity: 0;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	pointer-events: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	z-index: 1000; 
  }
  
  .icon-wrap:hover i {
	transform: scale(1.8); 
	filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
  }
  
  .icon-wrap:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
  }
  
  @media (prefers-color-scheme: dark) {
	.icon-wrap::after {
	  background: rgba(0, 0, 0, 0.9);
	  color: rgb(255, 255, 255);
	}
  }
  .flex.items-center.w-full.min-h-screen.justify-center.top {
	overflow: visible !important;
  }
  .devicon-linux-plain.colored {
	color: #FCC624 !important; 
  }
.gap-5.grid.grid-cols-3.md\:grid-cols-4 {
	padding-left: 1rem; 
	margin-right: -1rem; 
}


.text {
	transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	transform-origin: center;
	padding: 10px;
	margin: 10px 0;
}

.text:hover {
	transform: scale(1.02);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	box-shadow: 
		0 10px 20px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}
  
#mobile-warning {
	display: none;
	min-height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 0.3s ease-out;
  }
  
  #mobile-warning.visible {
	opacity: 1;
  }
  
  .warning-card {
	background: rgba(255, 255, 255, 0.98);
	border-radius: 2rem;
	box-shadow: 
	  0 25px 50px -12px rgba(0, 0, 0, 0.25),
	  0 0 0 1px rgba(255, 255, 255, 0.1);
	padding: 3rem 2.5rem;
	width: 100%;
	max-width: 32rem;
	text-align: center;
	animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	position: relative;
	overflow: hidden;
  }
  
  .warning-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
  }
  
  @keyframes slideUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .icon-container {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto 2.5rem;
	animation: fadeIn 0.6s ease-out 0.3s forwards;
	opacity: 0;
  }
  
  @keyframes fadeIn {
	to { opacity: 1; }
  }
  
  .icon-container::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 3px;
	background: linear-gradient(90deg, #dc2626, #ef4444);
	transform: translate(-50%, -50%) rotate(45deg);
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
  }
  
  .warning-title {
	font-size: 2.25rem;
	font-weight: 800;
	background: linear-gradient(135deg, #1e293b, #0f172a);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 1.5rem;
	animation: fadeIn 0.6s ease-out 0.6s forwards;
	opacity: 0;
	letter-spacing: -0.02em;
  }
  #euhaz {
    z-index: 99000;
    position: relative;
}
  .warning-text {
	color: #475569;
	margin-bottom: 2.5rem;
	line-height: 1.8;
	font-size: 1.25rem;
	animation: fadeIn 0.6s ease-out 0.9s forwards;
	opacity: 0;
  }
  
  .desktop-icon {
	animation: fadeIn 0.6s ease-out 1.2s forwards;
	opacity: 0;
	transform: scale(1.25);
  }
  
  .mobile-icon {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
	transform: scale(1.2);
  }
  
  @media (max-width: 768px) {
	#desktop-content {
	  display: none;
	}
	#mobile-warning {
	  display: flex;
	}
  }
  
  @media (max-width: 480px) {
	.warning-card {
	  padding: 2.5rem 2rem;
	  border-radius: 1.5rem;
	}
	.warning-title {
	  font-size: 2rem;
	}
	.warning-text {
	  font-size: 1.125rem;
	}
	.icon-container {
	  width: 80px;
	  height: 80px;
	}
  }