/*
2025-04-09 14:56
Neaty HTML Template

http://www.templatemo.com/tm-501-neaty

*/
/* top | right | bottom | left */
/* Resets and confituratioins */

:root {
	--ident-size: 0.87rem;
	--size-75: 0.7em;
	--margin-left-right: 4rem;
	--clr-neutral: #f7f6e5;
	--clr-primary: #f678fa;
	--clr-accent: aqua;
	--clr-black: rgb(0,0,0);
}

* {
	box-sizing: border-box;
}

html {
	font-family: "Bellefair", serif;
	font-size: 26px;
	font-weight: 400;
	background-color: var(--clr-neutral);
	/*! overflow: hidden; */
}

body {
	margin: 0;
	padding: 0;
}

/*
div {
	outline-width: 2px;
	outline-color: black;
	outline-style: solid;
}*/

.oxygen-mono-regular {
  font-family: "Oxygen Mono", serif;
  font-weight: 400;
  font-style: normal;
}

/* Primitives */
h1, h2, h3, h4, h5, h6 {
	margin-block-start: 1.25em;
	margin-block-end: 0;
}
p {
	line-height: 1.3;
	margin-block-start: 0.75em;
	margin-block-end: 0;
}

button {
	background-color: transparent;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}
a,
button {
	transition: border-color 0.3s ease;
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
}

mark {
	background-color: #ffff00;
}

/* Apply a consistent focus style to all focusable elements */
[tabindex="0"]:focus {
    /*outline: 2px solid red;*/
	text-decoration:underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--clr-accent);
	outline: none;
}

.mrg-bottom-rem p {
	margin-bottom: 1.8rem;
}

.mrg-bottom-rem p:last-of-type {
    margin-bottom: 0;
}

.tm-left-right-container {
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
}

.text-xs-center {
	text-align: center;
}

.text-xs-center-list {
	text-align: center;
	font-size: var(--size-75);
	margin-top: 1.15rem;
}

.tm-xs-center > * {
	margin: 0 auto;
}

.tm-xs-center .styled-table {
	margin-top: 3.5em;
	margin-bottom: 3em;
	max-width: 97ch;
}

.tm-pink-bg {
	background-color: var(--clr-primary);
	color: var(--clr-black);
}

.tm-pink-bg a {
	display: contents;
	color: var(--clr-black);
}

.tm-site-name {
	font-size: 2.6rem;
	margin-top: 50px;
}

.tm-logo-div {
	color: black;
	line-height: 1.2;
}

.logo-prop {
	max-width: 10ch;
	height: auto;
}

.tm-mobile-header .logo-prop {
	max-width: 8ch;
}

.tm-site-logo {
	max-height: 2.45em;
	min-height: 1em;
}

.decorator-prop {
	width: 80%;
	max-width: 25ch;
}

.tm-main-nav {
	margin: 0.75em auto;
	width: 20ch;
}

.tm-main-nav-ul {
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: 0.5em;
}

.tm-content-div img {
	display: block;
	margin: 0 auto;	
}

img.separator-bar {
	width: 90%;
	max-width: 40ch;
}

.tm-content-div > .separator-bar {
	grid-area: separator;
}

.tm-content-div a {
	text-decoration: none;
	/* remove default underline */
	color: inherit;
	transition: color 0.3s ease;
}

.tm-content-div a:hover {
	color: black;
}

.tm-content-div.riddle-single {
	grid-template-rows: repeat(2, max-content);
	grid-template-areas: unset;
	grid-row-gap: 2.5em;
	padding-top: 3em;
}

/* Footer styles */
.tm-footer {
	margin-top: auto;
	padding-top: 1.2rem;
	padding-bottom: 1.3rem;
	grid-area: bottom;
}

.pagination-container {
	margin-top: 1rem;
}

