html,
body {
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #111;
	color: #fff;
	font-size: clamp(12px, 1vw, 17px);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.main {
	width: 40rem;
	filter: drop-shadow(0px 0px 200px black);
}

.main .content {
	position: relative;
	translate: 0 -15%;
	opacity: 0;
	animation: content-animation .5s ease-in-out forwards;
	margin-bottom: 1rem;
}

@keyframes content-animation {
	50% {
		translate: 0 5%;
	}

	100% {
		translate: 0 0;
		opacity: 1;
	}
}

.main h1 {
	font-size: 3rem;
	margin: 0 0 .25rem 0;
}

.main span {
	font-size: 1rem;
	line-height: 1.1rem;
	background-color: rgba(255, 255, 255, 0.8);
	color: black;
	margin-bottom: 1rem;
}

.main .foot {
	margin-top: 1rem;
}

.rect1 {
	background: #222;
	position: fixed;
	width: 200vw;
	rotate: 50deg;
	height: 50vw;
	opacity: 0;
	translate: 0 -100%;
	animation: rect1-animation .5s ease-in-out forwards;
}

@keyframes rect1-animation {
	100% {
		translate: 0 0;
		opacity: 1;
	}
}

.rect2 {
	background: #333;
	position: fixed;
	width: 200vw;
	rotate: 260deg;
	height: 50vw;
	opacity: 0;
	translate: 0 -100%;
	animation: rect2-animation .5s .5s ease-in-out forwards;
}

@keyframes rect2-animation {
	100% {
		translate: 0 0;
		opacity: 1;
	}
}

.stories {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.stories .item {
	display: flex;
	gap: 1rem;
	flex-direction: row;
	align-items: center;
	background-color: #333333;
	padding: 1rem;
	border-radius: 1rem;
}

.stories .item>div {
	display: flex;
	gap: .25rem;
	flex-direction: column;
	width: 100%;
}

.stories .item>div> :first-child {
	font-size: 1.2rem;
}

.stories .item img {
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background-color: #222;
}

.stories .progress {
	width: 100%;
	height: 1.25rem;
	background-color: #8d7c1b;
	border-radius: 1rem;
	position: relative;
}

.stories .progress>div {
	background-color: #FFD700;
	height: 100%;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	color: #111;
	font-weight: bold;
	justify-content: center;
}

.stories .item {
	opacity: 0;
	position: relative;
	left: 10%;
	cursor: pointer;
	text-decoration: none;
	color: white;
	animation: story-anim .3s ease-in-out forwards;
	transition: .25s translate;
}

.stories .item:hover {
	translate: 2% 0;
}

@keyframes story-anim {
	100% {
		left: 0;
		opacity: 1;
	}
}

.stories .item:nth-of-type(1) {
	animation-delay: .1s;
}

.stories .item:nth-of-type(2) {
	animation-delay: .2s;
}

.stories .item:nth-of-type(3) {
	animation-delay: .3s;
}

.stories .item:nth-of-type(4) {
	animation-delay: .4s;
}

.stories .item:nth-of-type(5) {
	animation-delay: .5s;
}