html {
  height: 100%;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Make sure the page is at least the height of the viewport */
   background-image: url("https://journeymapper.ro/img/img_principala_c.jpg");
   background-size: 160vw;
   background-repeat: repeat;
   margin: 0;
   padding: 0;
   font-family: "Times New Roman", Times, serif;
}

/* Update the main-container class */
.main-container {
   flex-grow: 1; /* Expand and fill available space */
   display: flex;
   flex-direction: column; /* Stack child elements vertically */
   width: 100%;
   height: calc(88.5vh - 12vh); /* 88.5% viewport height minus 12vh for top and bottom containers */
   position: absolute;
   bottom: 9.5vh; /* 9.5% viewport height; Height of the footer */
   overflow-y: auto; /* Allow content to scroll when it overflows */
   padding: 0 10vh; /* 10vh padding on top and bottom; 0 padding on left and right */
   text-align: center;
}

.container-fluid {
   background-color: rgba(0, 55, 55, 0.5);
   padding: 0;
   border: none !important;
}

h1 {
   color: white;
   text-align: center;
   font-family: "Times New Roman", Times, serif;
}

h1 {
	font-size: 2.5em;
}
p {
	font-size: 1em;
	color: white;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
}
h2 {
	font-size: 0.8em;
	color: white;
    font-family: "Times New Roman", Times, serif;
}
h4 {
	font-size: 1.4em;
}

.container {
   width: 100%;
   padding-right: 0;
   padding-left: 0;
   margin-right: auto;
   margin-left: auto;
}

.map-list {
   background-color: rgba(255, 255, 255, 0.7);
   border-radius: 10px;
   text-align: center;
   overflow: hidden;
   margin: 0;
   padding: 0;
   list-style: none;
   font-family: "Times New Roman", Times, serif;
}

/* Update dimensions and positions using vh units for responsiveness */
.map-list li {
   display: inline-table !important;
   width: calc(30% - 2vh); /* 30% of viewport width minus 2vh spacing */
   margin: 2vh 2%; /* 1vh margin on top and bottom; 1% margin on left and right */
   vertical-align: top;
   opacity: 1;
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
   transition: transform .3s ease-in-out, opacity .3s ease-in-out;
   
}

.map-list li a {
   display: block;
   width: 100%;
   text-decoration: none !important;
   background: #eceff1;
}



a {
   color: #1565C0;
}

.map-list li a span.title {
   display: block;
   width: 100%;
   height: 3rem; /* Fixed height for the title box */
   padding: 0.25rem;
   font-size: 1.2em; /* Initial font size for the title text */
   color: white;
   background: rgba(8, 66, 128, 0.5);
   border-bottom: 3px solid #607d8b;
   overflow: hidden; /* Hide text that overflows the box */
}


.map-list li a span.image {
   display: block;
   overflow: hidden;
   background: #fff;
   display: flex;

}

.map-list li a span.image img {
   width: 100%;
   transition: all .5s ease-in-out;
}

.map-list li a:hover span.image img {
   opacity: .1;
}

.map-list li a span.descr {
   position: absolute;
   top: 5rem;
   padding: .25rem;
   font-size: .9em;
   text-align: center;
   line-height: 1.2;
   color: #333;
   -webkit-transform: scale(.8, .8);
   transform: scale(.8, .8);
   opacity: 0;
   transition: all .5s ease-in-out;
   display: flex;
}

.map-list li a:hover span.descr {
   transform: scale(1.0, 1.0);
   opacity: 1;
}

/* Stilizare input de căutare */
#search-input {
   transform: translateX(8%);
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 0.5vh 1vh;
   width: 30vh;
   font-size: 1rem;
}


/* Stilizare buton de căutare */
#search-button {
   line-height: 1;
   background-color: rgba(8, 66, 128, 0.8);
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 0.7vh 1vh;
   cursor: pointer;
   transition: background-color 0.3s ease-in-out;
}

/* Stilizare buton de căutare la hover */
#search-button:hover {
   background-color: rgba(8, 66, 128, 1);
}

#search-button i {
   color: white;
   font-size: 1rem;
}

/* Acesta este pentru a centra inputul și butonul în container */
#search-container {
   display: flex;
   justify-content: right;
   align-items: center;
   margin: 2vh;
}

#clear-button {
   line-height: 1;
   transform: translateX(-50%);
   background-color: transparent;
   border: none;
}

#clear-button i {
   color: grey;
   font-size: 1rem;
}

#clear-button:hover {
   background-color: lightgrey;
}

/* Stilizare pentru footer */
footer {
   width: 100%;
   background-color: rgba(0, 55, 55, 0.5);
   padding: 13px;
   color: white;
   display: block !important;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   border: none !important;
   z-index: 100; /* Add z-index to ensure it's above other elements */
   margin-top: auto; /* Push the footer to the bottom */
}

footer a {
   color: white;
   text-decoration: none;
   transition: color 0.3s;
   text-align: right;
}

footer a:hover {
   color: white;
   text-shadow: 1px 1px 2px black, 0 0 10px blue, 0 0 1px darkblue;
}

/* CSS for the logo image */
footer img {
   max-width: 70px;
   height: 70px;
   display: block;
   margin-right: 10px;
}