@import url("css/hero.css");
@import url('css/calendar.css');
@import url('css/location.css');
@import url("css/decor.css");
@import url("css/decor2.css");
@import url("css/rspv.css");
@import url("css/timer.css");
@import url("css/countdown.css");
@import url("css/music.css");

@import url("https://fonts.googleapis.com/css2?family=Forum&display=swap");

* {
	padding: 0;
	margin: 0;
	user-select: none;
	color: rgba(255, 255, 255, 0.8);
}

body {
	background-color: rgb(0, 0, 0);
	font-family: "Forum", serif;
    font-weight: 400;
}

/* ==============================
   ПЛАВНОЕ ПОЯВЛЕНИЕ БЛОКОВ
============================== */

.reveal {
	opacity: 0;
	transform: translateY(70px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	will-change: opacity, transform;
}

.reveal.reveal_active {
	opacity: 1;
	transform: translateY(0);
}



/* чуть разные задержки, чтобы элементы появлялись мягче */
.reveal:nth-of-type(2) {
	transition-delay: 0.08s;
}

.reveal:nth-of-type(3) {
	transition-delay: 0.14s;
}

/* вариант появления слева */
.reveal-left {
	opacity: 0;
	transform: translateX(-70px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	will-change: opacity, transform;
}

.reveal-left.reveal_active {
	opacity: 1;
	transform: translateX(0);
}

/* вариант появления справа */
.reveal-right {
	opacity: 0;
	transform: translateX(70px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	will-change: opacity, transform;
}

.reveal-right.reveal_active {
	opacity: 1;
	transform: translateX(0);
}