#ribbon {
	z-index: 999;
	display: block;
	position: fixed; /* Changed from absolute to fixed */
	top: 50%;
	left: 0;
	width: 100vw;
	transform: translateY(-50%);
	background: pink;
	cursor: pointer;
}

#ribbon .bow {
	z-index: 999;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20rem;
	height: 10rem;
	background-image: url(/assets/images/red-bow-eb94535abb35deb1db4863e5d1345be7.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transform: translate(-50%, -50%);
}

#ribbon .bow.hide {
	z-index: 0;
	transition: transform 2s ease-in-out, opacity 0.1s ease 2s;
	transform: translateY(-2000rem) rotate(360deg);
	opacity: 0;
	transform-origin: top left;
}

#ribbon .ribbon--r, #ribbon .ribbon--l {
	z-index: 0;
	position: absolute;
	background-color: #a7002c;
	width: 50vw;
	height: 1.5rem;
}

#ribbon .ribbon--r {
	right: 0;
}

#ribbon .ribbon--r.hide {
	transition: transform 5s ease-in-out;
	transform: translateX(1000rem) rotate(90deg);
	transform-origin: bottom right;
}

#ribbon .ribbon--l {
	left: 0;
}

#ribbon .ribbon--l.hide {
	transition: transform 5s ease-in-out;
	transform: translateX(-1000rem) rotate(-90deg);
	transform-origin: bottom left;
}

#imgFollow {
	z-index: 999;
	position: fixed; /* Added to make it fixed on the screen */
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%) rotate(0deg);
	/* Center alignment and initial rotation */
	width: 5rem;
	cursor: pointer;
}

.login-panel {
	height: 620px;
}

.cursor-pointer {
	cursor: pointer;
}