/* Wordme.css */

@layer utilities {

	.wordme-grow-x112 {
		transform: scaleY(1.0) scaleX(1.0);
		transform-origin: top left;
	}

	.mb-18 {
		margin-bottom: 5rem;
	}

	@media (min-width: 640px) {
		.sm\:mb-18 {
			margin-bottom: 5rem;
		}
	}

	@media (min-width: 768px) {
		.md\:wordme-grow-x112 {
			transform: scaleY(1.13) scaleX(1.04);
			transform-origin: top left;
		}
	}
}


/* <-- Banner */

.banner {
    display: flex;
    justify-content: center;
    width: 100%; /* Biztosítja, hogy a banner szélessége kitöltse a rendelkezésre álló teret */
}

.banner video {
	width: 100%;
	max-width: 56rem;
    height: auto; /* Megőrzi a videó eredeti arányait */
}

/* Banner --> */

/* ***************************************************************** */

/* <-- Custom Dropdown selector */

.lg-wordme-dropdown, .md-wordme-dropdown, .sm-wordme-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
}

.lg-wordme-dropdown.open .wordme-dropdown-menu, .md-wordme-dropdown.open .wordme-dropdown-menu, .sm-wordme-dropdown.open .wordme-dropdown-menu {
    display: block;
}

.wordme-dropdown-menu {
    position: absolute;
    top: 100%; /* Mivel padding van a parent-en */
    left: 0; /* Mivel padding van a parent-en */
	transform: translateY(2px);
    min-width: 100%; /* Ez lehet, hogy korrekcióra szorul */
    background-color: #1F3F7F;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1000;
    display: none; /* Alapértelmezett elrejtés */
}

.lg-wordme-dropdown:focus-within .wordme-dropdown-menu, .md-wordme-dropdown:focus-within .wordme-dropdown-menu, .sm-wordme-dropdown:focus-within .wordme-dropdown-menu {
    display: block; /* A menü megjelenítése hover vagy fókusz esetén */
}

.lg-wordme-dropdown-selected, .md-wordme-dropdown-selected, .sm-wordme-dropdown-selected, .wordme-dropdown-item {
    display: flex;
    align-items: center;
}

.wordme-dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    background-color: transparent; /* Az alapértelmezett háttérszín */
}

.wordme-dropdown-item:hover {
    color: #DFDF3F; /* A hover állapot szövegszíne */
}

.flag-icon {
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.hidden {
    display: none;
}

/* Custom Dropdown selector --> */

/* ***************************************************************** */

.wordme-sixth {
	width: 16%;
}

.wordme-three-sixth {
	width: 49%;
}

.wordme-70 {
	width:70%;
}

.wordme-8 {
	width: width;
	height: 60px;
}
.wordme-30 {
	width: auto;
	height: 40px;
}

.wordme-20 {
	height: 20px;
	width: auto;
}
.wordme-40 {
	height: 40px;
	width: auto;
}

.wordme-h75p {
	height: 75%;
}

.wordme-title, .wordme-body {
	text-align: left;
	margin: 0;
	padding: 0.25rem;
}

.wordme-date {
	color: #0d1428;
	font-size: 0.75rem;
}

.wordme-title {
	font-weight: 700;
	color: #0d9488;
	font-size: 1.25rem;
}
.wordme-body {
	color: #3F3F3F;
	font-size: 1rem;
}

.wordme-body .small {
	font-size: 0.7rem;
}

.wordme-card {
	background-color: #DfDfDf; /* Világos háttér a jó olvashatóságért */
	border-color: #00107F; /* Sötétkék keret, amely illeszkedik az oldal színéhez */
	box-shadow: 0 10px 15px -3px rgba(12, 37,  51, 1.0), 0 5px 20px -2px rgba(32, 57, 71, 0.9);
	border-width: 3px; /* Vastagabb keret */
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wordme-card .left-card,
.wordme-card .right-card {
	display: block;
}

.wordme-card .left-card {
	margin-end: 1.5rem;
}
.wordme-card .right-card {
	margin-start: 1.5rem;
}

.wordme-card img {
    float: left; /* Aligns the image to the left */
    margin-right: 10px; /* Adds space between the image and the text to its right */
    margin-bottom: 10px; /* Adds space below the image if the text wraps below */
}

.wordme-equal {
	height: 100%;
}

.wordme-fullheight {
	flex: 1 0 auto;
}

.wordme-blue {
	color: #1e40af;
	font-weight: 700;
}

.wordme-initiale {
	width: 17%;
}

.wordme-shrink-y85 {
	transform: scaleY(0.85);
}

.wordme-grow-h115 {
	transform: scaleY(1.12) scaleX(0.96);
	transform-origin: top left;
}

button {
    /* 3D hatás létrehozása */
    box-shadow: 0 4px #b53210; /* Az árnyék színe legyen hasonló, de sötétebb, mint a gombé */
}

button:hover {
    /* Amikor a felhasználó az egérmutatót a gomb fölé viszi, a gomb kissé "felugrik" */
    position: relative;
    top: -2px;
    box-shadow: 0 6px #b53210;
}

#translation-link h3 a {
	color: #0F0F0F;
	font-weight: 500;
}

/* ***************************************************************** */

.dark .to-blue-800 {
	--tw-gradient-to: #00000F;
}

.dark .from-teal-400 {
	--tw-gradient-from: #2F2F2F;
}

.dark .bg-red-500 {
	background-color: rgb(255 58 88 / var(--tw-bg-opacity));
}

.dark .wordme-card {
	background-color: #1f1f1f; /* Világos háttér a jó olvashatóságért */
	border-color: #1030FF; /* Sötétkék keret, amely illeszkedik az oldal színéhez */
	box-shadow: 0 10px 15px -3px rgba(102, 117,  130, 1.0), 0 5px 20px -2px rgba(102, 117, 130, 0.9);
}

.dark .wordme-body {
	color: #AFAFAF;
}

.dark .wordme-title {
	color: #5dE4D8;
}

.dark .wordme-blue {
	color: #EFCF20;
}

.dark #translation-link h3 a {
	color: #3F3FFF;
}

.dark .text-black {
	color: rgb(100 100 250 / var(--tw-text-opacity));
}

.dark .wordme-dropdown-menu {
    background-color: #00001F;
    border: 1px solid #007FFF;
    box-shadow: 0 8px 16px 0 rgba(100,100,100,0.6);
}

.dark .wordme-dropdown {
    border: 1px solid #0cf;
}

.dark .light-aware {
	display: none;
}

.light .dark-aware {
	display: none;
}

.dark .wordme-date {
	color: #AdB4C8;
}

#carousel {
	transition: transform 0.5s ease-in-out;
}

.wordme-carousel {
	width: 150px;
	height: auto;
	max-width: 150px;
	min-width: 150px;
}
@media (min-width: 380px) and (max-width: 639px) {
	.wordme-carousel {
		width: 250px;
		height: auto;
		max-width: 250px;
		min-width: 150px;
	}
}

@media (min-width: 340px) and (max-width: 379px) {
	.wordme-carousel {
		width: 200px;
		height: auto;
		max-width: 250px;
		min-width: 150px;
	}
}

@media (max-width: 280px) {
	.wordme-carousel {
		width: 100px;
		height: auto;
		max-width: 250px;
		min-width: 100px;
	}
}

.grid-cols-14 {
	grid-template-columns:repeat(14,minmax(0,1fr));
}