:root {
	--main-color: #DCDCDC;
	--grey-color: #5B5B5B;
	--black-color: #373A30;
	--white-color: #fcf6f6;
	--dark-color: #4E4D4D;
	--fill-color: hsl(0, 1%, 74%);
}

footer {
	bottom: 0;
	width: 100%;
	background-color: var(--black-color);
	color: var(--main-color);
}

#submit {
	background-color: var(--main-color);
	border: none;

}



/* ________________________________________________________INDEX PAGE_______________________________________________________________ */

#index {
	background-image: url('../images/universe.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--main-color);
	min-height: 700px;
}

#index .nav-link .fa-star,
#index .nav-link .fa-house,
#index .nav-link .fa-earth-americas {
	color: var(--main-color)
}

#index .nav-link .fa-star:hover,
#index .nav-link .fa-house:hover,
#index .nav-link .fa-earth-americas:hover {
	color: var(--grey-color)
}

.navbar-nav .nav-item .nav-link:hover i {
	color: var(--black-color)
}



header .explore {
	font-size: 60px;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	padding-right: 200px;
}

header .space {
	font-size: 108px;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	padding-right: 200px;
}

header .form {
	font-size: 50px;
	text-align: right;
	padding-right: 200px;
	color: white;
}

.form input[type="date"] {
	width: 282px;
	height: 79px;
	color: var(--dark-color);
	background-color:var(--main-color);
	border: none;
	font-size: 44px;
	padding-top: 4px;

}



.header1 .element2 {
	font-size: 42px;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: var(--main-color);
	margin-top: -38px;
	text-align: right;

}

.header1 h1 {
	text-align: right;

}

.header1 .element3 {
	margin-top: -25px;
}

.fa-magnifying-glass {
	background-color: var(--main-color);
	padding-top: 8px;
	padding-bottom: 13.5px;
	padding-right: 6px;
	color: var(--dark-color);
}

.header1 {
	padding-right: 1rem;
	margin-top: 5rem;
}

@media screen and (max-width: 600px) {
	#index {
		background-image: url('../images/universe_600.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}


	header .explore {
		font-size: 40px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 70px;
	}

	header .space {
		font-size: 88px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 70px;
	}

	header .form {
		font-size: 46px;
		text-align: right;
		padding-right: 70px;
	}

	.form input[type="text"] {
		width: 232px;
		height: 77px;
		color: var(--main-color);
		background-color: var(--main-color);
		border: none;
	}




	.header1 .element2 {
		font-size: 42px;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		color: var(--main-color);
		margin-top: -32px;
		text-align: right;

	}

	.header1 .element3 {
		margin-top: -23px;
	}

	.fa-magnifying-glass {
		background-color: var(--main-color);
		padding-top: 17.5px;
		padding-bottom: 13.5px;
		padding-right: 6px;
		color: var(--black-color);
	}

	.header1 {
		padding-right: 1rem;
		margin-top: 3rem;
	}

}

@media screen and (min-width: 600px) and (max-width: 800px) {
	#index {
		background-image: url('../images/universe_800.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}

	header .explore {
		font-size: 40px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 70px;
	}

	header .space {
		font-size: 88px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 70px;
	}

	header .form {
		font-size: 46px;
		text-align: right;
		padding-right: 70px;
	}

	.fa-magnifying-glass {
		background-color: var(--main-color);
		padding-top: 17.7px;
		padding-bottom: 13.5px;
		padding-right: 6px;
		color: var(--black-color);
	}

	.header1 .element2 {
		font-size: 42px;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		color: var(--main-color);
		margin-top: -32px;
		text-align: right;

	}
}


@media screen and (min-width: 800px) and (max-width: 1200px) {
	#index {
		background-image: url('../images/universe_1200.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}


	header .explore {
		font-size: 40px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 100px;
	}

	header .space {
		font-size: 88px;
		font-family: "Roboto", sans-serif;
		font-weight: 900;
		padding-right: 100px;
	}

	header .form {
		font-size: 46px;
		text-align: right;
		padding-right: 100px;
	}

	.form input[type="text"] {
		width: 232px;
		color: var(--main-color);
		background-color: var(--main-color);
		border: none;
	}



	.header1 .element2 {
		font-size: 42px;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		color: var(--main-color);
		margin-top: -32px;
		text-align: right;

	}

	.header1 .element3 {
		margin-top: -23px;
	}

	.fa-magnifying-glass {
		background-color: var(--main-color);
		padding-top: 17.8px;
		padding-bottom: 13px;
		padding-right: 6px;
		color: var(--black-color);
	}

	.header1 {
		padding-right: 1rem;
		margin-top: 4rem;
	}

}


/* ________________________________________________________DESCRIPTION PAGE_______________________________________________________________ */
.col-lg-8 {
	padding-top: 3rem;
}

#description {
	background-color: var(--fill-color);
	
}

#description h2 {
	font-size: 42px;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: var(--black-color);
}


h3 {
	font-size: 28px;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: var(--dark-color);
}

.datebox h3 {
	text-align: right;
	margin-right: 2rem;
}

.p-4 img {
	max-width: 100%;
	height: auto;
}

.datebox {
	background-color: var(--white-color);
	height: auto;
	padding-top: 6rem;

}



@media (max-width: 767px) {
	.datebox {
		height: auto;
		padding-top: 1rem;
		padding: 1rem;
	}

	h3 {
		font-size: 22px;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		color: var(--dark-color);
	}

	h2 {
		font-size: 36px;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		color: var(--dark-color);
	}

	/**/


}



/*hd window*/
#hdImageModal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	z-index: 9999;
	overflow: auto; /* Добавьте это для поддержки прокрутки */
  }
  
  #modalImg {
	max-width: 100%;
	/* Уберите max-height: 100%; чтобы изображение могло отображаться в своем полном размере */
	margin: auto;
	display: block;
	position: relative; /* Измените на relative, чтобы изображение могло растягиваться вверх и вниз */
  }
