body {
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
	background-image: url('img/background.svg');	
	background-color: black;
	background-size: cover;
}

a {
	color: white;
	text-decoration: none;
}

#window {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 97.5%;
	height: 97.5%;
	transform: translate(-50%, -50%);

	border: 0.125vw solid white;
	border-radius: 1vw;

	backdrop-filter: blur(0.05vw);
	background: rgba(0, 255, 0, 0.02);
	animation: start 1.5s forwards;
}

main {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 97.5%;
	height: 97.5%;
	transform: translate(-50%, -50%);

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 3fr 1fr;
	grid-template-areas:
	"logoLeft title logoRight"
	"content content content"
	"footer footer footer";

    clip-path: inset(50% 50% 50% 50%);
    animation: reveal 1.5s forwards;
}


#title {
	grid-area: title;
	font-size: 1vw;
	text-align: center;
	background: #63d63c;
	background: linear-gradient(147deg,rgba(99, 214, 60, 1) 0%, rgba(255, 255, 255, 1) 99%);
	background-clip: text;
	color: transparent;
}

#logoLeft {
	grid-area: logoLeft;
}

#logoRight {
	grid-area: logoRight;
}

#content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;

	color: white;
	font-size: 1.5vw;
}

#gifs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	img {
		width: 4vw;
		height: auto;
		margin: 0.5vw;
	}
}

footer {
	grid-area: footer;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	padding: 1vw;

	font-size: 1.25vw;
}

.logo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: white;

	h3 {
		padding-top: 2vw;
		font-size: 1.5vw;
	}
}

.bagua {
	display: grid;
	justify-self: center;
	align-self: center;

	grid-template-areas: "layer";
	place-items: center;
	border-radius: 50%;
	--radius: 5vmin;
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
}

.center {
    display: grid;
    place-items: center;
    grid-area: layer;

    font-size: 5vmin;
    z-index: 10;
    transition: transform 0.75s ease-in-out;
}

.bagua:hover .center {
    transform: rotate(360deg);
}

.item {
	grid-area: layer;
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;

	display: grid;
	place-items: center;

	font-weight: bold;
	font-size: 2vmin;

	--d: calc(var(--i) / var(--total));
	--r-offset: -0.25turn;
	--r-amount: 1turn;
	--r: calc((var(--r-amount) * var(--d)) + var(--r-offset));

	--transform: rotate(var(--r)) translate(var(--radius));

	transform: var(--transform);
	transition: transform 0.75s ease-in-out;

	.bagua:hover & {
		--radius: calc(-1vmin);
		--r-offset: 0.75turn;
	}

	p {
		transform: rotate(90deg);
	}
}

@keyframes start {
	0% {
		height: 0%;
		width: 0%;
	}
	50% {
		height: 0%;
		width: 97.5%;
	}
	100% {
		height: 97.5%;
		width: 97.5%;
	}
}

@keyframes reveal {
    0% {
        clip-path: inset(50% 50% 50% 50%);
    }

    50% {
        clip-path: inset(50% 0 50% 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}