.btn {
	padding: 7px;
	cursor:pointer;
	border: 3px solid transparent;
	color: var(--clr-accent);
	transition: border-color 0.3s ease-in-out;
	height: 2.8em;
	width: 2.8em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn:hover {
	border: 3px solid var(--clr-accent);
}

.tm-nav-item {
	font-size: 1.4rem;
	font-weight: 700;
	list-style: none;
}

.tm-mobile-header {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 999;
	height: 5em;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	padding-left: 3rem;
}

.tm-mobile-header .title {
	margin:0 0 0 0.5em;
}

.btn.bars {
	margin-left: auto;
}

.fa-bars {
	font-size: 1.7em;
}

.fa-xmark {
	font-size: 2em;
	color: var(--clr-accent);
  }

.tm-nav-menu {
	display: none;
}

.tm-nav-menu-ul {
	margin: 0;
	margin-bottom: 1rem;
	padding: 0;
}

.tm-nav-item a {
	color: var(--clr-accent);
	border: 3px solid transparent;
	transition: all 0.3s ease;
	display: block;
}

.tm-nav-item:hover a,
.tm-nav-item:active a,
.tm-nav-item:focus a,
.tm-nav-item-link.active {
	border: 3px solid;
}

.naslovka-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(100svh - 5em);
	margin: 0 auto;
}

.naslovka-container > img {
	max-height: calc((100svh - 5em) * 0.75);
}
img {

	max-width: 100%;
	/* Optional: makes the image responsive */
	height: auto;
	/* Optional: ensures the image doesn't overflow */
}

.naslovka-riddle {
	font-size: clamp(1.8rem, 3vw, 1rem);
}

/* top | right | bottom | left */
.riddle {
	font-size: clamp(2rem, 6vw, 4rem);
	font-family: "Bellefair", serif;
	font-weight: 500;
	font-style: normal;
	text-align: center;
	padding-bottom: 15px;
}

.riddle p {
	line-height: 1.2;
	margin-block-start: 0.45em;
}

.riddle-item-list {
	display: inline-block;
	/* border: 1px solid #ccc;   Just for visualization */
	box-sizing: border-box;
	/* Important: Includes padding and border in width */
	text-align: left;
	vertical-align: top;
}

.riddle-item-list p {
	line-height: 1.1;
	margin: 26px 1% 26px 0px;
}

.first-riddle {
	width: 18%;
	/* Narrower width for the first div */
	margin-right: 1%;
	color: gray;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--ident-size);
}

.middle-riddle {
	/* Class for the middle div (no changes needed) */
	width: 53%;
	margin-right: 2%;
}

.last-riddle {
	width: 22%;
	/* 25% width for the last div */
}

.scramble-container {
	position: relative;
	display: block;
	/* or inline-block if you prefer */
}

