/* homepage navbar styles */

#homepage-navbar-container {
	position: static;
	display: flex;
	justify-content: center;
	width: 100vw;
	padding: 0 auto;
	margin-top: -100px;
}

#navbar {
	width: fit-content!important;
}

#homepage-navbar-container .navbar-item {
	margin-bottom: 6px;
}
#homepage-navbar-container .navbar-item:hover {
	transform: scale(105%);
}

@media screen and (max-width: 480px) {
	#homepage-navbar-container {
		margin-top: 0;
	}
}

/* opening illustration styles */

#opening-illustration-container {
	position: relative;
	top: 0vh;
	margin-top: -5vh;
	width: 100vw;
	height: 90vh;
}

#opening-text-container {
    position: absolute;
    z-index: 101;
    display: flex;
    width: 100vw;
    height: 100px;
	top: calc(25vh - 1em);
}

#opening-text {
    color: var(--text-col-primary);
    font-size: 56px;
    font-weight: normal;
    font-style: italic;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 40px;
	filter: drop-shadow(0px 4px 10px #00000033);
}

#logo-container {
    position:relative;
    z-index:100;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
	animation: 1s cubic-bezier(0.07, 0.4, 0, 1) slide-down;
	animation-fill-mode: both;
}

.logo-img {
    display: block;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-bottom: 5%;
}

@media screen and (max-width: 480px) {
	#opening-illustration-container {top: 0;height: 600px;}
	#opening-text-container {top:100px;}
	#opening-text {font-size: 32px;}
}

@keyframes slide-down {
	0% {
		opacity: 0;
		transform: translateY(-100px);
		filter: blur(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

#opening-illustration-container canvas {
	animation: 1s cubic-bezier(0.07, 0.4, 0, 1) slide-up;
	animation-fill-mode: both;
}

@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(150px);
		filter: blur(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

/* social media button styles */

#socials-buttons-container {
	position: static;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

#socials-buttons-container a {
	height: 48px;
}

#socials-buttons-container a:not(:last-child) {
	margin-right: 16px;
}

#socials-buttons-container svg {
	display: block;
	width: 100%;
	height: 100%;
}

#socials-buttons-container path {
	fill:var(--button-col);
}

#bsky-social-button {
	aspect-ratio: 1.1337325349;
	transform: scaleX(100%);
	transition: all 0.3s;
}

#bsky-social-button:hover {
	animation: 0.3s ease-in-out 0s flutter;
	animation-fill-mode: both;
}

@keyframes flutter {
	0% {
		transform: scaleX(100%);
	}
	25% {
		transform: scaleX(60%);
	}
	50% {
		transform: scaleX(100%);
	}
	75% {
		transform: scaleX(60%);
	}
	100% {
		transform: scaleX(100%);
	}
}

#twitter-social-button {
	aspect-ratio: 1.2810457516;
	transform: scaleX(100%) rotateZ(0deg);
	transition: all 0.3s;
}

#twitter-social-button:hover {
	animation: 0.6s linear 0s soar;
	animation-fill-mode: both;
}

@keyframes soar {
	0% {
		transform: translateY(0px) rotateZ(0deg);
	}
	8% {
		transform: translateY(5px) rotateZ(5deg);
	}
	30% {
		transform: translateY(-10px) rotateZ(-5deg);
	}
	60% {
		transform: translateY(-7px) rotateZ(10deg);
	}
	100% {
		transform: translateY(0px) rotateZ(0deg);
	}
}

#patreon-social-button {
	aspect-ratio: 1;
	transform: translateY(0) scale(1) rotateZ(0deg);
}

#patreon-social-button:hover {
	animation: 0.6s ease-in-out 0s dance;
	animation-fill-mode: both;
}

@keyframes dance {
	0% {
		transform: translateY(0) scale(1) rotateZ(0deg);
	}
	25% {
		transform: translateY(-8px) scale(1) rotateZ(-8deg);
	}
	37.5% {
		transform: translateY(-8px) scale(1) rotateZ(8deg);
	}
	50% {
		transform: translateY(-8px) scale(1) rotateZ(-8deg);
	}
	62.5% {
		transform: translateY(-8px) scale(1) rotateZ(8deg);
	}
	75% {
		transform: translateY(-8px) scale(1) rotateZ(-8deg);
	}
	100% {
		transform: translateY(0) scale(1) rotateZ(0deg);
	}
}

#youtube-social-button {
	aspect-ratio: 4/3;
}