:root
{
    /* fallback for old browsers */
    background: rgba(240, 240, 240, 1);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(
      to bottom,
      rgba(240, 240, 240, 1),
      rgba(180, 180, 180, 1)
    );
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(
      to bottom,
      rgb(240, 240, 240, 1),
      rgba(180, 180, 180, 1)
    );

    --primary-color: rgb(255, 255, 255);
    --secondary-color: var(--bs-primary);
    --secondary-color-light: lightblue;
    --secondary-color-dark: darkblue;
    --text-color: black;
    --text-muted: var(--bs-secondary);
    
    --highlight-color: yellow;
}

.dark-theme {
    --primary-color: var(--bs-dark);
    --secondary-color: var(--bs-danger);
    --secondary-color-light: lightcoral;
    --secondary-color-dark: darkred;
    --text-color: white;
    --text-muted: rgb(184, 184, 184);
    
    /* fallback for old browsers */
    background: rgba(120, 120, 120, 1);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(
      to bottom,
      rgba(120, 120, 120, 1),
      rgba(180, 180, 180, 1)
    );
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(
      to bottom,
      rgb(120, 120, 120, 1),
      rgba(180, 180, 180, 1)
    );
}

.theme {
	background-color: var(--primary-color);
	color: var(--text-color);
}

.list-group-item.active {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}

.card-shadow {
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
}



.card-no-border {
	border: none !important;
	background-color: var(--primary-color)
}




  img.darken:hover {
	filter: brightness(75%);
  }




/* Homepage screens - start */

.tab1, .tab2, .tab3, .tab4, .tab5 {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: calc(100vh - 57px);
	height: calc(100svh - 57px);
	width: 100%;
	color: white;
}



@media (min-width: 576px) {
	.tab-title {
		max-width: 600px;
	}

	.title {
		font-size: 2.3rem;
		text-shadow: 3px 3px 3px #000;
		margin-bottom: 0px;
	}

	.description {
		font-size: 1.4rem;
		text-shadow: 2px 2px 2px #000;
	}
}

@media (max-width: 575px) {
	.tab-title {
		max-width: 400px;
	}
	.title {
		
		font-size: 1.5rem;
		text-shadow: 3px 3px 3px #000;
		margin-bottom: 0px;
	}

	.description {
		font-size: 1.1rem;
		text-shadow: 2px 2px 2px #000;
		
	}

}



.div-shadow {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}





/* Homepage screens - end */


.video-shortcode {
	max-width: 100%;
	height: auto;
}


/* Muzej tab - start*/
.hover-zoom {
	transition: all 0.3s ease;
}

.hover-zoom:hover {
	transform: scale(1.05);
}

.hover-zoom:active {
	transform: scale(0.95);
}

.overlay-dark {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6))
}


.muzej-text{
	
	height: 100%;
	white-space: normal;
	text-align: center;

}

.muzej-card {
	aspect-ratio: 4 / 3;
	display: inline-block;
}





.navbar {
	background-color: var(--primary-color);
	border-bottom: 1px solid var(--text-muted);
}

@media (max-width: 575px) {
	#navbar-img {
		height: 32px;
	}

	.navbar {}
}

@media (min-width: 576px) {
	#navbar-img {
		height: 38px;
	}

	.navbar {
		height: 57px;
		font-size: 0.91rem;
	}
}



.dropdown-divider {
	color: var(--text-color);
}

.dropdown-item:link,
.dropdown-item:visited {
	color: var(--text-muted);
	text-decoration: none;
}

.dropdown-item:hover {
	color: var(--text-color);
	text-decoration: none;
	background-color: transparent !important;
}

.dropdown-item:active {
	color: var(--text-color);
}


/* Navbar - end */




.btn-theme {
	background-color: var(--secondary-color);
	color: white;
}





/* Buttons - start */
.btn-mod:link {
	background-color: var(--secondary-color);
	color: white;
	border: none;
}

.btn-mod:visited {
	background-color: var(--secondary-color);
	color: white;
	border: none;
}

.btn-mod:hover {
	background-color: var(--secondary-color-light);
	color: white;
	border: none;
}

.btn-mod:active {
	background-color: var(--secondary-color-dark);
	color: white;
}

/* Buttons - end */



/* Link colors - start */
a:link,
a:visited {
	color: var(--secondary-color);
	background-color: transparent;
	text-decoration: none;
}

a:hover {
	color: var(--secondary-color-light);
	background-color: transparent;
	text-decoration: none;
}

a:active {
	color: var(--highlight-color);
}

/* Link colors - end */



/* Hovering stuff */
.book-arrow {
	color: var(--text-color);
	font-size: 2rem;
}
.book-arrow:hover {
	color: var(--text-muted);
}
.book-arrow:active {
  color: var(--secondary-color);
}


.btn-hover {
	color: white;
	font-size: 2rem;
}
.btn-hover:hover {
	color: var(--text-muted);
}







body {
	background-color: var(--bg-color);
	/* Required for footer to stay at bottom (First 4 lines) */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	position: relative;


}

footer {
	margin-top: auto;
	/* Push footer to bottom */
	background-color: var(--primary-color);
	color: var(--text-muted);
	height: 117px;
	width: 100%;
	text-align: center;
}



.img-cut {
	object-fit: cover;
	/* Do not scale the image */
	object-position: center;
	/* Center the image within the element */
	max-height: 200px;
	margin-bottom: 1rem;
}








 @media (max-width: 575px) {
	.book img{

	max-height: 200px;
	min-height: 200px;
	min-width: 100px;
	}
	.book-title{
		max-width: 150px;
	}}
	
	@media (min-width: 576px) {
	.book img{

	max-height: 300px;
	min-height: 300px;
	min-width: 200px;
	}
	.book-title{
		max-width: 200px;
	}

	}





.book-title { 
 display: block; /* Display always underneath the image */
 color: var(--text-color);
 margin-top: 5px;
 text-align: center;
}

.book-container {   
	transition: transform 0.3s ease;
}
.book {
	flex-shrink: 0;
}

.book img {
	object-fit: cover;
}
.book-title {
	
	font-size: 0.9rem;
	height: 100%;
}


.scroll-animation {
    transition: transform 0.3s ease; /* Apply the transition to the animated state */
}



 
 
.blur-load::before {
	content: "";
	position: absolute;
	inset: 0;
	animation: pulse 2s infinite;
}

.blur-load.loaded::before {
	content: none;
}

@keyframes pulse {
	0% {
		background-color: rgba(255, 255, 255, 0);
	}
	50% {
		background-color: rgba(255, 255, 255, 0.15);
	}
	100% {
		background-color: rgba(255, 255, 255, 0);
	}
}







.blur-load {
	position: relative;
	background-size: cover;
	background-position: center;
	height: 100%;
}

.blur-load.loaded img {
	opacity: 1;
}


.blur-load img {
	opacity: 0;
	transition: opacity 200ms ease-in-out;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
	display: block;
}




.brightness {
    display: inline-block;
}
.brightness img:hover {
    filter: brightness(75%);
	transition: all 0.2s ease-in-out;

}






.text-justify {
	text-align: justify;
}


#cookie { display: none;}

@media (max-width: 575px) {
.cookie {
	color: white;
	padding: 10px;
	position: fixed;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
}}

@media (min-width: 576px) {
	.cookie {
		color: white;
		padding: 10px;
		position: fixed;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		width: 100%;
	}}