.scramble-container .text-scramble {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.impressum-l, .impressum-r {
	flex-basis: 100%;
}

.riddle-search-list-l,
.riddle-search-list-r {
	flex-basis: 100%;
}

.riddle-search-list-l h3,
.riddle-search-list-r h3 {
	font-family: "Oxygen Mono", serif;
	font-weight: 700;
	font-style: normal;
	margin-bottom: 0px;
	font-size: 1.1rem;
}

.riddle-search-list-l {
	margin: 0;
}

.riddle-search-list-r {
	margin: 0;
}

.riddle-search-ident {
	font-size: var(--ident-size);
	color: gray;
}

/* MS */
.riddle-search-list-l p,
.riddle-search-list-r p{
	text-align: center;
	margin-top: 0;
}

.riddle-search-list-l img,
.riddle-search-list-r img {
	margin: 0.25em auto;
	opacity: 20%;
}

/* Table styles */
.styled-table {
	border-collapse: collapse;
	color: gray;
}

.styled-table th,
.styled-table td {
	padding: 0.3rem;
}

.styled-table th {
    font-family: "Oxygen Mono", serif;
	font-weight: 300;
    font-size: 0.75rem;
	text-align: left;
	width: 20ch;
	vertical-align: top;
}

.styled-table td {
	text-align: left;
}

.styled-table td i {
	text-align: left;
	padding-right: 0.35rem;
}

.styled-table a {
	text-decoration: none;
	/* remove default underline */
	color: gray;
	transition: color 0.3s ease;
}

.styled-table a:hover {
	color: black;
}

.icon-container {
	padding-top: 0.5em;
	display: none;
}

.right-icon {
	margin-left: auto;
}

.social-icon {
	scale: 147%;
	opacity: 100%;
	transition: opacity 0.3s ease;
}

.social-icon:hover {
	opacity: 100%;
}


/* Impressum */
.impre-logos {
	display: flex;
	gap: 2em;
	margin-block-start: 0.75em;
}
.impre-logos img {
	/* flex-shrink: 0; */
	height: 70px;
	margin: 0;
	opacity: 100%;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: lightgray !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	/* Firefox 18- */
	color: lightgray !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	/* Firefox 19+ */
	color: lightgray !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: lightgray !important;
}

.tm-contact-right {
	padding-left: 15px;
}

.tm-copyright-p {
	margin-bottom: 0;
}

.tm-left-column {
	position: absolute;
	visibility: hidden;
	top: 0;
	right: 0;
	transform: translateX(100%) scale(0,1);
	transform-origin: right;
	transition-duration: 600ms;
	min-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 100vh;
	padding: 2em 0;
	z-index: 9999;
	
}
.tm-left-column.show {
	visibility: visible;
	transform: translateX(0) scaleX(1);
	transition: transform 0ms ease-in 0s, transform 700ms ease-in-out 0ms;
}
.tm-left-column .btn.close {
	position: absolute;
	right: 1em; 
	top: 1em;
}
.tm-left-column .btn.searchIcon {
	margin: 0 auto;
	font-size: 0.9em;
}
.tm-left-column .logo-prop {
	margin-bottom: 1.75em;
}
.tm-left-column .decorator-prop {
	margin-top: 2.75em;
}
.tm-right-column {
	height: 100vh;
	overflow-y: scroll;
}

.text-xs-center.tm-social-block {
	display: flex;
	gap: 2em;
	justify-content: center;
}

.riddle-search-list {
	margin-top: 1em;
	grid-area: main;
}


.horizontal {
	display: flex;
}

.tm-nav-item.search-icon {
	display: none;
}

.tm-content-div {
	display: grid;
	min-height: calc(100svh - 5em);
	grid-template-rows: 3em 1.5em auto auto;
	grid-template-areas: "top" "separator" "main" "bottom";
}

.tm-content-div.errors {
	grid-template-rows: 3rem auto;
}
.errors-message {
	grid-area: top;
}

.errors-img {
	grid-area: main;
	align-content: center;
	justify-self: center;
	max-width: 480px;
	max-height: 75svh;
	margin-bottom: 3rem;
}

/* Media Queries */

/* Layouts */

/* --- Larger Phones / Small Tablets (around 768px) --- */
@media (max-width: 785px) {
    html {
        font-size: 20px;
    }
	.tm-content-div {
		grid-template-rows: 3em 1.5em auto 8.9em;
	}
    .tm-site-name {
        font-size: 2rem;
		margin-top: 20px;
    }

	.riddle {
		font-size: clamp(1.4rem, 3vw, 2.8rem);
		/*margin: 20px auto 30px auto;*/
	}
	
	.tm-nav-item {
        font-size: 1.2rem; /* Reduce nav item font size */
    }

	
	.riddle-item-list {
		display: block; /*Make items list display as blocks*/
	}

	.riddle-search-list-l,
	.riddle-search-list-r {
		padding: 0 20px; /* Adjust padding */
	}

	.riddle-search-list-l.mrg-bottom-rem p:last-of-type {
		margin-bottom: 1.8rem;
	}
	
	.impre-logos{
		flex-direction: column;
	}

	.impre-logos img {
		height: 40px;
	}
	:root {
		--margin-left-right: 2rem;
	}

	.tm-xs-center .styled-table {
		max-width: 55ch;
	}
	.social-icon {
		scale: 100%;
	}

	.pagination-list {
		flex-direction: column;
		gap: 1em !important;
	}
	.naslovka-riddle {
		font-size: clamp(1rem, 3vw, 1rem);
	}
}

/* --- Very small screens, adjust if needed --- */
@media (max-width: 320px) {
    /* Add any styles specifically for extremely small screens */
      html {
        font-size: 16px;
    }
}

@media screen and (min-width: 320px) {
	.tm-right-column .tm-mobile-header {
		padding: 0 1em;
	}
}

@media  screen and (min-width: 786px) {
	.tm-left-column {
		overflow: hidden;
		height: 0;
		transform: unset;
		position: absolute;visibility: hidden;
	}

	.naslovka-container {
		align-items: unset;
	}

	.logo-prop{
		max-width: 8ch;
	}
	.btn.bars {
		display: none;
	}

	.tm-right-column .tm-mobile-header {
		padding: 0 3em;
	}
}

/* Tablets landscape and smaller desktops */
@media screen and (min-width: 786px) and (max-width: 1440px) {
	.tm-mobile-header .tm-nav-menu, .tm-nav-menu-ul {
		position: unset;
		transform: unset;
		width: unset;
		display: flex;
		column-gap: 1em;
		padding: 0;
		margin: 0;
		align-items: center;
	}
	.tm-mobile-header .tm-nav-menu {
		margin: 0 0 0 auto;
	}

	.naslovka-container > img {
		max-height: calc((100svh - 5em) * 0.75);
	}
	.naslovka-container > div {
		margin-right: auto;
	}
	.riddle-search-list {
		display: flex;
		column-gap: 1em;
	}
}

/* Landscape narrow screens - smartphones */
@media screen and (max-height: 520px) {
	.tm-right-column > * {
		padding: 0 1em !important;
	  }
	
	.naslovka-container {
		flex-direction: initial;
		/*justify-content: center;*/
	}
	.naslovka-container > img {
		max-height: initial;
	}
	.naslovka-container > .error-size {
		max-height: 65%;
		flex-basis: unset;
	}
	.naslovka-container > div {
		margin: 0;
		margin-top: 10%;
	}
	.naslovka-riddle {
		flex-basis: 35%;
	}
	.error-size {
		max-height: 60svh;
	}
}

/* Full width HD screens and beyond */
@media screen and (min-width: 1440px) {
	.tm-left-right-container {
		display: grid;
		grid-template-columns: min(30%, 825px) minmax(70%, auto);
	}
	.tm-left-column {
		transform: unset;
		display: flex;
	}
	.tm-left-column .btn.search-icon {
		display: none;
	}
	.tm-mobile-header {
		display: none;
	}
	.naslovka-container > img {
		margin-top: 4em;
	}
	.tm-right-column .icon-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: sticky;
		top: 5em;
		z-index: 99;
		padding-top: 0.5rem;
		top: 0;
	}
	.tm-left-column {
		position: unset;
		visibility: visible;
		flex-direction: column;
		height: unset;
		width: unset;
		/*max-width: 650px;*/
		justify-content: space-evenly;
		align-items: center;
	}
	.tm-left-column .btn.close{
		display: none;
	}
	.logo-prop {
		max-width: 10ch;
		width: unset;
	}
	.tm-right-column {
		position: relative;
		height: 100vh;
		overflow-y: scroll;
		align-items: center;
	}	
	.tm-right-column > * {
		max-width: 1700px;
		width: 96%;
	}
	.tm-right-column .tm-content-div,
	.icon-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}
	.riddle-search-list {
		display: flex;
		column-gap: 4em;
		margin-top: 1.2rem;
	}
	.search-overlay {
		max-width: unset;
	}
	.decorator-prop {
		width: unset;
	}
	.tm-content-div.riddle-single {
		padding-top: 5em;
	}
	.impressum-container {
		display: flex;
		gap: 50px;
	}
}

