:root {
	--dark-green: #08312a;
	--accent-green: #00e47c;
	--warm-gray: #e5e3de;
	--white: #FFFFFF;
	--error-red: #ed6440;
	
	/* 24-es vertikális és 12-es horizontális grid egységek */
	--u-height: calc(100vh / 24);
	--u-width: calc(100vw / 12);
}
html, body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--warm-gray);
	font-family: 'Segoe UI', Arial, sans-serif;
	color: var(--dark-green);
	user-select: none;
}
a {
	color: var(--dark-green) !important;
	text-decoration: none !important;
}
.width-100-percent {
	width: 100% !important;
}

/* secret fullscreen button */
#secret-fullscreen-btn {
	position: fixed;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	opacity: 0;
	cursor: default;
	z-index: 100000;
}

/* orientation warning */
#orientation-warning {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-green);
	color: white;
	z-index: 9999;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
}
.full-frame {
	height: 100vh;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.warning-content h2 {
	margin-top: 20px;
	font-weight: bold;
}

.rotate-icon {
	font-size: 5rem;
	animation: rotate-phone 2s infinite ease-in-out;
}
@keyframes rotate-phone {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(-180deg); }
	100% { transform: rotate(-360deg); }
}

@media (orientation: portrait) {
	#orientation-warning {
		display: flex;
	}
	.full-frame {
		display: none;
	}
}


/* Animációk */
@keyframes pulse-animation {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(8, 49, 41, 0.7);
	}
	50% {
		transform: scale(1);
		box-shadow: 0 0 0 20px rgba(8, 49, 41, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(8, 49, 41, 0);
	}
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.fade-out {
	animation: fadeOut 1s ease-out forwards !important;
}

@keyframes slideInTop {
	0% { opacity: 1; transform: translateY(-3vw); }
	100% { opacity: 1; transform: translateY(0); }
}

.slide-in-top {
	animation: slideInTop 1s ease-out forwards;
}

@keyframes slideInBottom {
	0% { opacity: 1; transform: translateY(3vw); }
	100% { opacity: 1; transform: translateY(0); }
}

.slide-in-bottom {
	animation: slideInBottom 1s ease-out forwards;
}

@keyframes slideInLeft {
	0% { opacity: 1; transform: translateX(calc(var(--u-width) * 4 * -1)); }
	100% { opacity: 1; transform: translateX(0); }
}

.slide-in-left {
	animation: slideInLeft 1s ease-out forwards;
}

@keyframes slideFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.slide-from-top {
    animation: slideFromTop 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 2;
}

@keyframes slideToBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.slide-to-bottom {
    animation: slideToBottom 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1;
}


@keyframes expandCenter {
    0% { 
        opacity: 0; 
        transform: scale(0); 
    }
    70% { 
        transform: scale(1.05);
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

.expand-in {
    animation: expandCenter 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.expand-in-2s {
    animation: expandCenter 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes expandCenterAnswers {
    0% { 
        opacity: 0; 
        transform: scale(0); 
    }
    80% { 
        transform: scale(0.8);
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

.expand-in-ans {
    animation: expandCenterAnswers 0.5s ease-out forwards;
}