@import url('base.css');

.landingPageButtons {
	display: block;
	align-content: center;

}

.hugeButtonPage {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	height: calc( ((1/3) * 100vh) - 50px);
	position: relative;

	display: flex;
	justify-content: flex-end;

	/* background-color: blue; */
	box-shadow: 0 0 5px 10px #000;

	--mask: linear-gradient(to right, transparent, 5%, white, 100%, transparent);
	-webkit-mask: var(--mask); 
  	mask: var(--mask);

	background-repeat: no-repeat;
	background-size: contain;

	opacity: 0;
}

.hugeButtonPage > p {
	align-self: center;
	font-weight: 800;
	font-size: 12vmin;
	padding-right: 20px;

	transition: 0.1s ease-out;
}

@keyframes fadeStart {
	0% {
		opacity: 0;
		transform: translate(10px);
	}
	100% {
		opacity: 1;
	}
}

.hugeButtonPage:hover > p {
	font-size: 12.5vmin;
}

.hugeButtonPage[id="animation"] {
	background-image: url('/img/landingPageBanners/banner-animations.png');
	animation: fadeStart 0.5s forwards;
}

.hugeButtonPage[id="sounddesign"] {
	background-image: url('/img/landingPageBanners/banner-sfx.png');
	animation: fadeStart 0.5s 0.1s forwards;
}

.hugeButtonPage[id="blenderaddon"] {
	background-image: url('/img/landingPageBanners/banner-blenderadd.png');
	animation: fadeStart 0.5s 0.2s forwards;
}

/* Eventually */
.hugeButtonPage[id="vrcwork"] {
	/* background-image: url('img/landingPageBanners/banner-sfx.png'); */
	animation: fadeStart 0.5s 0.2s forwards;
}

footer {
    display:flex;
    position: absolute;
    width: 100%;
    bottom: 0;
    justify-content:flex-end;

    opacity: 0;
    animation: fadeStart 0.5s 0.2s forwards;
}

footer a {
    opacity: 0.75;
}

footer a:hover {
    opacity: 1;
}

@media only screen and (max-width: 500px) {
	:root {
		--header-gap: 140px;
	}
	header {
		flex-direction: column;
		gap: 6px;
	}

    footer {
        justify-content:center;
    }
}

@media only screen and (max-width: 1000px) {
	.hugeButtonPage {
		width: 100%;
		height: calc( ((1/3) * 100vh) - 90px);

		justify-content: center;
		--mask: linear-gradient(to right, transparent, 5%, white, 95%, transparent);

		background-size: cover;
		background-position: 50% 50%;
	}

	.hugeButtonPage p {
		text-shadow: #000 2px 2px 1px;
	}
}