@media (max-width: 2560px) {
	.tm-right-column > * {
		padding: 0 3em;
	}
	.tm-right-column .search-overlay {
		margin: 0;
	}

	:root {
		--margin-left-right: 2.6rem;
	}
}

/* --- Smaller Phones (e.g., iPhone SE - around 375px) --- */
@media (max-width: 576px) {

	html {
	   font-size: 18px; /* Smallest base font size */
   }
   
   .riddle {
	   font-size: clamp(1.2rem, 2vw, 2.4rem);
   }

   .tm-right-column > *, .tm-right-column .icon-container {
	   padding: 0 1rem; /* Even smaller padding */
   }

   .tm-xs-center-list {
	   font-size: 0.8em; /*Adjust list items*/
   }
   .tm-xs-center .styled-table {
	   max-width: 100%; /*Make table full width*/
   }
   .styled-table th {
	   width: auto; /* Adjust table header width */
	   font-size: 0.65rem;
   }
   .riddle-search-list-l,
   .riddle-search-list-r{
	   text-align: center;
   }
   .riddle-search-list-l h3,
   .riddle-search-list-r h3{
	   text-align: center;
   }
   
   .impre-logos img {
	   height: 30px;
   }
}

/* --- Full HD (1920x1080) and slightly below --- */
@media (max-width: 1920px) {
    html {
        font-size: 23px; /* Slightly smaller base font size */
    }

    .tm-site-name {
        font-size: 2.4rem; /* Adjust heading sizes */
    }
	
	.riddle {
		font-size: clamp(1.8rem, 5vw, 3.6rem); /* Adjust riddle size*/
	}

    .tm-nav-item {
        font-size: 1.3rem; /* Reduce nav item font size */
    }

	:root {
		--margin-left-right: 2.5rem;
	}
	.impre-logos img {
		height: 55px;
	}
	
	.tm-xs-center .styled-table {
		max-width: 70ch;
	}
	
	.social-icon {
		scale: 137%;
	}
	.decorator-prop {
		width: 80%;
		max-width: 23ch;
	}
}

