/* Animation */

@keyframes fade-in {
    0% {
		opacity:0;
	}
    100% {
		opacity:1;
	}
}


.order-in > * {
	transition: 1s;
}
.order-in-fast > * {
	transition: var(--transition);
}
:is(.order-in, .order-in-fast) > * {
	opacity:0;
	top:10px;
}
:is(.order-in, .order-in-fast) > *.visible {
	opacity:1;
	top:0;
}

.slide-in {
	transition: var(--transition);
	opacity:0;
}
.slide-in.slide-left {
	translate: -40px;
}
.slide-in.slide-left.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-right {
	translate: 40px;
}
.slide-in.slide-right.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-up {
	transform: translateY(40px);
}
.slide-in.slide-up.visible {
	transform: translateY(0);
	opacity:1;
}
.slide-in.slide-down {
	transform: translateY(-40px);
}
.slide-in.slide-down.visible {
	transform: translateY(0);
	opacity:1;
}

.fade-in {
	opacity:0;
	transition: var(--transition);
}
.fade-in.visible {
	opacity:1;
}

.pop-in {
	opacity:0;
	transition: var(--transition);
}
.pop-in.visible {
	animation:pop-in 0.2s ease 0s forwards;
}


/* Dialog */
main dialog {
	position:fixed;
	top:50%;
	left:50%;
	translate: -50% -50%;
	border:solid 1px var(--color-lightgray);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	min-width:400px;
	max-width:800px;
    max-height:80dvh;
    overflow-y: auto;
	padding:var(--padding);
	margin:0;
	z-index:10;
	zoom:1;
}


/* Parallax */
.parallax {
	position:absolute;
}


@keyframes pop-in {
    0% {
		scale: 0.6;
		opacity: 0;
    }
	20% {
		scale: 1;
		opacity: 1;
	}
	60% {
		scale: 1.3;
		opacity: 1;
	}
    100% {
		scale: 1;
        opacity: 1;
    }
}

@media (max-width:820px ){
    main dialog {
        width:90vw;
		min-width:auto;
    }
}