@font-face {
	font-family: Estedad;
	src: url(../fonts/Estedad.woff2);
}

* {
	box-sizing: border-box;
}

html {
	font-size: 15px;
	scroll-behavior: smooth;
}

body {
	font-family: Estedad, calibri;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body {
	background: white;
	background-size: 400% 400%;
	height: 100vh;
}

/*@keyframes gradient{
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0% 50%;
	}
}*/
a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: white;
	text-decoration: double;
	text-underline-offset: 5px;
	text-decoration-style: wavy;
}

h1 {
	color: rgb(255, 255, 255);
	background-color: #f7cfe3;
	border-radius: 30px;
	padding: 5px;
	margin: 10px;
}

.menu-links {
	color: #500724;
}

.video-preloader {
	background-color: rgb(255, 253, 253);
	display: block;
	margin: 0 auto;
}

.fixed-background {
	background-attachment: fixed;
}

#up {
	width: 100px;
	aspect-ratio: 1;
	background-image: url(../images/up.png);
	position: fixed;
	right: 10px;
	bottom: 10px;
	transform: scale(0.6);
}

#up:hover {
	background-position: top right;
}

/*website Structure*/
header,
footer,
aside,
article {
	background-color: rgba(255, 183, 207, 0.2);
	border-radius: 20px;
	box-shadow: rgba(243, 249, 255, 0.2) 0px 8px 24px;
}

main {
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: auto auto auto;
	gap: 10px;
	grid-template-areas:
		'header header'
		'aside  article'
		'footer footer'
	;
	/*border-image: url(../images/border.png) 20% stretch;*/
	background-color: #ffffff;
	width: 100%;
	max-width: 950px;
	min-height: 1000px;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
}

.grid-container {
	display: grid;
	grid-template-areas:
		"header"
		"main"
		"footer"
	;
}


header {
	grid-area: header;
}

aside {
	grid-area: aside;
}

article {
	grid-area: article;
}

footer {
	grid-area: footer;
	clear: both;
	direction: ltr;
	text-align: center;
	letter-spacing: 10px;
}

#main-menu ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
	margin-top: 20px;
}

#main-menu ul li a {
	display: block;
	background-color: #f472b6;
	color: #500724;
	padding: 10px 0px;
	margin: 10px 0px;
	border-right: 10px solid rgb(156, 157, 136);
	border-radius: 8px 8px 8px;
}

#main-menu ul li a:hover {
	box-shadow: -4px 4px 0px #9d174d;
	border-right-color: #9d174d;
}

#main-menu1 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	margin-top: 5px;
}

#main-menu1 ul li {
	display: inline-block;
}

#main-menu1 ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 7px 9px;
	border-radius: 10px 10px 0px 0px;
	background-color: rgb(156, 157, 136);
	color: #500724;
	border-bottom: 4px solid #500724;
}

#main-menu1 ul li a:hover {
	background-color: #f0abfc;
	box-shadow: 0px 4px 4px #f472b6;
	border-right-color: #9d174d;
}

#ads {
	position: fixed;
	left: 0;
	bottom: 0;
}

#gallery {
	text-align: center;
}

#gallery img {
	border: 3px solid plum;
	box-shadow: 0px 0px 5px silver;
	margin: 5px;
	filter: blur(5px);
}

#gallery img:hover {
	box-shadow: 0px 0px 8px purple;
	transform: scale(1.2);
	filter: grayscale(0%) blur(0px);
	filter: blur(0);
}

@media screen and (max-width:1024px) {
	#main-menu {
		display: inherit;

	}

	main {
		width: 100%;
	}

	#main-menu1 {
		display: none;
	}


}

@media screen and (max-width:500px) {
	.navbar {
		position: relative;
		width: 100%s;
	}

	main {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			'header'
			'aside'
			'article'
			'footer'
		;
	}

}

.mt-6 {
	margin-top: 4rem !important;
}

.bg-body-tertiary {
	--bs-bg-opacity: 1;
	/*background-color: rgb(211, 183, 183);*/
	background-color: white;
}

#navbarSupportedContent {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

.navbar {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
}

.card {
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: #140c0f;
	background-color: #f1bfd3;
}


.navbar .nav-link:hover {
	background-color: rgb(141, 139, 139) !important;
	color: #ffffff !important;
	border-radius: 5px;
}

#signin {
	color: black;
	background-color: #f1bfd3;
	border: 1px solid black;
	border-radius: 20px 20px;

}

#signin:hover {
	background-color: rgb(141, 139, 139);
	color: #ffffff;
}

.custom-search {
	margin-left: auto;
}

.btn-primary {
	margin-left: 0;
	margin-right: auto;
}

#s {
	background-color: #b84774;
	border: 0.5 solid #f1bfd3;
	width: 100%;
}

#s:hover {
	background-color: #f1bfd3;
}

#btn {
	color: #500724;
	background-color: #ff3a89;
	border: #500724;
}

#btn:hover {
	color: #500724;
	background-color: #f0a0c0;
	border: #500724;
}

.A {
	color: #500724;
	background-color: #f0a0c0;
	border: #f0a0c0;
}

#A:hover {
	color: #500724;
	background-color: #f14d8f;
	border: #f14d8f;
}

#B {
	color: #500724;
	background-color: silver;
	border: 10px #fd7baf;
}

#B:hover {
	color: #500724;
	background-color: #b9b2b2;
	border: 3px #f0a0c0;
}

.logo {
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto;
	padding: 10px;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

#k {
	overflow-x: hidden;
	max-width: 100%;
}