/* --- Lenovo laptop (1600x900) and slightly below --- */
@media (max-width: 1600px) {
    html {
        font-size: 22px; /* Slightly smaller base font size */
    }

    .tm-site-name {
        font-size: 2.2rem; /* Adjust heading sizes */
    }
	
	.riddle {
		font-size: clamp(1.8rem, 5vw, 3.6rem); /* Adjust riddle size*/
	}

    .tm-nav-item {
        font-size: 1.1rem; /* Reduce nav item font size */
    }
	.impre-logos img {
		height: 52px;
	}
	
	.tm-xs-center .styled-table {
		max-width: 70ch;
	}

	.social-icon {
		scale: 130%;
	}

	:root {
		--margin-left-right: 2.4rem;
	}
	.decorator-prop {
		width: 80%;
		max-width: 22ch;
	}
}

/* --- Tablets and Smaller Laptops (around 1366x768) --- */
@media (max-width: 1366px) {
    html {
        font-size: 20px;  /* Further reduce base font size */
    }

    .tm-site-name {
        font-size: 2.2rem;
    }

	.riddle {
		font-size: clamp(1.6rem, 4vw, 3.2rem);
	}

    .tm-nav-item {
        font-size: 1.2rem;
    }

	:root {
		--margin-left-right: 2.2rem;
	}

	.impre-logos img {
		height: 50px;
	}

	.tm-xs-center .styled-table {
		max-width: 65ch;
	}

	.social-icon {
		scale: 127%;
	}

	.decorator-prop {
		width: 80%;
		max-width: 20ch;
	}
	.naslovka-riddle {
		font-size: clamp(1.3rem, 3vw, 1rem);
	}
}