.continue-btn {
	display: flex;
	width: 100vw;
	background-color: green;
	background: linear-gradient(to bottom, rgba(0, 153, 204, 0), var(--primary-color));
	position: fixed;
	/*
	position: absolute;
    bottom: var(--safe-area-inset-bottom, 0px);
	*/
	z-index: 1;
	bottom: 0;
    min-height: 10dvh;
/*	    transition: display 1s ease, opacity 1s ease;*/
/*    visibility: visible; Make it invisible but still part of the layout */
}
.continue-btn h3 {
	font-size: 3vh;
    margin: auto;
    color: var(--primary-color-dark);
    background: var(--secondary-color-dark);
    padding: 1vh 1.5vh;
    border-radius: 2vh;
    border: 0.5vh solid var(--secondary-color-dark-s2);
    transition: scale 1s ease, opacity 1s ease;
}
.continue-btn h3:hover {
	scale: 0.975;
    opacity: 0.75;
}
.continue-btn h3::after {
	content: "Continue To The Next Step";
}

@media (max-width: 768px) or (orientation: portrait) {
	.continue-btn h3::after {
		content: "Continue";
	}
}