body{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

section{
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(#333, #000);
}


.leaves{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.leaves div img {
	width: 15%;
	height: 8%;
	animation: animateIMG 15s linear infinite
}

.leaves div {
	position: absolute;
	display: block;
}


.leaves div:nth-child(1) {
	left:0%;
	animation: leaves 15s linear infinite;
	animation-delay: -3s;
}
.leaves div:nth-child(2) {
	left:20%;
	animation: leaves 15s linear infinite;
	animation-delay: -5s;
}
.leaves div:nth-child(3) {
	left:30%;
	animation: leaves 15s linear infinite;
	animation-delay: -8s;
}
.leaves div:nth-child(4) {
	left:40%;
	animation: leaves 15s linear infinite;
	animation-delay: -4s;
}
.leaves div:nth-child(5) {
	left:50%;
	animation: leaves 15s linear infinite;
	animation-delay: -6s;
}
.leaves div:nth-child(6) {
	left:60%;
	animation: leaves 15s linear infinite;
	animation-delay: -7s;
}
.leaves div:nth-child(7) {
	left:70%;
	animation: leaves 15s linear infinite;
	animation-delay: -5s;
}
.leaves div:nth-child(8) {
	left:80%;
	animation: leaves 15s linear infinite;
	animation-delay: -9s;
}
.leaves div:nth-child(9) {
	left:90%;
	animation: leaves 15s linear infinite;
	animation-delay: -1s;
}



@keyframes leaves {
		0%{
			top:-10%;
			opacity: 0;
		}

		10%{
			opacity: 1;
		}

		100% {
			top: 110%;
		}
}




@keyframes animateIMG {
	0%{
		transform :rotate(0deg);
	}

	20%{
		transform :rotate(45deg);
	}

	40%{
		transform :rotate(90deg);
	}


	60%{
		transform :rotate(125deg);
	}

	80%{
		transform :rotate(180deg);
	}

	100%{
		transform :rotate(225deg);
	}
}



.leaves2 {
	transform: scale(2) rotateY(180deg);
	filter:blur(2px);
	z-index: 0;
}


.leaves3{
	transform: scale(0.8) rotateX(180deg);
	filter:blur(4px);
	z-index: 0;
}	

.social-buttons {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    gap: 20px;
    z-index: 3;
    pointer-events: all;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.social-btn.vk:hover {
    border-color: #4c75a3;
    background: rgba(76, 117, 163, 0.1);
}

.social-btn.telegram:hover {
    border-color: #0088cc;
    background: rgba(0, 136, 204, 0.1);
}

.social-btn.discord:hover {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
}

.social-btn.github:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.social-btn:active {
    transform: scale(0.95);
}

.social-btn:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.social-btn svg {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-btn:hover svg {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .social-buttons {
        top: 50%;
    }
}

@media screen and (max-width: 600px) {
    .social-buttons {
        top: 55%;
    }
}

@media screen and (max-width: 480px) {
    .social-buttons {
        top: 60%;
        gap: 15px;
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .social-buttons {
        top: 65%;
    }
}

h1{
	position: absolute;
	top:30%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #e24a07;
	font-size: 50px;
	letter-spacing: 5px;
	z-index: 3;
	margin: 0;
	height: auto;
	text-align: center;
	width: 90%;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
                 0 0 20px rgba(226, 74, 7, 0.3);
}
canvas{
	position: absolute;
	top:85%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow: visible;
	z-index: 1;
	max-width: 90%;
	height: auto;
}
p1{
	position: absolute;
	top:35%;
	left: 50%;
	transform: translate(-50%,0%);
	color: #ff9136;
	font-size: 45px;
	letter-spacing: 5px;
	z-index: 3;
	height: auto;
	text-align: center;
	width: 90%;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7),
                 0 0 15px rgba(255, 145, 54, 0.3);
}