:root{
	--color1: #0077C2;
	--color2: #59a5f5;
	--color3: #c8ffff;
	--color4: #00BFFF;
	--color5: #00619a;
	--color6: #FFFFFFbb;
	--color7: #f5f5f5;
	--color8: #cccccc;
	--color9: #333333;
	--color10: #5c5c5c;
	--logo: '';
	--bg: #eff2f6;
}
/*:root{
	--color1: #1e295a;
	--color2: #4c5187;
	--color3: #abacea;
	--color4: #f18f01;
	--color5: #833500;
}
:root{
	--color1: #bb2649;
	--color2: #f35d74;
	--color3: #ffc3d4;
	--color4: #ffadad;
	--color5: #ffd6a5;
}*/
/*:root{
	--color1: #6A00FF;
	--color2: #a64aff;
	--color3: #ffb1ff;
	--color4: #00E5FF;
	--color5: #00829b;
	--color6: #1A1A1Abb;
	--color7: #292929;
	--color8: #404040;
	--color9: #FFFFFF;
	--color10: #e0e0e0;
	--logo: invert(1);
	--bg: repeating-conic-gradient(from 0deg at center center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 10%, rgba(1,171,206,1) 10%, rgba(1,171,206,1) 15%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 20%, rgba(247,148,29,1) 20%, rgba(247,148,29,1) 25%, rgba(255,202,8,1) 25%, rgba(255,202,8,1) 30%, rgba(212,30,78,1) 30%, rgba(212,30,78,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(92,46,145,1) 40%, rgba(92,46,145,1) 45%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 50%, rgba(0,166,94,1) 50%, rgba(0,166,94,1) 55%, rgba(0,0,0,0) 55%);
}*/
@font-face{
	font-family: Estedad;
	src: url(../fonts/Estedad.woff2);
}
@font-face{
	font-family: Mikhak;
	src: url(../fonts/Mikhak.woff2);
}
*{
	box-sizing: border-box;
}
html,body{
	scroll-behavior: smooth;
}
html{
	font-size: 17px;
}
body{
	color: var(--color9);
	font-family: Estedad, Tahoma; 
	background-color: var(--bg); 
	background-image: url(../images/bg.jpg); 
	/*background: linear-gradient(red,blue);
	background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);*/

	background-image: var(--bg);
	background-size: auto;
	background-position: 0% 0%;
	background-repeat: repeat;
	background-attachment: fixed;
}
h1{
/*	border-radius: 30px; 
	padding: 3px 7px; 
	margin: 10px;
	color: var(--color3); 
	background-color: var(--color1); 
	font-weight: 1000;*/
	font-family: Mikhak;
}
p{
	line-height: 1.7rem;
}
p::selection{
	background-color: tomato;
	color: white;
}
a{
	text-decoration: none;
	color: royalblue;
}
a:hover{
	color: indianred;
}
a:active{
	color: yellow;
}
#video-slide{
	box-shadow: 0px 20px 30px rgb(38, 57, 77) ;
	border-radius: 40px;
}
footer{
	direction: ltr; 
	letter-spacing: 5px; 
	/*text-shadow: 1px 1px 0px var(--color4);*/
	text-align: center;
	font-family: Courier New;
}
#container{
	/*visibility: hidden;*/
}

#up{
	width: 100px;
	aspect-ratio: 1;
	margin: 0 auto;
	background-image: url(../images/btn.png);
	transform: scale(0.5);
	position: fixed;
	bottom: 10px;
	right: 10px;
}
#up:hover{
	background-position: top right;
}

/* Website structure */
main{
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 170px auto 100px;
	grid-template-areas: 
	'header header'
	'aside article'
	'footer footer'
	;
	gap: 10px;
	background-color: var(--color6);
	background-clip: padding-box;
	/*visibility: hidden;*/
	width: 950px;
	min-height: 1000px;
	margin: 0 auto;
	padding: 10px;
	border: 10px solid black;
	border-image: url(../images/border.png) 20% stretch;
}
header,aside,article,footer{
	background-color: var(--color6);
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	border-radius: 10px;
}
header{
	grid-area: header;
}
aside{
	grid-area: aside;
}
article{
	grid-area: article;
	padding: 10px;
}
footer{
	grid-area: footer;
}

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

.p-bg{
	text-align: justify; 
	background-size: cover;
	background-image: url('../../../images/gallery/large/img2.jpg'); 
	background-attachment: fixed;
}


/* gallery */
#gallery{
	text-align: center;
}
#gallery img{
	transition: 0.5s;
	width: 130px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin: 10px;
	filter: grayscale(80%) blur(3px);

}
#gallery img:hover{
	transform: scale(1.1);
	filter: grayscale(0%) blur(0px);
	box-shadow: 0px 0px 20px silver;
}


/* box */
#box{
	width: 100px;
	aspect-ratio: 1;
	margin: 0 auto;
	position: relative;
	transform: scale(0.5);
}
#box div:first-child{
	width: 70px;
	aspect-ratio: 1;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color: hsl(300,50%,50%);
	z-index: 2;
}
#box div:nth-child(2){
	position: absolute;
	left: 10px;
	bottom: 70px;
	width: 70px;
	height: 20px;
	transform: skewX(-45deg);
	background-color: hsl(300,50%,40%);
	z-index: 2;
}
#box div:nth-child(3){
	position: absolute;
	left: 10px;
	bottom: 0px;
	width: 70px;
	height: 20px;
	transform: skewX(-45deg);
	box-shadow: 3px -3px 10px black;
	z-index: 1;
}
#box div:last-child{
	width: 20px;
	height: 70px;
	position: absolute;
	left: 70px;
	bottom: 10px;
	transform: skewY(-45deg);
	background-color: hsl(300,50%,30%);
	z-index: 2;
}


/* Animation */
@keyframes logoPlay{
	from{
		transform: translateX(-300px);
		opacity: 0;
	}
	to{
		transform: translateX(0px);
		opacity: 1;
	}
}
#logo{
	animation: logoPlay 2s;
	filter: var(--logo);
}


@keyframes menuPlay{
	0%{
		transform: translateX(300px);
	}
	50%{
		transform: translateX(-50px);
	}
	100%{
		transform: translateX(0px);
		opacity: 1;
	}
}
#main-menu ul li{
	opacity: 0;
	animation: menuPlay 1.5s forwards;
}

@keyframes navPlay{
	0%{
		transform: translateY(-100px);
	}
	50%{
		transform: translateY(10px);
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}
}
#nav ul li{
	opacity: 0;
	animation: navPlay 1s forwards;
}

@keyframes menuHover{
	0%{
		background-color: var(--color5);
		transform: scale(1.0);
	}
	50%{
		background-color: var(--color4);
		transform: scale(1.05);
	}
	100%{
		background-color: var(--color5);
		transform: scale(1.0);
	}
}
#main-menu ul li a:hover{
	animation: menuHover 1.5s infinite;
}


/* Tablet */
@media screen and (max-width: 1024px)
{
	#main-menu{
		display: inherit;
	}
	main{
		width: 100%;
	}
	#nav{
		display: none;
	}
}


/* Mobile */
@media screen and (max-width: 500px)
{
	main{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
		'header'
		'aside'
		'article'
		'footer'
		;
	}
}

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