/* ________________________________________________________FAVOURITE PAGE_______________________________________________________________ */

.fh2 {
	margin-top: 40px;
}

.fheader {
	height: 150px;
}


#favourites {
	background-color: var(--main-color);
}


#likePhotos img {
	width: auto;
	height: 300px;
	transition: filter 0.3s ease;
}

#likePhotos img:hover {
	filter: brightness(70%);
}


#likePhotos {
	display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
	justify-content: center;
}


.like {
padding: 10px;

}
/*_______________________________________________STICKY _______________________________________________*/

#stickyElement.sticky {
    min-height: 90px; /* Устанавливаем минимальную высоту в режиме стики */
    /* Добавьте другие стили, которые вы хотите применить в режиме стики */
	position: sticky;
	background-image: url('../images/universe.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--main-color);
	width: 100%;
	padding-top: 8px;
	z-index: 9999;

}

/* Стили для кнопки отправки формы, когда элемент 'sticky' активен */
.sticky #submit {
    /* Пример изменения внешнего вида кнопки */
	height: 60px;
	border: none;
	background-color: transparent;
	color: var(--black-color);
	
}

.form.sticky #submit .fa-magnifying-glass {
    /* Ваши стили для иконки, когда форма имеет класс .sticky */
	height: 40px;
	font-size: 20px;
	background-color:var(--main-color);
	margin-left: -10px;
	margin-top: 10px;
	padding-top: 12px;
	padding-bottom: 25px;
	padding-left: 10px;
	padding-right: 10px;
}

/* Стили для элемента ввода даты, когда элемент 'sticky' активен */
.sticky #date {
    /* Пример изменения внешнего вида поля ввода */
    background-color: var(--main-color); 
    color: var(--dark-color); /
    border: 1px solid #ccc; /* Граница светло-серая */
	height: 40px;
	font-size: 20px;
}







/* delete btn favourite style */

.image-container {
	position: relative;
  }
  
  .delete-btn {
	position: absolute;
	top: 10px;  
	right: 10px;
	opacity: 0.5; 
	color: white;
	background-color: black;
	height: 30px;
	font-size: 10px;
	font-family: "Roboto", sans-serif;
  }
  
  .delete-btn:hover {
	opacity: 1;  
	font-weight: bold;
	color: white;
	background-color: black;
	opacity: 0.9; 
  }

  #like,
  #delete {
	  color: var(--white-color);
	  background-color: var(--grey-color);
	  opacity: 0.5; 
	  width: 100px;
	  margin-bottom: 10px;
  }

  #like:hover,
  #delete:hover {
	  opacity: 1; 
	
  }

  .button-container {
	display: flex;
	justify-content: center; /* Центрирует кнопки по горизонтали */
	align-items: center; /* Центрирует кнопки по вертикали */
	gap: 10px;
  }



  #dayImage  {
	transition: filter 0.3s ease;
}
  #dayImage:hover  {
	filter: brightness(85%);
  }

_________________________________________________________END_______________________________________________________________